[TOC]
一贪薪、 獲取Typescript
1. 安裝Typescript
npm install -g typescript
2.IDE
IDE推薦使用 VS CodeVS Code是開源的宇攻，跨終端的輕量級(jí)編輯器癌瘾，內(nèi)置TS
本身就是TS編寫的对妄，支持力度較好
3. 如何編譯TS
新建一個(gè)
index.ts文件-
執(zhí)行代碼（每次修改都要執(zhí)行命令）
tsc index.ts -
如果要一直監(jiān)視烘挫，首先在當(dāng)前目錄下執(zhí)行
tsc --init // 初始化TS -
生成一個(gè)
tsconfig.json文檔映琳，一般會(huì)將配置文檔中的輸出outDir的改一下位置锌杀，這個(gè)按照自己的要求來做"outDir": "./js" -
可以開啟VS Code的watch, 位置
終端---運(yùn)性任務(wù) --- typescript --- tsc:監(jiān)視tsconfig.json
二九府、Typescript基礎(chǔ)數(shù)據(jù)類型
-
Javascript的類型分為兩種：原始數(shù)據(jù)類型和對(duì)象類型 - 原始數(shù)據(jù)類型：
Boolean、number、string浓冒、null、undefined尖坤、Symbol和BigInt
1. Boolean類型
let flag: boolean = false;
// 編譯結(jié)果：var flag = false;
2. 數(shù)字類型number
let num:number = 0
// 編譯結(jié)果：var num = 0;
3. 字符串string
let name:string = '張三'
// 編譯結(jié)果：var name = '張三';
4. Void空值
// Void表示沒有任何返回值的函數(shù)
function fn():void{
console.log('沒有返回值')
}
5. Array類型
// 方式一
let arr: number[] = [1, 2, 3]
// 編譯結(jié)果 var arr = [1, 2, 3];
// 方式二 (泛型方式)
let arr: Array<number> = [1,2,3]
// 編譯結(jié)果 var arr = [1, 2, 3];
6. Tuple元組類型
- 在
javascript中不存在元組稳懒，這是TS特有的類型 - 元組中每一個(gè)屬性都有一個(gè)關(guān)聯(lián)類型，初始化元組時(shí)必須提供每個(gè)屬性的值
- 當(dāng)元素越界慢味，也就是給數(shù)組添加元素時(shí)场梆，它的類型會(huì)被限制為元組中每個(gè)類型的聯(lián)合類型
// 聯(lián)合類型[string, number]
let tom: [string, number] = ['Tom', 25];
tom.push('1111') // 成功
tom.push(1111)// 成功
tom.push(null)// 成功
tom.push(undefined)// 成功
tom.push(true) // 失敗 Argument of type 'true' is not assignable to parameter of type 'string | number'.
7. 枚舉類型Enum
- 用于取值被限定在一定范圍內(nèi)的場(chǎng)景
- 默認(rèn)情況枚舉開始于其成員編號(hào)
0,然后自增 - 也可以通過設(shè)置其值來進(jìn)行更改，也可以設(shè)置所有值
// TS
enum ColorEnum{ red, green, blue }
// ES5 編譯結(jié)果
var ColorEnum;
(function (ColorEnum) {
ColorEnum[ColorEnum["red"] = 0] = "red";
ColorEnum[ColorEnum["green"] = 1] = "green";
ColorEnum[ColorEnum["blue"] = 2] = "blue";
})(ColorEnum || (ColorEnum = {}));
// TS
enum ColorEnum1{ red = 1, green = 3, blue }
// ES5 編譯結(jié)果
var ColorEnum1;
(function (ColorEnum1) {
ColorEnum1[ColorEnum1["red"] = 1] = "red";
ColorEnum1[ColorEnum1["green"] = 3] = "green";
ColorEnum1[ColorEnum1["blue"] = 4] = "blue";
})(ColorEnum1 || (ColorEnum1 = {}));
8. Any任意類型值
- 如果定義為any類型纯路，則工作方式變?yōu)?code>js模式??
- 任何東西都可以賦值為any
- top type/ bottom type 或油，放棄了類型檢查
let anyNumber: any = '任意類型值'
anyNumber = 0
9. Unknown類型
-
TS3.0引入 - top type 和 any一樣，所有類型都可以分配給unknown,但unknown不能賦值給所有感昼，只能賦值給any和unknown
- unknown 是 top type (任何類型都是它的 subtype) , 而 any 即是 top type, 又是 bottom type (它是任何類型的 subtype ) , 這導(dǎo)致 any 基本上就是放棄了任何類型檢查.
/*任何值都可以為unknown類型*/
let un: unknown
un = true // ok
un = 0 // ok
un = 'string' // ok
un = [] // ok
un = {} // ok
un = null // ok
un = undefined // ok
un = Symbol('111') // ok
/* unknown只能復(fù)制給any類型和unknown類型,其他類型編譯不成功 */
let value1:unknown = un // ok
let value2:any = un // ok
let value3:string = un // error
let value4:boolean = un // error
let value5:number = un // error
let value6:any[] = un // error
let value7:null = un // error
let value8:undefined = un // error
10. Null 和 Undefined
TypeScript里装哆，undefined和null兩者有各自的類型，分別為undefined和null,與void的區(qū)別是undefined和null為所有類型的子類型定嗓。
let u:undefined = undefined
let n:null = null
/*前提條件tsconfig.json中 strictNullChecks 設(shè)置為false*/
let numb: number = null // 編譯通過
/*前提條件tsconfig.json中 strictNullChecks 設(shè)置為true*/
let numb: number = null // 編譯未通過蜕琴，Type 'null' is not assignable to type 'number'
11. Never類型
表示的是那些永不存在的值的類型
可以用來使得異常的處理更加安全
-
function listen() : never{ while(true){ let conn = 1111 } } listen() console.log("!!!") //Error
