作用

用于ts编译时的检查，没有实现真正的代码功能。

场景

一般如果你的代码是用typescript写的话，你是不需要写d.ts的声明文件的。因为typescript的编译器编译后会自动生成d.ts文件。
所以，一般需要自己写d.ts文件的场景，是你的代码原本是用js写的时候。

基础

  • 定义文件命名：xx.d.ts

  • 使用 declare

    1. declare var JQuery: (selector: string) => any;

  • 如果 JQuery 是通过 <script>标签引入，不是通过 import 引入，则以上声明可以使 ts不报错

  • npm包名为 @types/xx是声明文件
  • @type/XX包的创建，需要向 DefinitelyTyped 提交定义文件，需要其审批。社区
  • 默认情况下，node_modules下面的 @types 包都会被编译器自动加载

    编写声明文件

    给以下封装方法添加声明文件 ```typescript function myFetch(url, method, data) { return fetch(url, { body: data ? JSON.stringify(data) : ‘’, method }).then(resp => resp.json()) }

myFetch.get = (url) => { return myFetch(url, ‘GET’, ‘’) }

myFetch.post = (url, data) => { return myFetch(url, ‘POST’, data) }

export default myFetch

  1. ```typescript
  2. type HTTPMethod = 'GET' | 'POST' | 'PATCH' | 'DELETE'
  3. declare function myFetch<T = any>(url: string, method: HTTPMethod, data?: any): Promise<T>
  5. // 定义变量中的方法
  6. declare namespace myFetch {
  7.   const get: <T = any>(url: string) => Promise<T>;
  8.   const post: <T = any>(url: string, data: any) => Promise<T>;
  9. }
  11. export = myFetch // 放入 node_modules 后要添加！！！！

可以放入一下文件夹中

  1. node_modules
  2.   |—— @types
  3.       |—— myFetch
  4.           |—— index.d.ts

现在，在 ts 文件中写 myFatch 方法时，就可一个获得提示了
image.png

  1. import myFetch from 'myFetch';
  2. myFetch<string>('test', 'POST', { name: 'hello' }).then(data => {
  3.   // data.charCodeAt
  4. })
  6. myFetch.get<number>('url').then(res => {
  7.   // res.toFixed
  8. })

注意：

  • 这样做，只是为了在书写 ts 代码时获得良好的提示。实际方法的执行逻辑是没有的，在编译成 js 执行会报错
  • import 导入的文件，实际上是 node_modules/@types/myFetch/index

注意：

  • ts 声明文件的文件名，应和实际的 js 文件名保持一致（.d.ts是声明文件的固定格式）

实践

image.png