ts.jpg

看到別人寫(xiě)ts文件的時(shí)候，通常會(huì)有以.d.ts結(jié)尾的文件跟著，它的作用是，描述Javascript模板內(nèi)導(dǎo)出的接口類(lèi)型信息。

日常開(kāi)發(fā)中，我們可以通過(guò)添加配置文件的配置項(xiàng)，自動(dòng)生成該聲明文件，在編譯過(guò)程中會(huì)自動(dòng)生成.d.ts的聲明文件 ，主要以下幾種情況需要

1.引入的第三方包，沒(méi)有類(lèi)型聲明文件

這種一般會(huì)提示你缺少@type/xxxx的錯(cuò)誤，也就是需要安裝一下對(duì)應(yīng)的插件包就可以了?；蛘?，在源代碼中添加類(lèi)型聲明文件；

2.通過(guò)該CDN引入的工具庫(kù)

掛載一些全局的方法，如果在ts中，直接使用方法的話，會(huì)提示錯(cuò)誤，此時(shí)需要引入全局的類(lèi)型聲明

那么聲明文件改怎么寫(xiě)？??

需要明確的一點(diǎn)是，聲明文件只是對(duì)類(lèi)型的定義，不能進(jìn)行賦值等操作

全局變量??

declare let / const
declare function
declare class
declare enum
declare namespace // 聲明含有屬性的全局對(duì)象
interface / type

除了比較常見(jiàn)的一些，namespace的定義可用于一個(gè)模塊歸集

declare namespace User {
  interface User {
    name: string
  }
  function getUser(name:string): User{
      return `` 
  }
}

或者，使用三斜線引入

///<reference types=“UMDModuleName/globalName” />

ts 早期模塊化的標(biāo)簽, 用來(lái)導(dǎo)入依賴(lài), ES6廣泛使用后, 在編寫(xiě)TS文件中不推薦使用, 除了以下的場(chǎng)景使用///, 其他場(chǎng)景使用 import 代替；在聲明文件中, 依賴(lài)全局庫(kù)或被全局庫(kù)依賴(lài), 具體:

• 庫(kù)依賴(lài)全局庫(kù), 因?yàn)槿謳?kù)不能使用import導(dǎo)入
• 全局庫(kù)依賴(lài)于某個(gè) UMD 模塊，因?yàn)槿謳?kù)中不能出現(xiàn)import/export, 出現(xiàn)則為npm/UMD

注意: 三斜線指令必須放在文件的最頂端，三斜線指令的前面只允許出現(xiàn)單行或多行注釋。

npm包??

對(duì)于沒(méi)有聲明類(lèi)型的npm包，咱可以創(chuàng)建一個(gè)types目錄，來(lái)管理自己的聲明文件，同時(shí)需要在配置文件中，加上

// tsconfig.json
  "baseUrl": ".",
  "paths": {
      "*": [ "*", "types/*"]
   }

自動(dòng)生成聲明文件的配置?

// tsconfig.json
complierOptions:{
  "declaration": true,
}