TypeScript

From David's Wiki
\( \newcommand{\P}[]{\unicode{xB6}} \newcommand{\AA}[]{\unicode{x212B}} \newcommand{\empty}[]{\emptyset} \newcommand{\O}[]{\emptyset} \newcommand{\Alpha}[]{Α} \newcommand{\Beta}[]{Β} \newcommand{\Epsilon}[]{Ε} \newcommand{\Iota}[]{Ι} \newcommand{\Kappa}[]{Κ} \newcommand{\Rho}[]{Ρ} \newcommand{\Tau}[]{Τ} \newcommand{\Zeta}[]{Ζ} \newcommand{\Mu}[]{\unicode{x039C}} \newcommand{\Chi}[]{Χ} \newcommand{\Eta}[]{\unicode{x0397}} \newcommand{\Nu}[]{\unicode{x039D}} \newcommand{\Omicron}[]{\unicode{x039F}} \DeclareMathOperator{\sgn}{sgn} \def\oiint{\mathop{\vcenter{\mathchoice{\huge\unicode{x222F}\,}{\unicode{x222F}}{\unicode{x222F}}{\unicode{x222F}}}\,}\nolimits} \def\oiiint{\mathop{\vcenter{\mathchoice{\huge\unicode{x2230}\,}{\unicode{x2230}}{\unicode{x2230}}{\unicode{x2230}}}\,}\nolimits} \)

TypeScript is a typed version of JavaScript. It claims to be a superset of JavaScript.

Syntax

Here we focus on the syntax differences between TypeScript and JavaScript.

Classes

In TypeScript, you should declare properties above the constructor like so:

class Greeter {
  greeting: string;

  constructor(message: string) {
    this.greeting = message;
  }

  greet() {
    return "Hello, " + this.greeting;
  }
}

Interfaces

Interfaces

Unlike JavaScript, TypeScript comes with support for interfaces:

interface LabeledValue {
  label: string;
}

Compilation

You will need to compile your typescript before you can run it on Node.js or in the browser.
There are many ways to compile your typescript.
For Node programs, you can just use tsc or babel.
For browser applications, webpack can compile typescript.

tsc

  1. Install TypeScript
    npm install -g typescript
  2. Compile your typescript file
    tsc greeter.js

webpack

See Webpack: TypeScript

babel

See Babel preset typescript

Resources