TypeScript

image.png

優(yōu)點(diǎn)：功能更強(qiáng)大，生態(tài)也更健全、更完善
缺點(diǎn)：語(yǔ)言本身多了很多概念，屬于漸進(jìn)式，項(xiàng)目初期會(huì)增加一些成本

TS配置：

安裝命令：

yarn add typescript --dev
yarn tsc --init

手動(dòng)編譯命令：yarn tsc xx.ts（手動(dòng)轉(zhuǎn)化xx.ts文件為js）

tsconfig.json配置

//es2015是es6,平時(shí)說(shuō)的es6有時(shí)也指包含es2015及之后更新的內(nèi)容
"target": "es5", //輸出的代碼轉(zhuǎn)化格式
"lib": ['es2015', 'DOM'],
"outDir": "dist", //編譯文件輸出文件夾
"rootDir": "src", 
"sourceMap": true, //開啟源代碼映射，方便調(diào)試
"strict": true,  //開啟嚴(yán)格模式，嚴(yán)格模式需要明確指定類型
"strictNullChecks": false,  //開啟嚴(yán)格模式，嚴(yán)格模式需要明確指定類型是否檢查Null
//const a:boolean = null;如果想要不報(bào)錯(cuò)，需要設(shè)置"strictNullChecks": false
//const h:symbol = Symbol(); target設(shè)置為es5時(shí)會(huì)報(bào)錯(cuò)，任何es6中新增對(duì)象都會(huì)報(bào)錯(cuò)，因?yàn)樵O(shè)置es5，默認(rèn)標(biāo)準(zhǔn)庫(kù)引入的是es5的標(biāo)準(zhǔn)庫(kù)；
//解決方法：target:'es2015'；或者target:'es5',lib:['es2015', 'DOM']
//標(biāo)準(zhǔn)庫(kù)就是內(nèi)置對(duì)象所對(duì)應(yīng)的聲明，代碼中使用內(nèi)置對(duì)象就必須引入對(duì)應(yīng)的標(biāo)準(zhǔn)庫(kù)，否則ts找不到所對(duì)應(yīng)的類型=>報(bào)錯(cuò)

//TS中object類型不單指對(duì)象，還可以用數(shù)組，函數(shù)
//const foo:object = function(){}
//const fooA:object = []
//const fooB:object = {}

知識(shí)點(diǎn)：

1.ts文件編譯

//枚舉轉(zhuǎn)化會(huì)影響編輯后代碼

enum PostStatus {

Draft = 0,

Unpublished = 1,

Published = 2

}

// 枚舉類型

const post = {

title: 'Hello',

content: 'Typescript is a typed xx',

status: PostStatus.Draft // 0 1 2

}

編譯后：

var PostStatus;

(function (PostStatus) {

PostStatus[PostStatus["Draft"] = 0] = "Draft";

PostStatus[PostStatus["Unpublished"] = 1] = "Unpublished";

PostStatus[PostStatus["Published"] = 2] = "Published";

})(PostStatus || (PostStatus = {}));


// 枚舉類型
var post = {
title: 'Hello',
content: 'Typescript is a typed xx',
status: PostStatus.Draft // 0 1 2
};

// 若是代碼中不需要獲取枚舉Key值，則可以將枚舉定義成常量
const enum PostStatus {
Draft = 0,
Unpublished = 1,
Published = 2
}
// 枚舉類型
const post = {
title: 'Hello',
content: 'Typescript is a typed xx',
status: PostStatus.Draft // 0 1 2
}

//編譯后：

// 枚舉類型
var post = {
title: 'Hello',
content: 'Typescript is a typed xx',
status: 0 /* Draft */ // 0 1 2
};

2.TS隱式類型推斷

let age = 18
Age = '122'  // 會(huì)報(bào)錯(cuò)，因?yàn)樯厦嬉呀?jīng)推斷出age是number類型

3.TS類型斷言

const nums = [100, 12, 122]
const res = nums.find(i => i > 0)
const square = res * res
const num1 = res as number
const num2 = <number> res //注意jsx不能使用尖括號(hào)格式推斷，會(huì)與標(biāo)簽有沖突

4.TS中interface中使用分號(hào)或者不用符號(hào)，只是做代碼約束，實(shí)際編譯后是刪除掉的

interface中設(shè)置readonly時(shí)，變量初始化后不能修改

interface Post{
title: string
subtitle: string
readonly summary: string
}
// 設(shè)置接口動(dòng)態(tài)變量，格式如下
interface Test{
[prop: string]: string
}
const test:Test = {title: '2233', sub: '12'} 

5.對(duì)接口的實(shí)現(xiàn)

interface Run {
  run(distance: number): void
}
interface Eat {
  eat(food: string): void
}
class Person1 implements Eat, Run {
  eat(food: string):void{
  console.log(`優(yōu)雅進(jìn)餐${food}`)
}
run(distance: number){
  console.log(`直立行走:${distance}`)
}
}
class Animal implements Eat, Run{
  eat(food: string):void{
  console.log(`呼嚕呼嚕${food}`)
  }
  run(distance: number){
    console.log(`爬行:${distance}`)
  }
}

6.抽象類

abstract class Animal2 {
  eat(food: string):void{
  console.log(`呼嚕呼嚕${food}`)
}
abstract run(distance: number):void
}
class Dog extends Animal2{
  run(distance: number){
    console.log(`爬行:${distance}`)
  }
}
const d2 = new Dog()
d2.eat("test")
d2.run(111)

7.泛型：定義接口或類時(shí)未指定具體類型，使用時(shí)再傳遞類型，目的：復(fù)用