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()}`);
自動(dòng)拆分字符串
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()}`;
參數(shù)新特性
參數(shù)類型
在參數(shù)名稱后面使用冒號(hào)來制定參數(shù)的類型
聲明類型
- any
- string
- number
- booleam
- void (不需要返回值的函數(shù))
var myName: string = "zhang san";
var alias: any = 'xixi'; // 可以設(shè)置變量為任何類型
myName = 12; // IDE報(bào)錯(cuò)
// 方法聲明類型
function test(): void {
}
// 參數(shù)聲明類型
function test(name: string): string {
return name;
}
// 自定義類型
class Person {
name: string;
age: number
}
var lisi: Person = new Person();
lisi.age = 12;
lisi.name = 'lisi';
默認(rèn)參數(shù)
在參數(shù)聲明后面用等號(hào)來指定參數(shù)的默認(rèn)值
function test(a:string, b:string, c:string = 'xixi') {
console.log(a);
console.log(b);
console.log(c);
}
test('x', 'y');
可選參數(shù)
在方法的參數(shù)聲明后面用問號(hào)來標(biāo)明此參數(shù)為可選參數(shù)
function test(a:string, b?:string, c:string = 'xixi') {
console.log(a);
console.log(b);
console.log(c);
}
test('x'); // "x" undefined "xixi"
函數(shù)新特性
Rest and Spread 操作符
用來聲明任意數(shù)量的方法參數(shù)
function fun1 (...args) {
args.forEach(function (arg) {
console.log(arg);
})
}
generator 函數(shù)
控制函數(shù)的執(zhí)行郭晨個(gè)才菠，手動(dòng)暫停和恢復(fù)代碼執(zhí)行
function* doSomething() {
console.log('start');
yield;
console.log('end');
}
var fun1 = doSomething();
fun1.next();
fun1.next();
destructuring 析構(gòu)表達(dá)式
通過表達(dá)式將對(duì)象或數(shù)組拆解成任意數(shù)量的變量
對(duì)象
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();
數(shù)組
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);
表達(dá)式與循環(huán)
箭頭表達(dá)式
用來聲明匿名函數(shù)甫题，消除傳統(tǒng)匿名函數(shù)的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));
循環(huán) for-of
var myArray = [1, 2, 3, 4, 5];
myArray.desc = "four";
myArray.forEach(value => console.log(value)); // 不允許打破循環(huán)
for(let n in myArray) { // 屬性會(huì)循環(huán)出來
console.log(n);
}
for(let n of myArray) { // 循環(huán)可以被打斷，不循環(huán)屬性
console.log(n);
}
面向?qū)ο筇匦?/h2>
類（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();
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: (默認(rèn)控制符)
- protected: (受保護(hù)的，內(nèi)部和子類中訪問到，外部不可訪問)
- private: (私有的)
構(gòu)造函數(shù)
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 調(diào)用父類的構(gòu)造函數(shù)
class Person {
constructor(public name: string) {
this.name = name;
console.log('父類的構(gòu)造函數(shù)');
}
eat() {
console.log('eating' + this.name);
}
}
class Employee extends Person {
constructor(name: string, code: string) {
super(name);
console.log('子類的構(gòu)造函數(shù)')
this.code = code;
}
code: string;
work() {
super.eat();
this.doWork();
}
private doWork() {
console.log('working');
}
}
var e1 = new Employee('lisi', '123');
e1.work();
泛型 generic
參數(shù)化的類型皆看，一般用來限制集合的內(nèi)容
class Person {
constructor(public name: string) {
this.name = name;
console.log('父類的構(gòu)造函數(shù)');
}
eat() {
console.log('eating' + this.name);
}
}
class Employee extends Person {
constructor(name: string, code: string) {
super(name);
console.log('子類的構(gòu)造函數(shù)')
this.code = code;
}
code: string;
work() {
super.eat();
this.doWork();
}
private doWork() {
console.log('working');
}
}
var works: Array<Person> = []; // 數(shù)組里面只能放入 Person 對(duì)象
works[0] = new Person('zhangsan');
works[1] = new Employee('lisi', '123');
console.log(works);
接口 Interface
用來建立某種代碼約定仓坞，使得其他開發(fā)者調(diào)用某個(gè)方法或者創(chuàng)建新的類時(shí)必須遵循接口所定義的代碼約定。
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
模塊可以幫助開發(fā)者將代碼分割為可重用的單元悬蔽。開發(fā)者可以自己決定將模塊中的哪些資源（類扯躺、方法、變量）暴露出去提供外部使用蝎困，哪些資源只能在模塊內(nèi)使用录语。
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
為程序的元素（類、方法禾乘、變量）加上更直觀更明了的說明澎埠，這些說明信息與程序的業(yè)務(wù)邏輯無關(guān)，而是提供指定的工具或框架使用始藕。
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）
類型定義文件用來幫助開發(fā)者在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 {
}
