1，TypeScript是什么?

• 主要為解決js的類型缺失
• 可以在開發(fā)階段進(jìn)行校驗(yàn)，給予報(bào)錯(cuò)提示

特點(diǎn)：

• 以js為基礎(chǔ)構(gòu)建的語言
• 一個(gè)js的超集
• Ts擴(kuò)展了js并添加了類型
• Ts可以在任何支持js的平臺(tái)中執(zhí)行
• Ts不能被js解析器直接執(zhí)行，得通過編譯，一般通過Babel/TSC編譯成js
• 也支持es的新特性
  

2，類型的缺失帶來的影響

• 當(dāng)開發(fā)大型項(xiàng)目的時(shí)候，項(xiàng)目的龐大，沒有類型約束，會(huì)帶來安全隱患
• 多人開發(fā)的時(shí)候，沒有類型約束，就需要對(duì)別人傳入的參數(shù)進(jìn)行各種驗(yàn)證

3，Ts搭建環(huán)境-本博主有專門的文章專說明這個(gè)

• npm i -v typescript -g
• tsc

4，使用tsc對(duì)ts文件進(jìn)行編譯

• 進(jìn)入命令行
• 進(jìn)入ts文件所在目錄
• 執(zhí)行命令 tsc xxx.ts
  

5，TS運(yùn)行初體驗(yàn)

//string,TypeScript給我們定義的標(biāo)識(shí)符，提供的字符串類型
//String，JavaScript中的字符串的包裝類
let myname: string="乞力馬扎羅"
// myname=112,這樣就不可以，因?yàn)樯厦嬉呀?jīng)明確告訴你指定類型了
console.log(myname)

• 每次想要運(yùn)行上面ts文件，都通過兩個(gè)步驟
• 第一步：通過tsc編譯到TypeScript代碼
• 第二步：在游覽器或者Node環(huán)境下運(yùn)行JavaScript代碼
• 有點(diǎn)繁瑣~

簡化Ts運(yùn)行步驟

解決方案1

• 通過webpack配置本地的TypeScript編譯環(huán)境和開啟一個(gè)本地服務(wù)，可以直接運(yùn)行在游覽器上
• 通過webpack的loader將vue的各種編譯轉(zhuǎn)化成js，css
  

解決方案2（常見）

• 通過ts-node庫，為TypeScriot的運(yùn)行提供執(zhí)行環(huán)境
• 安裝ts-node

npm install ts-node -g

• 需要依賴兩個(gè)包tslib和 @types/node

 npm install tslib @types/node -g

• 使用ts-node ts文件名，運(yùn)行ts文件即可

開始學(xué)習(xí)

1，變量的聲明

• 下面的數(shù)據(jù)類型也叫類型注解，可省略
  
• 類似這個(gè)

let myname: string="乞力馬扎羅"
// myname=112,這樣就不可以，因?yàn)樯厦嬉呀?jīng)明確告訴你指定類型了
console.log(myname)

變量的聲明關(guān)鍵字

• 不建議使用var，因?yàn)闆]有塊級(jí)作用域，會(huì)引起問題

變量的類型推導(dǎo)（推斷）

• 在實(shí)際項(xiàng)目中，不會(huì)給每個(gè)變量進(jìn)行類型注解，我們更希望通過ts本身的特性幫助我們推導(dǎo)出對(duì)應(yīng)的變量類型
• ts在聲明標(biāo)識(shí)符的時(shí)候，如果直接進(jìn)行賦值，會(huì)根據(jù)賦值的類型推導(dǎo)出標(biāo)識(shí)符的類型注解
• let進(jìn)行類型推導(dǎo)出來的是通用類型
• const進(jìn)行類型推導(dǎo)出來的是字面量類型

let myname1 ="乞力馬扎羅"
//myname1=112//,這樣也不可以，因?yàn)樯厦嬉呀?jīng)推導(dǎo)出string類型了
console.log(myname)

2，變量的類型

• 字面量類型
  

• number類型

• Ts和Js一樣，不區(qū)分整數(shù)類型（int）和浮點(diǎn)型（double），統(tǒng)一為number類型

• boolean類型

• boolean類型只有兩個(gè)取值，true和false

• 字符串類型

• sting類型，單引號(hào)和雙引號(hào)都支持，模板字符串也支持

• 數(shù)組類型

// 注意，在開發(fā)中，數(shù)組中存放的都是相同的類型
// 1,sting[],數(shù)組類型，并且數(shù)組中存放的字符串類型，常用寫法
// 2,Array<number>,數(shù)組類型，這種的只能存放數(shù)值，這種的其實(shí)是泛型的寫法
let num = ['1', '2', '3']
let num1: string[] = ['1', '2', '3']
let num2: Array<number> = []
let num3: Array<string> = []

• Object類型

// 寫法一，類型推導(dǎo)寫法
let obj = {name: "乞力馬扎羅",age: 18
}
// 寫法2
type objtype = {name: stringage: number
}
let obj1: objtype = {name: "乞力馬扎羅",age: 18
}
// 寫法3
let obj3: {name: stringage: number
} = {name: "乞力馬扎羅",age: 18
}
console.log(obj3.age)
// 寫法4，不建議，它是空對(duì)象，不能調(diào)用obg2.name等
// object對(duì)象類型可以用于描述一個(gè)對(duì)象，不能獲取和設(shè)置數(shù)據(jù)
let obj4: object = {name: "乞力馬扎羅",age: 18
}
// console.log(obj4.age)//報(bào)錯(cuò)

• 在對(duì)象中，不可以添加相同的屬性名稱，類似這個(gè)

// 寫法一
let obj = {name: "乞力馬扎羅",name:"嘿嘿",age: 18
}
//通過采取symbol定義相同的名稱，因?yàn)镾ymbol函數(shù)返回不同的值
const s1: symbol = Symbol("title")
const s2: symbol = Symbol("title")
let obj3 = {s1: Symbol("乞力馬扎羅"),s2: Symbol("乞力馬扎羅"),age: 18
}

• null類型和undefined類型

let n: null = null
let u: undefined = undefined

3，函數(shù)的類型 - 參數(shù)

• 當(dāng)函數(shù)的參數(shù)沒有給明確的類型的時(shí)候，默認(rèn)any類型
• 在定義一個(gè)TypeScript中的函數(shù)的的時(shí)候，都要明確指定參數(shù)的類型

function sum(num1:number, num2:number) {return num1 + num2
}
sum(1,2)

4，函數(shù)的類型 - 返回值

• 函數(shù)的返回值可以自己根據(jù)返回的內(nèi)容進(jìn)行推導(dǎo)
• 也可以指定返回值類型

//方式1
function sum(num1: number, num2: number) {return num1 + num2
}
let sum2: string = sum(1, 2)//報(bào)錯(cuò)
console.log(sum2)
//方式2
function sum(num1: number, num2: number):number {return num1 + num2
}
let sum2 = sum(1, 2)
console.log(sum2)

• 返回的類型不對(duì)，提示報(bào)錯(cuò)

5，匿名函數(shù)的參數(shù)

const arrs =['1','2','3']
//匿名函數(shù)，作為參數(shù)傳遞給另一個(gè)函數(shù)，是否要類型注解?最好不要加！
//forEach接收的是函數(shù)，里面的值已經(jīng)有明確的類型，它是根據(jù)上下文推導(dǎo)出來的
//類似此時(shí)，item并沒有指定類型，但是item是string類型
//這個(gè)根據(jù)上下文進(jìn)行推導(dǎo)參數(shù)何返回值的類型的過程叫做上下文類型
arrs.forEach(function(item,index,arr){console.log(item,index,arr)
})

6，對(duì)象類型的使用

• 對(duì)象類型和函數(shù)類型的結(jié)合使用
• 在對(duì)象我們可以添加屬性，并且告知ts該屬性需要什么類型
• 屬性之間可以使用，或者；來分割，最后一個(gè)分隔符是可選的
• 每個(gè)屬性的類型部分，也是可選的，如果不指定，那么就是any類型

type Pointtype={x:numbery:number//如果不指定，下面就是any類型z?:number//可選，下面不傳也不會(huì)報(bào)錯(cuò)
}
function handler(point:Pointtype){console.log(point.x)
}
handler({x:1,y:2})

6，any類型

• 給一個(gè)any類型的變量賦值任何的值，比如數(shù)字，字符串的值
• 一般對(duì)于拿到的數(shù)據(jù)過于繁瑣的時(shí)候，采用這個(gè)any

let id = "1"
id = "2"
// id = 2//報(bào)錯(cuò)
// 故：
// any類型就表示不同標(biāo)識(shí)符的任意類型，并且可以在該標(biāo)識(shí)符上面進(jìn)行人員的操作
let id1: any = "1"
id1 = "2"
id1 = 2//不報(bào)錯(cuò)

• 定義any類型的數(shù)組

let idarrs: any[] = ['1',1,[2]]

7，unKnown類型

• 比較特殊的一種類型，用于描述不確定的變量
• 和any差不多，但unKnown類型的值上做任何事情都是不合法的
• 想要不報(bào)錯(cuò)，必須先進(jìn)行類型縮小

let idarrs: unknown="999"
idarrs=2
// console.log(idarrs.length)//報(bào)錯(cuò)
// 解決報(bào)錯(cuò)，必須先校驗(yàn)，也叫類型縮小
if(typeof idarrs=='string'){console.log(idarrs.length)//不報(bào)錯(cuò)
}

7，void類型

• void通常指定一個(gè)函數(shù)是沒有返回值的，那么他的返回值就是void類型
• 定義了void后，不強(qiáng)制不可以有返回值return
• 當(dāng)基于上下文推導(dǎo)出來的類型為void的時(shí)候，并不會(huì)強(qiáng)制函數(shù)一定不能返回函數(shù)
• 也可以將undefined賦值給void類型函數(shù)也可以返回undefined
  

//方式1
type Pointtype = {x: numbery: number
}
function handler(point: Pointtype): void {console.log(point.x)
}
handler({ x: 1, y: 2 })
//方式2，自己推導(dǎo)寫法
const foo = () => { }
//方式2,用來指定函數(shù)的類型
const foo1: () => void = () => { }
//方式3,清晰寫法
type footype = () => void
const foo2: footype= () => { }
//方式4,函數(shù)調(diào)用,指定函數(shù)的類型為void，傳的時(shí)候必傳函數(shù)
function funs(fn:()=>void){setTimeout(()=>{handler({ x: 1, y: 2 })},100)
}
// funs(123)//不可以傳，會(huì)報(bào)錯(cuò)，因?yàn)槿思医邮蘸瘮?shù)類型，你傳數(shù)值
funs(()=>{})//不可以傳，會(huì)報(bào)錯(cuò)，因?yàn)槿思医邮蘸瘮?shù)類型，你傳數(shù)值

8，never類型

• 開發(fā)中很少實(shí)際去定義never類型
• 某些情況自己出進(jìn)行推導(dǎo)
• 開發(fā)框架中或者封裝一些類型工具的時(shí)候使用

• 函數(shù)中拋出異?；蛘咚姥h(huán)會(huì)拋出異常

9，tuple類型(元組類型)

• 數(shù)組中通常建議存放相同類型的元素，不同類型的元素不推薦放數(shù)組中，此時(shí)就可以放在對(duì)象或者元組中
• 其次，元組中每個(gè)元素都有自己的特性的類型，可以根據(jù)索引值獲取到的值可以確定對(duì)應(yīng)的類型

// 存放多種類型值的方法
// 1,any類型
// 2,使用對(duì)象
const info2 = {name: "1",age: 2,height: 19.8
}
//使用元組類型
const info: [string, number, number] = ['1', 2, 2.88]