TypeScript Cookbook

TypeScript is a programming language that is a superset of ECMAScript 6. TypeScript was created to address the shortcomings of JavaScript for the developement of large-scale applications by extending JavaScript with the addition of static typing. This enables static language analysis, which in turn facilitates tooling and IDE support (which makes programming so much easier!).

I suspect that Microsoft developed the Visual Studio Code IDE specifically with TypeScript development in mind. When you develop TypeScript code in Visual Studio Code, you get IntelliSense, and you can set breakpoints and can step through the code just like you can with C# and C++. Within the IDE, the TypeScript service provides code complete suggestions, and it flags syntax errors.

Note

When you use Visual Studio Code for your TypeScript development, you must install the TypeScript compiler (tsc). To install it, simply open an adminstrative command prompt and enter the following command: npm install -g typescript. Note that Visual Studio Code’s TypeScript language service is separate from the TypeScript compiler.

Like ECMAScript 6, TypeScript also supports classes, modules, interfaces, namespaces, enumerations, generics, tuples, and lambda syntax.

Resources

TypeScript Tutorial in Visual Studio Code.

Key concepts

The act of typing is the association of a data type with a sequence of bits. TypeScript provides static typing through type annotations to enable type checking at compile time. The annotations for the primitive types are number, boolean and string.

The TypeScript compilor compiles TypeScript files (*.ts) into JavaScript files (*.js). TypeScript also supports definition files (*.d.ts), that contain type information of existing JavaScript libraries (similar to header files in C++).

• Weakly typed = dynamic typing.
• Strongly typed = static typing.

Example

function add(left: number, right: number): number {
    return left + right;
}

Declaration files

When you compile a TypeScript script, there is an option to generate a declaration file (with extension *.d.ts) that serves as an interface to the components in the compiled JavaScript. The compiler removes the function bodies and keeps just their signatures, which includes type details. You declaration files are then used by third-party developers when they integrate your code.

Example

declare var foo: number;

declare function greet(greeting: string): void;

declare namespace myLib {
    function makeGreeting(s: string): string;
    let numberOfGreetings: number;
}

declare function greet(setting: GreetingSettings): void;

declare class Greeter {
    constructor(greeting: string);
    greeting: string;
    showGreeting(): void;
}

tsconfig.json

Generally, the first thing you do when starting a new TypeScript development project is to create a project configuration file called tsconfig.json. It contains settings in JSON format, that specify such options as the target compiler, and where to output files.

Example

{
    "compilerOptions": {
      "target": "es6",
      "module": "commonjs",
      "sourceMap": true
    }
}

Notes

To run a TypeScript program, you first transpile it into JavaScript (tsc HelloWorld.ts), and then you execute the resulting JavaScript file with node (node HelloWorld.js).