TypeScript 新特性介绍
2020-12-11 本文已影响0人
不是前端
TypeScript 新特性介绍
字符串新特性
多行字符串
- JavaScript 定义多行字符串
var word = 'aaa' +
'bbb' +
'ccc'
- TypeScript 定义多行字符串
var word = `
aaa
bbb
ccc
`
字符串模板
var myName = "Zhang San";
var getName = function() {
return "zhangsan"
}
console.log(`hello ${myName}`);
console.log(`hello ${getName()}`);
自动拆分字符串
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()}`;
参数新特性
参数类型
在参数名称后面使用冒号来制定参数的类型
声明类型
- any
- string
- number
- booleam
- void (不需要返回值的函数)
var myName: string = "zhang san";
var alias: any = 'xixi'; // 可以设置变量为任何类型
myName = 12; // IDE报错
// 方法声明类型
function test(): void {
}
// 参数声明类型
function test(name: string): string {
return name;
}
// 自定义类型
class Person {
name: string;
age: number
}
var lisi: Person = new Person();
lisi.age = 12;
lisi.name = 'lisi';
默认参数
在参数声明后面用等号来指定参数的默认值
function test(a:string, b:string, c:string = 'xixi') {
console.log(a);
console.log(b);
console.log(c);
}
test('x', 'y');
可选参数
在方法的参数声明后面用问号来标明此参数为可选参数
function test(a:string, b?:string, c:string = 'xixi') {
console.log(a);
console.log(b);
console.log(c);
}
test('x'); // "x" undefined "xixi"
函数新特性
Rest and Spread 操作符
用来声明任意数量的方法参数
function fun1 (...args) {
args.forEach(function (arg) {
console.log(arg);
})
}
generator 函数
控制函数的执行郭晨个，手动暂停和恢复代码执行
function* doSomething() {
console.log('start');
yield;
console.log('end');
}
var fun1 = doSomething();
fun1.next();
fun1.next();
destructuring 析构表达式
通过表达式将对象或数组拆解成任意数量的变量
对象
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();
数组
var array1 = [1, 2, 3, 4];
var [,,number1, number2] = array1;
console.log(number1, number2);
var array1 = [1, 2, 3, 4];
var [number1, number2, ...others] = array1;
console.log(others); // [3, 4]
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);
表达式与循环
箭头表达式
用来声明匿名函数，消除传统匿名函数的this 指针问题
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");
var myArray = [0, 1, 2, 3, 4, 5];
console.log(myArray.filter(value => value % 2 == 0));
循环 for-of
var myArray = [1, 2, 3, 4, 5];
myArray.desc = "four";
myArray.forEach(value => console.log(value)); // 不允许打破循环
for(let n in myArray) { // 属性会循环出来
console.log(n);
}
for(let n of myArray) { // 循环可以被打断，不循环属性
console.log(n);
}
面向对象特性
类（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();
访问控制符
- public: (默认控制符)
- protected: (受保护的，内部和子类中访问到，外部不可访问)
- private: (私有的)
构造函数
class Person {
constructor(public name: string) {
this.name = name;
console.log('hahaha');
}
eat() {
console.log(this.name);
}
}
var person1 = new Person('zhangsan1');
person1.eat();
类的继承
extends 获得所有属性和方法
class Employee extends Person {
code: string;
work() {
console.log('work');
}
}
var e1 = new Employee('lisi');
e1.eat();
e1.work();
super 调用父类的构造函数
class Person {
constructor(public name: string) {
this.name = name;
console.log('父类的构造函数');
}
eat() {
console.log('eating' + this.name);
}
}
class Employee extends Person {
constructor(name: string, code: string) {
super(name);
console.log('子类的构造函数')
this.code = code;
}
code: string;
work() {
super.eat();
this.doWork();
}
private doWork() {
console.log('working');
}
}
var e1 = new Employee('lisi', '123');
e1.work();
泛型 generic
参数化的类型，一般用来限制集合的内容
class Person {
constructor(public name: string) {
this.name = name;
console.log('父类的构造函数');
}
eat() {
console.log('eating' + this.name);
}
}
class Employee extends Person {
constructor(name: string, code: string) {
super(name);
console.log('子类的构造函数')
this.code = code;
}
code: string;
work() {
super.eat();
this.doWork();
}
private doWork() {
console.log('working');
}
}
var works: Array<Person> = []; // 数组里面只能放入 Person 对象
works[0] = new Person('zhangsan');
works[1] = new Employee('lisi', '123');
console.log(works);
接口 Interface
用来建立某种代码约定，使得其他开发者调用某个方法或者创建新的类时必须遵循接口所定义的代码约定。
interface IPerson {
name: string;
age: number;
}
class Person {
constructor(public config: IPerson) {
}
}
var p1 = new Person({
name: 'zhanggsan',
age: 19
});
interface Animal {
eat();
}
class Sheep implements Animal {
eat() {
console.log('i eat grass');
}
}
class Tiger implements Animal {
eat() {
console.log('i eat meat');
}
}
模块 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";
注解 annotation
为程序的元素（类、方法、变量）加上更直观更明了的说明，这些说明信息与程序的业务逻辑无关，而是提供指定的工具或框架使用。
import { Component } from '@angular/core'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.components.css']
})
export class AppComponent {
title = 'app works';
}
类型定义文件 （*.d.ts）
类型定义文件用来帮助开发者在TypeScript 中使用已有的 JavaScript 的工具包。
如 JQuery 等
下载地址：https://github.com/DefinitelyTyped/DefinitelyTyped
工具：https://github.com/typings/typings
export var a1 = 1;
var a2 = 2;
export function func1() {
$('#xxxx').show(); // 引入JQuery 类型定义文件 index.d.ts
console.log('func1');
}
function func2() {
console.log('func2');
}
export class testClass1 {
}
class testClass2 {
}
