TypeScript 2

<slideshow style="nobleprog" headingmark="⌘" incmark="…" scaled="true" font="Trebuchet MS" >

title

TypeScript 2

author

Hao Wang

</slideshow>

Introduction ⌘

• ECMAScript2015/ES2015/ES6

node --v8-options | grep "in progress"

Basic Types ⌘

Basic Types - boolean ⌘

• let isDone: boolean = false;

Basic Types - number ⌘

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

Basic Types - string ⌘

let color: string = "blue";
color = 'red';

Basic Types - string - use template string ⌘

`let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ fullName }.

I'll be ${ age + 1 } years old next month.`;

Basic Types - Array ⌘

• let list: number[] = [1, 2, 3];
• let list: Array<number> = [1, 2, 3];

Basic Types - Enum ⌘

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ["hello", 10]; // OK
// Initialize it incorrectly
x = [10, "hello"]; // Error

Basic Types - any ⌘

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

Basic Types - Void ⌘

function warnUser(): void {
    alert("This is my warning message");
}

Basic Types - undefnined and null ⌘

/ Not much else we can assign to these variables!
let u: undefined = undefined;
let n: null = null;

• assign themselves as value if use for typing
• subtype of all other type so you can assign them to other tpyes
• use -- strictNullCheck
  • to only allow assigning to void type and themselves.
  • const text: string = null;
  • using union to make typing explicit. string | null | undefined

Basic Types - never ⌘

• make sure no return. Not even a void type.

// Function returning never must have unreachable end point
function error(message: string): never {
    throw new Error(message);
}

// Inferred return type is never
function fail() {
    return error("Something failed");
}

// Function returning never must have unreachable end pointnot 
function infiniteLoop(): never {
    while (true) {
    }
}

Type Assertion ⌘

• When you know the type better than TypeScript
• like type casting
• not type casting - there is not type checking or restructuring

//angel brackets  <--- not for JSX
let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;

//as
let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

Working with Interfaces and Classes ⌘

Interfaces ⌘

• Type-checking focuses on the shape that values have. This is sometimes called “duck typing” or “structural subtyping”. If it sounds like a duck, walks a duck, it is a duck
• In TypeScript, interfaces fill the role of naming these types, and are a powerful way of defining contracts within your code as well as contracts with code outside of your project.

Classes ⌘

• Starting with ECMAScript 2015, also known as ECMAScript 6, JavaScript programmers will be able to build their applications using this object-oriented class-based approach. In TypeScript, we allow developers to use these techniques now, and compile them down to JavaScript that works across all major browsers and platforms, without having to wait for the next version of JavaScript.

Parameter Properties ⌘

class Octopus {
    readonly name: string;
    readonly numberOfLegs: number = 8;
    constructor (theName: string) {
        this.name = theName;
    }
}

class Octopus {
    readonly numberOfLegs: number = 8;
    constructor(readonly name: string) {
    }
}

Organizing your code with Namespaces ⌘

A note ⌘

• Internal modules” are now “namespaces”. “External modules” are now simply “modules”, as to align with ECMAScript 2015’s terminology, (namely that module X { is equivalent to the now-preferred namespace X {).

Working with other JS libraries ⌘

• type definition is required (*.d.ts)
• https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/jquery
• npm install --save-dev @types/jquery@1

Reusing code through Modules ⌘

What is a Module ⌘

• Modules are executed within their own scope, not in the global scope;
• To consume a variable, function, class, interface, etc. exported from a different module, it has to be imported
• Modules are declarative; the relationships between modules are specified in terms of imports and exports at the file level.

• In TypeScript, just as in ECMAScript 2015, any file containing a top-level import or export is considered a module.
• A script is a file with no imports or exports.

Module loading ⌘

• Module Definitions and Module Loaders:
  • CommonJS - webpack
  • AMD - Require.js, browserify
  • ECMAScript 2015 native modules (ES6)
  • CommonJS/Webpack/ES6 - SystemJS

• SimpleModule.ts

import m = require("mod");
export let t = m.something + 1;

• AMD / RequireJS SimpleModule.js

define(["require", "exports", "./mod"], function (require, exports, mod_1) {
    exports.t = mod_1.something + 1;
});

• CommonJS / Node SimpleModule.js

var mod_1 = require("./mod");
exports.t = mod_1.something + 1;

Working with Other JavaScript Libraries ⌘

• In TypeScript, just as in ECMAScript 2015, any file containing a top-level import or export is considered a module.

Debugging TypeScript ⌘

node --inspect dist/

chrome://inspect

Closing remarks ⌘

• See here what else you may want to customize