New TypeScript features

New string features

Multiline string

  1. JavaScript defines multi-line strings
var word = 'aaa' +
    'bbb' + 
    'ccc'
Copy the code
  1. TypeScript defines multi-line strings
var word = `
aaa
bbb
ccc
`
Copy the code

String template

var myName = "Zhang San";

var getName = function() {
    return "zhangsan"
}

console.log(`hello ${myName}`);
console.log(`hello ${getName()}`);
Copy the code

Auto-split string

function test(template, name, age) {
    console.log(template);
    console.log(name);
    console.log(age);
}

var myName = "Zhang san";

var getAge = function() {
    return 18;
}

test `my name is ${myName}, I'm ${getAge()}`;
Copy the code

Parameter new features

The parameter types

Use a colon after the parameter name to specify the type of the parameter

Declare the type

  • any
  • string
  • number
  • booleam
  • Void (function that does not return a value)
var myName: string = "zhang san";
var alias: any = 'xixi'; // The variable can be set to any type

myName = 12; / / IDE an error

// The method declares the type
function test() :void {}// Parameter declaration type
function test(name: string) :string {
    return name;
} 

// Custom type
class Person {
    name: string;
    age: number
}

var lisi: Person = new Person();

lisi.age = 12;
lisi.name = 'lisi';
Copy the code

The default parameters

Use an equal sign after the parameter declaration to specify the default value of the parameter

function test(a:string, b:string, c:string = 'xixi') {
    console.log(a);
    console.log(b);
    console.log(c);
}

test('x'.'y');
Copy the code

Optional parameters

Use a question mark after the method parameter declaration to indicate that the parameter is optional

function test(a:string, b? :string, c:string = 'xixi') {
    console.log(a);
    console.log(b);
    console.log(c);
}

test('x'); // "x" undefined "xixi"
Copy the code

New features of functions

Rest and Spread operator

Used to declare any number of method parameters

function fun1 (. args) {
    args.forEach(function (arg) {
        console.log(arg); })}Copy the code

The generator function

Control the execution of the function guo Chenzhi, manually pause and resume code execution

function* doSomething() {
	console.log('start');
  
  	yield;
    
    console.log('end');
}

var fun1 = doSomething();

fun1.next();
fun1.next();
Copy the code

Destructuring destructs the expression

An expression to break an object or array into any number of variables

object

function getStock() {
    return {
        code: "IBM".price: 100.name: {
            name1: 'zhanagsan'.name2: 'lisi'}}}// js
var stock = getStock();
var code = stock.code;
var price = stock.price;

// ts
var {code, price} = getStock();
var {code: codex, price, name: {name2}} = getStock();
Copy the code

An array of

var array1 = [1.2.3.4];
var [,,number1, number2] = array1;

console.log(number1, number2);
Copy the code
var array1 = [1.2.3.4];
var [number1, number2, ...others] = array1;

console.log(others); / / [3, 4]
Copy the code
var array1 = [1.2.3.4];
var [number1, number2, ...others] = array1;

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

Expressions and loops

Arrow expression

Used to declare anonymous functions, eliminating the this pointer problem of traditional anonymous functions

function getStock(name: string) {
    this.name = name;
    
    setInterval(function() {
        console.log(this.name);
    }, 1000);
    
    setInterval(() = > {
        console.log(this.name);    
    }, 1000)}var stock = new getStock("IBM");
Copy the code
var myArray = [0.1.2.3.4.5];

console.log(myArray.filter(value= > value % 2= =0));
Copy the code

The for – of cycles

var myArray = [1.2.3.4.5];
myArray.desc = "four";

myArray.forEach(value= > console.log(value)); // Loop breaking is not allowed
for(let n in myArray) { // Attributes will loop out
    console.log(n);
}

for(let n of myArray) { // Loop can be broken without loop properties
    console.log(n);
}
Copy the code

Object-oriented features

Class (Class)

class Person {
    public name;
    public eat() {
        console.log('eat'); }}var p1 = new Person();

p1.name = 'man';
p1.eat();

var p2 = new Person();
p2.name = 'woman';
p2.eat();
Copy the code

Access control character

  • Public: (Default control)
  • Protected: (protected, accessible internally and in subclasses, not externally)
  • -Serena: I’m not private.

The constructor

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

    eat() {
        console.log(this.name); }}var person1 = new Person('zhangsan1');

person1.eat(); 
Copy the code

Class inheritance

Extends gets all properties and methods

class Employee extends Person {
    code: string;
    
    work() {
        console.log('work'); }}var e1 = new Employee('lisi');
e1.eat();
e1.work();
Copy the code

Super calls the constructor of the parent class

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

    eat() {
        console.log('eating' + this.name); }}class Employee extends Person {
    constructor(name: string, code: string) {
        super(name);
        console.log('Subclass constructor')
        this.code = code;
    }
    
    code: string;
    
    work() {
        super.eat();
        this.doWork();
    }
    
    private doWork() {
        console.log('working'); }}var e1 = new Employee('lisi'.'123');

e1.work();
Copy the code

Generic generic

A parameterized type used to restrict the contents of a collection

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

    eat() {
        console.log('eating' + this.name); }}class Employee extends Person {
    constructor(name: string, code: string) {
        super(name);
        console.log('Subclass constructor')
        this.code = code;
    }
    
    code: string;
    
    work() {
        super.eat();
        this.doWork();
    }
    
    private doWork() {
        console.log('working'); }}var works: Array<Person> = []; // Only Person objects can be placed in an array

works[0] = new Person('zhangsan');
works[1] = new Employee('lisi'.'123');

console.log(works);
Copy the code

Interface Interface

To establish a code convention that other developers must follow when calling a method or creating a new class.

interface IPerson {
    name: string;
    age: number;
}

class Person {
    constructor(public config: IPerson){}}var p1 = new Person({
    name: 'zhanggsan'.age: 19
});
Copy the code
interface Animal {
    eat();
}

class Sheep implements Animal {
    eat() {
        console.log('i eat grass'); }}class Tiger implements Animal {
    eat() {
        console.log('i eat meat'); }}Copy the code

Module, the Module

Modules help developers divide code into reusable units. It is up to the developer to decide which resources (classes, methods, variables) in the module are exposed for external use and which resources are available only within the module.

export var a1 = 1;
var a2 = 2;

export function func1() {
    console.log('func1');
}

function func2() {
    console.log('func2');
}

export class testClass1 {}class  testClass2 {}import {a1, func1, testClass1} from "./a";
Copy the code

Note the annotation

Make the elements (classes, methods, variables) of the program more intuitive and explicit. These instructions are not related to the business logic of the program, but provide specific tools or frameworks for use.

import { Component } from '@angular/core'

@Component({
    selector: 'app-root'.templateUrl: './app.component.html'.styleUrls: ['./app.components.css']})export class AppComponent {
    title = 'app works';
}
Copy the code

Type definition file (*.d.ts)

Type definition files are toolkits that help developers use existing JavaScript in TypeScript. Such as JQuery

Download: github.com/DefinitelyT… Tools: github.com/typings/typ…

export var a1 = 1;
var a2 = 2;

export function func1() {$('#xxxx').show(); // Import the JQuery type definition file index.d.ts
    console.log('func1');
}

function func2() {
    console.log('func2');
}

export class testClass1 {}class  testClass2 {}Copy the code