TypeScript

From David's Wiki
Revision as of 08:36, 12 February 2023 by David (talk | contribs) (→‎Interfaces)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
\( \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 but most JS code will need modifications to compile properly as TS code.
The syntax is very similar to Kotlin.

Syntax

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

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;
  }
}

Functions

Overloads

See Overloads

TypeScript does not support overloading in the traditional sense, with multiple implementations.
However you can have multiple function declarations similar to prototypes.

Interfaces

Interfaces

Unlike JavaScript, TypeScript comes with support for interfaces.
You can treat these interfaces as types or structs.

interface LabeledValue {
  label: string;
}

Generics

Generics

Type Guards

Advanced Types

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.ts

webpack

See Webpack: TypeScript

babel

See Babel preset typescript

Resources