前言：
因為在寫前端的時候，發現很多UI組件的語法都已經開始使用TS語法，不學習TS根本看不到懂，所以簡單的學一下TS語法。為了看UI組件的簡單代碼，不至于一臉懵。
一、安裝node
對于windows來講，node版本高點還好，對于linux（centos7）來講，盡量使用node16或者node18版本，太高linux的動態庫不支持，需要升級動態庫
E:\vuecode\練習>node -v
v18.12.1
二、安裝typescript
E:\vuecode\練習>npm -g install typescript
added 1 package in 672ms#查看版本
E:\vuecode\練習>tsc -v
Version 5.3.3
三、基本語法
1.數據類型
1.1 聲明變量
ts最大的特點就是聲明了數據類型。樣例代碼如下：
聲明數字類型和字符串類型
let n1: number
n1 = 10let s1: string
s1 = "hello world"console.log(n1,s1)
將ts文件編譯成js文件，并運行js文件
E:\vuecode\練習>tsc test1.ts
E:\vuecode\練習>node test1.js
10 hello world
1.2 自動識別類型
這里沒有聲明變量的類型，在將字符串賦值給n1的時候，ts的編譯器檢測出了語法問題
let n1 = 10
console.log(n1)n1 = "hello world"
console.log(n1)
E:\vuecode\練習>tsc test1.ts
test1.ts:4:1 - error TS2322: Type 'string' is not assignable to type 'number'.4 n1 = "hello world"~~
2.特殊數據類型
2.1 any 任意類型
let a: any = 1
console.log(a)a = "hello world"
console.log(a)a = true
console.log(a)a = [1,2,3,4]
console.log(a)執行結果如下
E:\vuecode\練習>node test1.js
1
hello world
true
[ 1, 2, 3, 4 ]
開發中不建議使用any類型
2.2 聯合類型
限定了a的取值范圍
let a: 1 | 2
a = 1
console.log(a)a = 2
console.log(a)#這里會報錯，不能將3賦值給a
let a: 1 | 2
不能將類型“3”分配給類型“1 | 2”。ts(2322)
a = 3
console.log(a)
限定a的賦值類型范圍
let a: number | string
a = 1
a = "hello"#這樣超出了a的取值類型范圍
a = true
2.3 unknown
let a: unknown
a = "hello"
console.log(a)a = 1
console.log(a)a = true
console.log(a)
unknow的二次賦值
let a: unknown
a = "hello"此時將unknown類型的a 賦值給b就不可以了。因為類型不匹配
let b: string
b = a解決辦法有兩種
1.類型斷言
b = a as string2.聲明變量的類型
b = <string>a
2.4 void
void表示空，一般用于函數沒有返回值
function test(): void {console.log(111)
}
2.5 never
什么值都沒有，空也不會返回
3.對應js的類型的ts類型
3.1 object
object表示js中的對象，在開發中object使用的比較少。因為限制變量是不是對象的情況比較少，主要是限制對象中的屬性的類型以及屬性的數量。
3.1.1 基本定義：
不限制對象中屬性的數量以及屬性值的類型
寫法1：
let o1: {} #或者 let o1: object
o1 = {name: "zhangsan",age: 20}
console.log(o1)
寫法2：
表示對象中可以有任意string類型的key，值的類型為任意
let b: {[anyname: string]: any}
b = {name: "zhangsan",age: 20, gender:"男"}
console.log(b)
3.1.2 限定對象的屬性數量
正確賦值
let a: {name: string}
a = {name: "zhangsan"}
console.log(a)
錯誤賦值，因為對象限制了屬性只有name
let a: {name: string}
a = {name: "zhangsan",age: 20}3.1.3 設定可選屬性
有這種場景，設定了對象中有多個屬性，一個必須的，其他的可以不傳遞。也可以傳遞。
其中屬性名后邊的 “?” 就是設定屬性為可選屬性
let o1: {name: string,age?:number,gender?:string}
o1 = {name: "zhangsan"}
console.log(o1)o1 = {name: "lisi",age: 20}
console.log(o1)o1 = {name: "wangwu",gender:"boy"}
console.log(o1)o1 = {name:"張無忌",age: 100, gender:"boy"}
console.log(o1)執行結果如下：
E:\vuecode\練習>tsc test1.ts
E:\vuecode\練習>node test1.js
{ name: 'zhangsan' }
{ name: 'lisi', age: 20 }
{ name: 'wangwu', gender: 'boy' }
{ name: '張無忌', age: 100, gender: 'boy' }
3.1.4 設定固定屬性，其余屬性不定長
let o1: {name: string,[anyname: string]: any}
o1 = {name: "zhangsan",age: 20 ,gender: "girl",class: 3}
console.log(o1)E:\vuecode\練習>tsc test1.ts E:\vuecode\練習>node test1.js
{ name: 'zhangsan', age: 20, gender: 'girl', class: 3
3.2 數組
定義方式一：
let a1: number[]
a1 = [1,2,3,4,5]
console.log(a1)定義方式二
let a2: Array<number>
a2 = [1,2,3,4,5]
console.log(a2)
3.2 元組
元組和數組的區別是元組的的長度是固定的
let t1: [string,number]
t1 = ["zhangsan",10]
4.type關鍵字
type的作用主要是給數據類型起一個別名
例如：
type num = number
let n1: num = 10console.log(n1)
5.反引號
反引號是ES6中的 模板字符串。
這是比較常用的一種，在字符串中插入變量
let name1 = "zhangsan"
let age = 20console.log(`我的名字叫${name1},我${age}歲了`)
四、泛型
1.定義使用泛型
在定義函數或者是類時，對于類型不明確的時候就就可以使用泛型。例如：
function test<T>(content: T): T{return content
}
解釋：
定義函數test的時候，不能確定content參數的類型是什么類型，這時候使用泛型
第一個T 是定義了一個泛型T
第二個T 是定義content參數是一個泛型類型的參數
第三個T 是定義 返回值的類型是T類型
2.使用
2.1 方式1：
利用ts的對數據類型的自動推斷功能，進行傳值，將鼠標分別放在r1,r2,r3,r4的上邊，可以看到它們的類型。也就說你傳遞的什么類型的值，就返回什么類型的值
function test<T>(content: T): T{return content
}let r1 = test(10)
let r2 = test("hello")
let r3 = test([1,2,3,"hello"])
let r4 = test({name:"zhangsan"})
2.2 方式2:
當有時候，當給函數傳遞的類型比較復雜時候，TS無法自動推斷出類型時，需要手動聲明傳遞的參數的類型，代碼如下
function test<T>(content: T): T{return content
}向test函數聲明傳遞的參數為string
let r1 = test<string>("hello")向test函數聲明傳遞的參數為一個內容包含數字和字符串的數組
let r2 = test<(number|string)[]>([1,2,3,"hello"])向test函數聲明傳遞的參數為一個只有name和age的對象
let r3 = test<{name:string,age:number}>({name: "zhangsan",age: 20})
