Advantages of TypeScript

1. Support ES6 specification
2. Powerful IDE support
3. Angular2 development language

IDE advantages

Type check

Typescript online complier

http://www.typescriptlang.org/play/index.html

Typescript local complier

Install node.js, npm

• npm install typescript
• tsc --version

New string features

Multiline string``   

ts

var content = `aaa
bbb
ccc`

 js

var content = "aaa\nbbb\nccc";

String template

ts

var myname = "zhai liang";

var getname = function () {
    return "zhai liang";
}

console.log(`<div>
<span>${myname}</span>
<span>${getname}</span>
</div>`);

 js

var myname = "zhai liang";
var getname = function () {
    return "zhai liang";
};
console.log("<div>\n<span>" + myname + "</span>\n<span>" + getname + "</span>\n</div>");

New features of parameters

Parameter type: use a colon after the parameter name to specify the parameter type

Declaration type

• String string
• any type
• Number number
• Boolean boolean type true/false
• The void method does not require any return value
• Methods declare types. Parameters in methods can also declare types

function test(name:string):string{
    return ""
}

Custom type

class Preson {
name: string;
age: number;
}
var zhangsan:Person = new Person();
zhangsan.name = "zhangsan";
zhangsan.age = 18;

Default parameter: use the equal sign after the parameter declaration to specify the default value of the parameter

var myname: string = "zhai liang";
function test(a: string, b: string, c: string='jojo') {
    console.log(a);
    console.log(b);
    console.log(c);
}
test('xxx', 'yyy', 'zzz');
test('xxx', 'yyy');

The default value of the declared parameter is placed at the last bit of the parameter

Optional parameter: use a question mark after the parameter declaration of the method to indicate that this parameter is optional

The required parameter cannot be declared. The declaration is after the required parameter

var myname: string = "zhai liang";
function test(a: string, b?: string, c: string='jojo') {
    console.log(a);
    console.log(b);
    console.log(c);
}
test('xxx');

Rest and Spread operator: used to declare any number of method parameters

... statement

Method 1

function func1(...args) {
    args.forEach(function (arg) {
        console.log(arg);
    })
}
func1(1, 2, 3);
func1(7, 8, 9, 10, 11);

Method 2

function func1(a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
}
var args = [1, 2];
func1(...args);
var args = [7, 8, 9, 10, 11];
func1(...args);

generator function: controls the execution process of the function, and manually pauses and resumes code execution

The declaration of Generator is similar to the general function declaration, except that there is an * sign, and the yield keyword can generally be seen in the function

ES6 notes (5) -- Generator function -- fisherman's Wharf -- blog Garden

destructuring destructor expression: disassemble an object or array into any number of variables through an expression

1

function getStock() {
    return {
        code: "IBM",
        price: 100
    }
}

var { code, price } = getStock();

console.log(code);
console.log(price);

 2

function getStock() {
    return {
        code: "IBM",
        price: {
            price1: 100,
            price2: 200
            }
    }
}

var { code: codex, price: { price2 } } = getStock();

console.log(codex);
console.log(price2);

 3

function getStock() {
    return {
        code: "IBM",
        price: {
            price1: 100,
            price2: 200
        },
        aaa: "xixi",
        bbb:"haha"
    }
}

var { code: codex, price: { price2 } } = getStock();

console.log(codex);
console.log(price2);

Use a destructor expression to get values from an array

var array1 = [1, 2, 3, 4];
var [number1, number2] = array1;

console.log(number1);
console.log(number2);

var array1 = [1, 2, 3, 4];
var [number1, , ,number2] = array1;

console.log(number1);
console.log(number2);

var array1 = [1, 2, 3, 4];

function doSomething([number1, number2, ...others]) {
    console.log(number1);
    console.log(number2);
    console.log(others);
}

doSomething(array1);

Expressions and loops

Arrow expression: used to declare anonymous functions and eliminate the problem of this pointer of traditional anonymous functions

forEach(),for in and for of

var myArray = [1, 2, 3, 4];
myArray.desc = "four number";

myArray.forEach(value => console.log(value));

forEach does not support break;

var myArray = [1, 2, 3, 4, 5];
myArray.desc = "four number";

for (var n in myArray) {
    console.log(myArray[n]);
}

var myArray = [1, 2, 3, 4, 5];
myArray.desc = "four number";

for (var n of myArray) {
    if (n > 2) break;
    console.log(myArray[n]);
}

for (var n of "four number") {
    console.log(n);
}

object-oriented

Class is the core of TypeScript. When developing with TypeScript, most of the code is written in the class.

Class definition, constructor, class inheritance

class Person{
    name;//attribute
    eat() {//method
        console.log("I'm eating");
    }
}
//new keyword
var p1 = new Person();
p1.name = "batman";
p1.eat();

var p2 = new Person();
p2.name = "superman";
p2.eat();

class Person{
    //pprivate (private) keyword protected keyword can be accessed in the class 
    private name;//attribute
    private eat() {//method
        console.log("I'm eating");
    }
}
//new keyword
var p1 = new Person();
p1.name = "batman";//name is private
p1.eat();//eat private

var p2 = new Person();
p2.name = "superman";
p2.eat();

Class instantiation

class Person{
    constructor() {
        console.log("haha");
    }
    name;
    eat() {
        console.log("I'm eating");
    }
}

var p1 = new Person();
p1.name = "batman";
p1.eat();

var p2 = new Person();
p2.name = "superman";
p2.eat();

class Person{
    constructor(public name:string) {
        this.name = name;
    }
    
    eat() {
        console.log(this.name);
    }
}

var p1 = new Person("batman");
p1.eat();

var p2 = new Person("superman");
p2.eat();

Generic: a parameterized type that is generally used to restrict the contents of a collection

class Person{
    constructor(public name:string) {
        console.log("haha");
    }
    
    eat() {
        console.log(this.name);
    }
}

class Employee extends Person{
    constructor(name: string, code: string) {
        super(name);
        console.log("xixi");
        this.code = code;
    }

    code: string;

    work() {
        super.eat();
        this.doWork();
    }

    private doWork() {
        console.log("I'm working");
    }
}
//Person is a generic type of Array
var workers: Array<Person> = [];
workers[0] = new Person("zhangsan");
//The error is reported because Person is a string type, not a number type
workers[1] = new Person("list", "2");
workers[2] = 2;

var el = new Employee("name", "1");
el.work();

Interface: used to establish a code convention, so that other developers must follow the code convention defined by the interface when calling a method or creating a new class

interface Animal{
    eat();
}
class Sheep implements Animal{
    eat() {
        console.log("I eat grass");
    }
}

class Tiger implements Animal{
    eat() {
        console.log("I eat grass");
    }
}

Modules: modules can help developers divide code into reusable units. Developers can decide which resources (classes, methods, variables) in the module are exposed for external use, and which resources are only used in the module.

Annotation: annotations add more intuitive and clear descriptions to the elements (classes, methods and variables) of the program. These descriptions are not related to the business logic of the program, but for the specified tools or frameworks.

Type definition file (*. d.ts)

The type definition file is used to help developers use existing JavaScript toolkits in Typescript, such as jQuery

jQuery definition file   DefinitelyTyped/types/waypoints at master · DefinitelyTyped/DefinitelyTyped · GitHub

Installation type definition file  

https://github.com/typings/typings