New TypeScript features
New string features
Multiline string
- JavaScript defines multi-line strings
var word = 'aaa' +
'bbb' +
'ccc'
Copy the code
- 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