TypeScript

是JavaScript的超集，代碼量比JavaScript復雜、繁多；但是結構更清晰

一、簡介

為什么需要TypeScript？

JavaScript的困擾

1. 不清楚的數據類型
2. 不會指明代碼的邏輯漏洞
3. 訪問不存在的屬性
4. 低級的拼寫錯誤

Typescript會進行靜態類型檢查：在代碼運行前對代碼進行檢查標紅；將代碼錯誤前置

如何編譯TypeScript？

要將.ts編譯成.js文件；需要配置TypeScript的編譯環境

1. 全局安裝TypeScript：npm i TypeScript -g

2. 初始化：tsc --init

   生成一個編譯控制文件tsconfig.json

3. 監視ts文件：tsc --watch index.ts

   會生成一個對應的js文件，一有變化就會更新；并生成一個配置文件tsconfig.json

4. 修改配置文件：取消注釋 noEmitOnError:true

   只要ts文件語法正確的時候才會更新ts

二、類型聲明

聲明變量時，需要對其進行類型聲明；使用:來進行類型聲明

let a: string // a是字符串變量，只能賦值字符串（官方推薦小寫）
let b: String // 字符串對應的包裝對象

function sum(a: number, b: number): number {return a + b
} //sum函數的參數必須的number，返回值也必須是number

三、數據類型

any

任意類型，意味著放棄類型檢查；即可以存任意類型的值，也可以賦值給任意類型的變量

unknown

未知類型，類型安全的any，但是不能將unknown數據類型賦給其他類型

若要將unknown賦值給其他類型，可以這么做：

let a: unknown
a = "hello"
let b: string
b = a as string

let str:unknown
str = "world"
str.toUppercase() //有警告
(str as string).toUppercase() //無警告

nerver

不是任何值；我們一般不用，不然聲明的變量將無用。一般是TypeScript主動推斷出來的，或者是特殊的函數（不需要任何返回值）

void

通常用于函數返回值的類型聲明；這個類型是，函數返回值為空（undefined），且不依賴函數返回值進行任何操作。

function fn():undefined{ ... } 
let result1 = fn() // 編碼者可以利用函數的返回值
function fn():void{ ... } 
let result2 = fn() // 編碼者不可以利用函數的返回值

object

object(小寫)：非原始數據類型

Object(大寫)：可以調用到Object方法的類型；通俗講，除了null和undefined都可以。

1. 聲明對象類型

  let person: { name: string, age?: number, [key: string]: any }//age?表示可選，// [key: string]: any 表示索引簽名，任意數量的屬性；key是any類型，value是string類型。

2. 聲明函數類型

  let sum: (a: number, b: number) => number //指明傳入的參數類型number，返回類型也為numbersum = function (x, y) {return x + y}

3. 聲明數組類型

  let arr1:srtring[] //字符串數組let arr2:Array<string> //數字數組

tuple

元組類型 -> 特殊的數組類型。元素固定數量，可以是不同類型

!注意：元組不是關鍵字

let arr1 = [number,string] //兩個元素，一個數字，一個字符串
let arr2 = [number,...[string]] //一個數字和任意個string

enum

枚舉類型，定義一組命名常量；增強可讀性，可維護性，程序員編寫代碼時不容易出錯

1. 數字枚舉

  enum Direction{ Up, Down, Left, Right }function walk(data:Direction){ //使用例子if(data === Direction.Up){console.log("向【上】走");}else if(data === Direction.Down){console.log("向【下】走")}else if(data === Direction.Left){console.log("向【左】走")}else if(data === Direction.Right){console.log("向【右】走")}}

2. 字符串枚舉

  enum Direction{Up = "up",Down = "down",Left = "left",Right = "right"}

3. 常量枚舉

使用const關鍵字定義，在編譯時內聯，避免產生額外的代碼

：那么何為內聯？

在TypeScript編譯時，將成員引用替換成實際值，不生成額外枚舉對象，減少Javascript代碼量，提高運行速度。

Type

為任意數據類型創建別名；一般開頭用大寫

1. 創建別名

   type num = number // num是數字類型
   

2. 聯合類型(高級類型)

   type Status = number|string //Status是數字或字符串類型
   type Gender = "男"|"女" //Gender是字符"男"or"女"
   

3. 交叉類型

   type Area = {height : number;width : number;speak():void;
   };
   

一些特殊情況

！當使用類型聲明限制函數的返回值為空時，TypeScript并不會嚴格限制函數的返回值為空！

補充 數組方法map()，find()都是有返回值的操作；而forEach()是單純遍歷數組，沒有返回值

type LogFunc = () => viod
const fn:LogFunc = () => {return 100 //允許返回非空值
}

為什么如此呢？就是為了兼容以下代碼：

let src = [1, 2, 3]
const dst = [0]
src.forEach((e1) => dst.push(e1)) //forEach本身沒有返回值，但是由于如果箭頭函數只有一段代碼可以不加{}，如果嚴格限制返回值必須為空的話，這樣寫就會不合法，所以提前用限制函數為void的話，不是嚴格要求返回值必須是空