TypeScript: Difference between revisions

From David's Wiki
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
TypeScript is a typed version of JavaScript. It claims to be a superset of JavaScript.
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==
==Syntax==
Here we focus on the syntax differences between TypeScript and JavaScript.
Here we focus on the syntax differences between TypeScript and JavaScript. See [[JavaScript]] for JS syntax.


===Classes===
===Classes===
Line 19: Line 20:
}
}
</syntaxhighlight>
</syntaxhighlight>
===Functions===
====Overloads====
See [https://www.typescriptlang.org/docs/handbook/functions.html#overloads 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===
[https://www.typescriptlang.org/docs/handbook/interfaces.html Interfaces]
[https://www.typescriptlang.org/docs/handbook/interfaces.html Interfaces]


Unlike JavaScript, TypeScript comes with support for interfaces:
Unlike JavaScript, TypeScript comes with support for interfaces.<br>
You can treat these interfaces as types or structs.
<syntaxhighlight lang="typescript">
<syntaxhighlight lang="typescript">
interface LabeledValue {
interface LabeledValue {
Line 29: Line 38:
}
}
</syntaxhighlight>
</syntaxhighlight>
===Generics===
[https://www.typescriptlang.org/docs/handbook/generics.html Generics]
===Type Guards===
[https://www.typescriptlang.org/docs/handbook/advanced-types.html Advanced Types]


==Compilation==
==Compilation==
Line 40: Line 55:
#:<pre>npm install -g typescript</pre>
#:<pre>npm install -g typescript</pre>
# Compile your typescript file
# Compile your typescript file
#:<pre>tsc greeter.js</pre>
#:<pre>tsc greeter.ts</pre>


===webpack===
===webpack===
Line 50: Line 65:
==Resources==
==Resources==
* [https://www.typescriptlang.org/docs/handbook/intro.html The TypeScript Handbook]
* [https://www.typescriptlang.org/docs/handbook/intro.html The TypeScript Handbook]
[[Category:Programming languages]]

Latest revision as of 08:36, 12 February 2023

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