前言

學(xué)習(xí)一門(mén)語(yǔ)言之前，我們首先肯定要知道我們?yōu)槭裁炊鴮W(xué)？
JS 的類型系統(tǒng)存在“先天缺陷”弱類型，JS 代碼中絕大部分錯(cuò)誤都是類型錯(cuò)誤（Uncaught TypeError）。
這些經(jīng)常出現(xiàn)的錯(cuò)誤，導(dǎo)致了在使用 JS 進(jìn)行項(xiàng)目開(kāi)發(fā)時(shí)，增加了找 Bug、改 Bug 的時(shí)間，嚴(yán)重影響開(kāi)發(fā)效率。
TypeScript 屬于靜態(tài)類型（編譯期做類型檢查）的編程語(yǔ)言，JavaScript 屬于動(dòng)態(tài)類型（執(zhí)行期做類型檢查）的編程語(yǔ)言
對(duì)于 JS 來(lái)說(shuō)：需要等到代碼真正去執(zhí)行的時(shí)候才能發(fā)現(xiàn)錯(cuò)誤（晚）
對(duì)于 TS 來(lái)說(shuō)：在代碼編譯的時(shí)候（代碼執(zhí)行前）就可以發(fā)現(xiàn)錯(cuò)誤（早）
并且，配合 VSCode 等開(kāi)發(fā)工具，TS 可以提前到在編寫(xiě)代碼的同時(shí)就發(fā)現(xiàn)代碼中的錯(cuò)誤，減少找 Bug、改 Bug 時(shí)間。

Vue 3 源碼使用 TS 重寫(xiě)、Angular 默認(rèn)支持 TS、React 與 TS 完美配合，TypeScript 已成為大中型前端項(xiàng)目的首選編程語(yǔ)言

一、類型注解

TypeScript 是 JS 的超集，TS 提供了 JS 的所有功能，并且額外的增加了：類型系統(tǒng)
JS也有類型（比如，number/string 等），但是 JS 不會(huì)檢查變量的類型是否發(fā)生變化，而 TS 會(huì)檢查
TypeScript 類型系統(tǒng)的主要優(yōu)勢(shì)：可以顯示標(biāo)記出代碼中的意外行為，從而降低了發(fā)生錯(cuò)誤的可能性

let age: number = 10
let username: string = '劉狄威'

上述代碼中，約定變量 age 的類型為 number 類型，username的類型為string類型，約定了什么類型，就只能給變量賦值該類型的值，否則就會(huì)報(bào)錯(cuò)

約定了類型之后，代碼的提示就會(huì)非常的清晰

二、類型概述

可以將 TS 中的常用基礎(chǔ)類型細(xì)分為兩類：

• JS 已有類型
  原始數(shù)據(jù)類型（ number/string/boolean/null/undefined ）
  復(fù)雜數(shù)據(jù)類型（數(shù)組，對(duì)象，函數(shù)等）
• TS 新增類型
  聯(lián)合類型
  自定義類型（類型別名）
  接口
  元組
  字面量類型
  枚舉
  void
  …

2.1 原始數(shù)據(jù)類型

原始類型：number/string/boolean/null/undefined

let age: number = 18
let myName: string = '老師'
let isLoading: boolean = false

2.2 數(shù)組類型

ts中數(shù)組類型有兩種寫(xiě)法

// 寫(xiě)法一（推薦）：
let numbers: number[] = [1, 3, 5]
// 寫(xiě)法二：
let strings: Array<string> = ['a', 'b', 'c']

2.3 聯(lián)合類型

通過(guò)聯(lián)合類型將多個(gè)類型組合成一個(gè)類型

如果數(shù)組中既有 number 類型，又有 string 類型，那么這個(gè)數(shù)組的類型應(yīng)該如何寫(xiě)?

  let arr: (number | string)[] = [1, 2, 3, 'abc']
  // 注意事項(xiàng): | 的優(yōu)先級(jí)較低, 需要用 () 包裹提升優(yōu)先級(jí)
  // 一旦使用聯(lián)合類型, 說(shuō)明 arr 中存儲(chǔ)的既可能是 number 也可能是 string, 所以會(huì)丟失一部分提示信息 (只能提示共有的方法和屬性)
  let timerId: number | null = null

| （豎線）在 TS 中叫做聯(lián)合類型，即：由兩個(gè)或多個(gè)其他類型組成的類型，表示可以是這些類型中的任意一種
注意：這是 TS 中聯(lián)合類型的語(yǔ)法，只有一根豎線，不要與 JS 中的或（||）混淆了

2.4 類型別名

使用類型別名給類型起別名，簡(jiǎn)化類型的使用

當(dāng)同一類型（復(fù)雜）被多次使用時(shí)，可以通過(guò)類型別名，簡(jiǎn)化該類型的使用

// 將一組類型存儲(chǔ)到「變量」里, 用 type 來(lái)聲明這個(gè)特殊的「變量」
type CustomArray = (number | string)[]
let arr1: CustomArray = [1, 'a', 3, 'b']
let arr2: CustomArray = ['x', 'y', 6, 7]

2.5 函數(shù)類型

函數(shù)的類型實(shí)際上指的是： 函數(shù)參數(shù) 和 返回值 的類型

• 單獨(dú)指定參數(shù)、返回值的類型

  // 函數(shù)聲明
  // function 函數(shù)名(參數(shù)1: 參數(shù)1類型, 參數(shù)2: 參數(shù)2類型): 返回值類型 { 函數(shù)體 }
   function add(a: number, b: number): number {
     return a + b
   }
  // 函數(shù)表達(dá)式
   const fn = function(a: number, b: number): number {
     return a + b
   }
  // 箭頭函數(shù)
  // 注意事項(xiàng): 以前箭頭函數(shù)如果只有一個(gè)參數(shù), 則可省略小括號(hào), ts不行
  // ts箭頭函數(shù)必須要有小括號(hào)
   const sub = (a: number): number => {
     return a
   }
   const sub = (a: number, b: number): number => {
     return a - b
   }

• 同時(shí)指定參數(shù)、返回值的類型（函數(shù)的類型別名）

type AddFn = (num1: number, num2: number) => number
const add: AddFn = (num1, num2) => {
    return num1 + num2
}

這種形式只適用于函數(shù)表達(dá)式

2.6 void類型

如果函數(shù)沒(méi)有返回值，那么，函數(shù)返回值類型為： void

// 如果什么都不寫(xiě)，此時(shí)，add 函數(shù)的返回值類型為： void
const add = () => {}
// 這種寫(xiě)法是明確指定函數(shù)返回值類型為 void，與上面不指定返回值類型相同
const add = (): void => {}
// 但如果指定返回值類型為 undefined 時(shí)，函數(shù)體中必須顯式的 return undefined 才可以
const add = (): undefined => {
// 此處，返回的 undefined 是 JS 中的一個(gè)值
return undefined
}

2.7 可選參數(shù)

使用?給函數(shù)指定可選參數(shù)類型

  // 注意事項(xiàng): 必選參數(shù)不能在可選參數(shù)后(可選參數(shù)只能出現(xiàn)在參數(shù)列表的最后)
  const print = (name?: string, gender?: string): void => {
    if (name && gender) {
      console.log(name, gender)
    }
  }

2.8 對(duì)象類型

JS 中的對(duì)象是由屬性和方法構(gòu)成的，而 TS 對(duì)象的類型就是在描述對(duì)象的結(jié)構(gòu)（有什么類型的屬性和方法）

let person: {
  name: string
  sayHi(): void
} = {
  name: 'jack',
  sayHi(content: string) {}
}

也可以用類型別名進(jìn)行簡(jiǎn)化

  type Person = {
    name: string,
    age: number,
    girlFriend?: string, // ? 表示可選屬性
    // sayHi: (content: string) => void
    sayHi(content: string): void
  }

  // ts 就像在寫(xiě)注釋, 以前寫(xiě)的注釋是給程序員看的, ts 寫(xiě)的類型是給編輯器看的, 程序員也可以看
  let obj1: Person = {
    name: 'james',
    age: 39,
    sayHi(content) {
      console.log(content)
    }
  }

2.9 接口類型

當(dāng)一個(gè)對(duì)象類型被多次使用時(shí)，一般會(huì)使用接口（ interface ）來(lái)描述對(duì)象的類型，達(dá)到復(fù)用的目的

interface IPerson {
  name: string
  age: number
  sayHi(): void
}
let person: IPerson = {
  name: 'jack',
  age: 19,
  sayHi() {}
}

interface（接口）和 type（類型別名）的對(duì)比：

• 相同點(diǎn)：都可以給對(duì)象指定類型
• 不同點(diǎn):
  接口只能為對(duì)象指定類型
  類型別名不僅可以為對(duì)象指定類型，實(shí)際上可以為任意類型指定別名

推薦：能使用 type 就是用 type

2.9.1 接口繼承

接口繼承: 可以實(shí)現(xiàn)一個(gè)接口使用另一個(gè)接口的類型約束, 實(shí)現(xiàn)接口的復(fù)用

  interface IPerson {
    username: string
    age: number
    gender: string
    sayHi: () => void
  }
  // 接口繼承: IStudent 具備 IPerson 的所有約束規(guī)則
  interface IStudent extends IPerson {
    score: number
    sleep: () => void
  }

  const s1: IStudent = {
    username: 'james',
    age: 19,
    gender: '男',
    sayHi() {
      console.log('詹姆斯')
    },
    score: 59,
    sleep() {
      console.log('詹姆斯正在睡覺(jué)...')
    },
  }

使用type也能實(shí)現(xiàn)類似繼承的效果

// 使用 type 實(shí)現(xiàn)和 interface 類似繼承的效果
  type Person = {
    username: string
    age: number
    gender: string
    sayHi: () => void
  }

  // & 與連接符: 既要滿足前面的也要滿足后面的
  // | 或連接符: 滿足其中一個(gè)即可
  type Student = {
    score: number
    sleep: () => void
  } & Person
  
  const s2: Student = {
    username: 'james',
    age: 28,
    gender: '未知',
    sayHi() {
      console.log('hello!')
    },
    score: 80,
    sleep() {
      console.log('我在睡覺(jué)')
    },
  }

如果兩個(gè)接口之間有相同的屬性或方法，可以將公共的屬性或方法抽離出來(lái)，通過(guò)繼承來(lái)實(shí)現(xiàn)復(fù)用

2.10 元組類型

元組類型是另一種類型的數(shù)組，它確切地知道包含多少個(gè)元素，以及特定索引對(duì)應(yīng)的類型

let position: [number, number] = [39.5427, 116.2317]

• 元組類型可以確切地標(biāo)記出有多少個(gè)元素，以及每個(gè)元素的類型
• 該示例中，元素有兩個(gè)元素，每個(gè)元素的類型都是 number

使用 number[] 的缺點(diǎn)：不嚴(yán)謹(jǐn)，因?yàn)樵擃愋偷臄?shù)組中可以出現(xiàn)任意多個(gè)數(shù)字

2.11 類型推論

在 TS 中，某些沒(méi)有明確指出類型的地方，TS 的類型推論機(jī)制會(huì)幫助提供類型

// 變量 age 的類型被自動(dòng)推斷為：number
let age = 18
// 函數(shù)返回值的類型被自動(dòng)推斷為：number
function add(num1: number, num2: number): number {
return num1 + num2
}

發(fā)生類型推論的 2 種常見(jiàn)場(chǎng)景:

1. 聲明變量并初始化時(shí)
2. 決定函數(shù)返回值時(shí)

2.12 字面量類型

let str1 = 'Hello TS'
const str2 = 'Hello TS'

通過(guò) TS 類型推論機(jī)制:

1. 變量 str1 的類型為：string
2. 變量 str2 的類型為：‘Hello TS’

此處的 ‘Hello TS’，就是一個(gè)字面量類型，也就是說(shuō)某個(gè)特定的字符串也可以作為 TS 中的類型

// 使用自定義類型:
type Direction = 'up' | 'down' | 'left' | 'right'
function changeDirection(direction: Direction) {
console.log(direction)
}
// 調(diào)用函數(shù)時(shí)，會(huì)有類型提示：
changeDirection('up')

• 解釋：參數(shù) direction 的值只能是 up/down/left/right 中的任意一個(gè)
• 優(yōu)勢(shì)：相比于 string 類型，使用字面量類型更加精確、嚴(yán)謹(jǐn)

字面量類型就是把字面量當(dāng)做類型來(lái)用

2.13 枚舉類型

枚舉：定義一組命名常量。它描述一個(gè)值，該值可以是這些命名常量中的一個(gè)

// 創(chuàng)建枚舉
enum Direction { Up, Down, Left, Right }
// 使用枚舉類型
function changeDirection(direction: Direction) {
    console.log(direction)
}
// 調(diào)用函數(shù)時(shí)，需要應(yīng)該傳入：枚舉 Direction 成員的任意一個(gè)
// 類似于 JS 中的對(duì)象，直接通過(guò) 點(diǎn)（.）語(yǔ)法 訪問(wèn)枚舉的成員
changeDirection(Direction.Up)

• 數(shù)字枚舉：默認(rèn)為從 0 開(kāi)始自增的數(shù)值

// Down -> 11、Left -> 12、Right -> 13
enum Direction { Up = 10, Down, Left, Right }

• 字符串枚舉：字符串枚舉的每個(gè)成員必須有初始值（沒(méi)有自增長(zhǎng)行為）

enum Direction {
	Up = 'UP',
	Down = 'DOWN',
	Left = 'LEFT',
	Right = 'RIGHT'
}

• 枚舉是 TS 為數(shù)不多的非 JavaScript 類型級(jí)擴(kuò)展(不僅僅是類型)的特性之一
  因?yàn)椋浩渌愋蛢H僅被當(dāng)做類型，而枚舉不僅用作類型，還提供值(枚舉成員都是有值的)
  也就是說(shuō)，其他的類型會(huì)在編譯為 JS 代碼時(shí)自動(dòng)移除。但是，枚舉類型會(huì)被編譯為 JS 代碼

enum Direction {
	Up = 'UP',
	Down = 'DOWN',
	Left = 'LEFT',
	Right = 'RIGHT'
}
// 會(huì)被編譯為以下 JS 代碼：
var Direction;
(function (Direction) {
	Direction['Up'] = 'UP'
	Direction['Down'] = 'DOWN'
	Direction['Left'] = 'LEFT'
	Direction['Right'] = 'RIGHT'
})(Direction || Direction = {})

2.14 any類型

這會(huì)讓 TypeScript 變?yōu)?“AnyScript”(失去 TS 類型保護(hù)的優(yōu)勢(shì))
當(dāng)值的類型為 any 時(shí)，可以對(duì)該值進(jìn)行任意操作，并且不會(huì)有代碼提示

• 其他隱式具有 any 類型的情況

1. 聲明變量不提供類型也不提供默認(rèn)值
2. 函數(shù)參數(shù)不加類型

注意：因?yàn)椴煌扑]使用 any，所以，這兩種情況下都應(yīng)該提供類型

  function fn(a, b) {}
  let b

2.15 類型斷言

使用類型斷言來(lái)指定更具體的類型

const aLink = document.getElementById('link')

• 該方法返回值的類型是 HTMLElement，此類型只包含所有標(biāo)簽公共的屬性或方法，不包含 a
  標(biāo)簽特有的 href 等屬性，導(dǎo)致無(wú)法操作 href 等 a 標(biāo)簽特有的屬性或方法（這種情況下就需要使用類型斷言指定更加具體的類型）

const aLink = document.getElementById('link') as HTMLAnchorElement

• 關(guān)鍵字 as 后面的類型是一個(gè)更加具體的類型（HTMLAnchorElement 是 HTMLElement 的子類型）

// 此語(yǔ)法不常用，知道即可：
const aLink = <HTMLAnchorElement>document.getElementById('link')

2.16 TypeScript泛型

• 泛型在保證類型安全(不丟失類型信息)的同時(shí)，可以讓函數(shù)等與多種不同的類型一起工作，靈活可復(fù)用
• 在 C# 和 Java 等編程語(yǔ)言中，泛型都是用來(lái)實(shí)現(xiàn)可復(fù)用組件功能的主要工具之一

//定義泛型函數(shù)
function id<Type>(value: Type): Type { return value }
function id<T>(value: T): T { return value }

• 該類型變量相當(dāng)于一個(gè)類型容器，能夠捕獲用戶提供的類型(具體是什么類型由用戶調(diào)用該函數(shù)時(shí)指定)

// 調(diào)用泛型函數(shù)
const num = id<number>(10)
const str = id<string>('a')

實(shí)現(xiàn)了復(fù)用的同時(shí)保證了類型安全

泛型函數(shù)的調(diào)用可簡(jiǎn)化=>省略 <類型> 來(lái)簡(jiǎn)化泛型函數(shù)的調(diào)用，利用TS內(nèi)部的類型參數(shù)推斷

// 省略 <number> 調(diào)用函數(shù)
let num = id(10)
let str = id('a')

當(dāng)編譯器無(wú)法推斷類型或者推斷的類型不準(zhǔn)確時(shí)，就需要顯式地傳入類型參數(shù)

2.17 泛型約束

為什么需要泛型約束呢，舉例一個(gè)場(chǎng)景：

function id<Type>(value: Type): Type {
	console.log(value.length)
	return value
}
id(2)

• Type 可以代表任意類型，無(wú)法保證一定存在 length 屬性，比如 number 類型就沒(méi)有 length

此時(shí)，就需要為泛型添加約束來(lái)收縮類型 (縮窄類型取值范圍)
添加泛型約束收縮類型，主要有以下兩種方式：1 .指定更加具體的類型 2. 添加約束

1. 指定更加具體的類型

function id<Type>(value: Type[]): Type[] {
	console.log(value.length)
	return value
}

將類型修改為 Type[] (Type 類型的數(shù)組)，只要是數(shù)組就一定存在 length 屬性

2. 添加約束

// 創(chuàng)建一個(gè)接口
interface ILength { length: number }
// Type extends ILength 添加泛型約束
// 解釋：表示傳入的類型必須滿足 ILength 接口的要求才行，也就是得有一個(gè) number 類型的 length 屬性
function id<Type extends ILength>(value: Type): Type {
	console.log(value.length)
	return value
}

• 創(chuàng)建描述約束的接口 ILength，該接口要求提供 length 屬性
• 通過(guò) extends 關(guān)鍵字使用該接口，為泛型(類型變量)添加約束
• 該約束表示：傳入的類型必須具有 length 屬性
  此方法，傳入的實(shí)參(比如，數(shù)組)只要有 length 屬性即可（類型兼容性)

2.18 泛型約束——多個(gè)類型變量

泛型的類型變量可以有多個(gè)，并且類型變量之間還可以約束(比如，第二個(gè)類型變量受第一個(gè)類型變量約束)
比如，創(chuàng)建一個(gè)函數(shù)來(lái)獲取對(duì)象中屬性的值：

function getProp<Type, Key extends keyof Type>(obj: Type, key: Key) {
	return obj[key]
}
let person = { name: 'jack', age: 18 }
getProp(person, 'name')

1. 兩個(gè)類型變量之間的使用，用逗號(hào)分隔。
2. keyof 關(guān)鍵字接收一個(gè)對(duì)象類型，生成其鍵名稱(可能是字符串或數(shù)字)的聯(lián)合類型。
3. 本示例中 keyof Type 實(shí)際上獲取的是 person 對(duì)象所有鍵的聯(lián)合類型，也就是： ‘name’ | ‘age’
4. 類型變量 Key 受 Type 約束，可以理解為：Key 只能是 Type 所有鍵中的任意一個(gè)，或者說(shuō)只能訪問(wèn)對(duì)象中存在的屬性

function getProperty<Type extends object, Key extends keyof Type>(obj: Type, key: Key)
{
	return obj[key]
}

2.19 泛型接口

泛型接口：接口也可以配合泛型來(lái)使用，以增加其靈活性，增強(qiáng)其復(fù)用性

interface IdFunc<Type> {
	id: (value: Type) => Type
	ids: () => Type[]
}
let obj: IdFunc<number> = {
	id(value) { return value },
	ids() { return [1, 3, 5] }
}

在接口名稱的后面添加 <類型變量> ，那么這個(gè)接口就變成了泛型接口。

三、TypeScript 與 Vue3

vue3配合ts中，還需要額外安裝一個(gè)vscode插件：Typescript Vue Plugin TypeScript 與組合式 API

3.1 defineProps 與 TypeScript

• defineProps配合vue3默認(rèn)語(yǔ)法進(jìn)行類型校驗(yàn)：

defineProps({
	money: {
		type: Number,
		required: true	
},
	car: {
		type: String,
		required: true
}
})

• defineProps配合ts的泛型，定義props類型校驗(yàn)

// 使用ts的泛型指定props類型
defineProps<{
	money: number
	car?: string
}>()

// 賦予默認(rèn)值
interface Props {
  value: boolean;
}
const props = withDefaults(defineProps<Props>(), { value: false });

3.2 defineEmits 與 TypeScript

• defineEmits配合運(yùn)行時(shí)聲明

const emit = defineEmits(['change', 'update'])

• defineEmits配合ts類型聲明

const emit = defineEmits<{
	(e: 'changeMoney', money: number): void
	(e: 'changeCar', car: string): void
}>()

3.3 ref 與 TypeScirpt

// 簡(jiǎn)單值 類型可忽略
const money = ref<number>(10)
const money = ref(10)

// 復(fù)雜類型 推薦指定泛型
type Todo = {
	id: number
	name: string
	done: boolean
}
const list = ref<Todo[]>([])

3.4 computed 與 TypeScript

const leftCount = computed<number>(() => {
	return list.value.filter((item) => item.done).length
})

3.5 事件處理 與 TypeScript

const move = (e: MouseEvent) => {
	mouse.value.x = e.pageX
	mouse.value.y = e.pageY
}
<h1 @mousemove="move($event)">根組件</h1>

3.6 Template Ref 與 TypeScript

const imgRef = ref<HTMLImageElement | null>(null)
onMounted(() => {
	console.log(imgRef.value?.src)
})

如何查看一個(gè)DOM對(duì)象的類型：通過(guò)控制臺(tái)進(jìn)行查看

document.createElement('img').__proto__

3.7 非空斷言

如果我們明確的知道對(duì)象的屬性一定不會(huì)為空，那么可以使用非空斷言 !
注意：非空斷言一定要確保有該屬性才能使用，不然使用非空斷言會(huì)導(dǎo)致bug

// 告訴typescript, 明確的指定obj不可能為空
let nestedProp = obj!.second;

3.8 TypeScript類型聲明文件

• 類型聲明文件：用來(lái)為已存在的 JS 庫(kù)提供類型信息
  TS 中有兩種文件類型：1 .ts 文件 2 .d.ts 文件
• .ts 文件:

1. 既包含類型信息又可執(zhí)行代碼
2. 可以被編譯為 .js 文件，然后執(zhí)行代碼
3. 用途：編寫(xiě)程序代碼的地方

• .d.ts 文件:

1. 只包含類型信息的類型聲明文件
2. 不會(huì)生成 .js 文件，僅用于提供類型信息,在.d.ts文件中不允許出現(xiàn)可執(zhí)行的代碼，只用于提供類型
3. 用途：為 JS 提供類型信息
   總結(jié)：.ts 是 implementation (代碼實(shí)現(xiàn)文件)；.d.ts 是 declaration(類型聲明文件)
   如果要為 JS 庫(kù)提供類型信息，要使用 .d.ts 文件

3.8.1 內(nèi)置類型聲明文件

• TS 為 JS 運(yùn)行時(shí)可用的所有標(biāo)準(zhǔn)化內(nèi)置 API 都提供了聲明文件
  比如，在使用數(shù)組時(shí)，數(shù)組所有方法都會(huì)有相應(yīng)的代碼提示以及類型信息:

const strs = ['a', 'b', 'c']
// 鼠標(biāo)放在 forEach 上查看類型
strs.forEach

比如，查看(ctrl+鼠標(biāo)左鍵) forEach 方法的類型聲明，在 VSCode 中會(huì)自動(dòng)跳轉(zhuǎn)到 lib.es5.d.ts 類型聲明文件中
當(dāng)然，像 window、document 等 BOM、DOM API 也都有相應(yīng)的類型聲明( lib.dom.d.ts )

3.8.2 第三方庫(kù)類型聲明文件

第三方庫(kù)的類型聲明文件有兩種存在形式:

1. 庫(kù)自帶類型聲明文件
   這種情況下，正常導(dǎo)入該庫(kù)（舉例axios=>查看 node_modules/axios 目錄），TS 就會(huì)自動(dòng)加載庫(kù)自己的類型聲明文件，以提供該庫(kù)的類型聲明。

2. 由 DefinitelyTyped 提供 => 提供 TypeScript 類型定義文件（.d.ts 文件）用于流行的 JavaScript 庫(kù)和框架。它的目的是為那些原本沒(méi)有內(nèi)置 TypeScript 支持的 JavaScript 庫(kù)提供類型定義，以便開(kāi)發(fā)者在使用這些庫(kù)時(shí)能夠享受到 TypeScript 的類型檢查和智能提示功能。

可以通過(guò)npm/yarn來(lái)下載該倉(cāng)庫(kù)提供的 TS 類型聲明包，這些包的名稱格式為: @types/*，比如，@types/react、@types/lodash 等
當(dāng)安裝 @types/* 類型聲明包后，TS 也會(huì)自動(dòng)加載該類聲明包，以提供該庫(kù)的類型聲明。 查詢 @types/* 庫(kù)

3.8.3 自定義類型聲明文件——共享類型

項(xiàng)目?jī)?nèi)共享類型

如果多個(gè) .ts 文件中都用到同一個(gè)類型，此時(shí)可以創(chuàng)建 .d.ts 文件提供該類型，實(shí)現(xiàn)類型共享。
操作步驟:

1. 創(chuàng)建 index.d.ts 類型聲明文件。
2. 創(chuàng)建需要共享的類型，并使用 export 導(dǎo)出(TS 中的類型也可以使用 import/export 實(shí)現(xiàn)模塊化
   功能)。
3. 在需要使用共享類型的 .ts 文件中，通過(guò) import 導(dǎo)入即可(.d.ts 后綴導(dǎo)入時(shí)，直接省略)。

自定義類型聲明文件為js提供聲明。

為已有js 文件提供類型聲明

1. 在將 JS 項(xiàng)目遷移到 TS 項(xiàng)目時(shí)，為了讓已有的 .js 文件有類型聲明。（整個(gè)項(xiàng)目從js升級(jí)到ts不太可能，工程太龐大了，但是可以為已有js文件添加類型聲明，這樣在ts中使用時(shí)，也有類型提示）
2. 成為庫(kù)作者，創(chuàng)建庫(kù)給其他人使用。

3.8.4 類型聲明文件的使用說(shuō)明

• TS 項(xiàng)目中也可以使用 .js 文件。
• 在導(dǎo)入 .js 文件時(shí)，TS 會(huì)自動(dòng)加載與 .js 同名的 .d.ts 文件，以提供類型聲明。（如果 .js 文件和 .d.ts 文件在同一文件夾下，TypeScript 會(huì)自動(dòng)關(guān)聯(lián)它們。 如果將 .d.ts 文件放在不同的文件夾中，也可以通過(guò)配置 tsconfig.json 文件中的 typeRoots 或 paths 選項(xiàng)來(lái)實(shí)現(xiàn)。）
• declare 關(guān)鍵字:用于類型聲明，為其他地方(比如，.js 文件)已存在的變量聲明類型，而不是創(chuàng)建一個(gè)新的變量。

1. 對(duì)于 type、interface 等這些明確就是 TS 類型的(只能在 TS 中使用的)，可以省略 declare 關(guān)鍵字。
2. 對(duì)于 let、function 等具有雙重含義(在 JS、TS 中都能用)，應(yīng)該使用 declare 關(guān)鍵字，明確指定此處用于類型聲明。

let count = 10
let songName = '癡心絕對(duì)'
let position = {
	x: 0,
	y: 0
}
function add(x, y) {
	return x + y
}
function changeDirection(direction) {
	console.log(direction)
}
const fomartPoint = point => {
	console.log('當(dāng)前坐標(biāo)：', point)
}
export { count, songName, position, add, changeDirection, fomartPoint }

為以上js文件提供類型聲明文件

declare let count:number
declare let songName: string
interface Position {
	x: number,
	y: number
}
declare let position: Position
declare function add (x :number, y: number) : number
type Direction = 'left' | 'right' | 'top' | 'bottom'
declare function changeDirection (direction: Direction): void
type FomartPoint = (point: Position) => void
declare const fomartPoint: FomartPoint
// TypeScript 通過(guò) export 關(guān)鍵字了解哪些類型聲明應(yīng)該暴露給外部使用，從而在其他模塊中提供類型檢查和代碼提示。
export {
count, songName, position, add, changeDirection, FomartPoint, fomartPoint
} 

總結(jié)

• 一、類型注解
  TypeScript 是 JavaScript 的超集，增加了類型系統(tǒng)。通過(guò)類型注解，可以避免意外的類型錯(cuò)誤，提高代碼的可讀性和維護(hù)性。

• 二、類型概述
  文章詳細(xì)介紹了 TypeScript 中的各種類型，包括基礎(chǔ)類型（如 number、string）、數(shù)組類型、聯(lián)合類型、類型別名、函數(shù)類型、void 類型、可選參數(shù)、對(duì)象類型、接口類型、元組類型、類型推論、字面量類型、枚舉類型、any 類型、類型斷言和泛型。

• 三、TypeScript 與 Vue3
  文章最后介紹了如何在 Vue 3 中使用 TypeScript，包括 defineProps、defineEmits、ref、computed、事件處理、Template Ref、非空斷言和類型聲明文件等內(nèi)容。

到此這篇關(guān)于TypeScript基礎(chǔ)知識(shí)和在Vue3中的應(yīng)用（簡(jiǎn)單上手，快速入門(mén)教程）的文章就介紹到這了,更多相關(guān)TypeScript基礎(chǔ)知識(shí)應(yīng)用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論