类型声明
- 声明文件不需要将 js 重构成 ts，只需要加上声明文件就可以使用；
- 类型声明在编译的时候都会被删除，不会影响真正的代码；
- 关键字 declare 表示声明的意思，可以用它来做出各种声明；
普通类型声明
declare let age: number;
declare function getName(): string;
declare class Animal { }
类型声明文件
- 什么是声明文件：当使用第三方库时，需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能，以 .d.ts 结尾的文件就是声明文件，为 JS 代码提供类型声明；
// jQuery.d.ts declare const $: (selector: string) => { click(): void; width(length: number): void; // ...... } - 识别 tsconfig.json 的 include 路径中的 ts 文件；
{ "include":[ "src/**/*", "typings/**/*" ] } - test.js 中可以直接使用了
$('#button').click(); $('#button').width(100);
第三方声明文件
- 当使用三方库的时候，不是所有的三方库都要写一大堆 decare 的文件呢，要看社区里有没有这个三方库的 TS 类型包（一般都有）；
- 社区使用 @types 统一管理第三方库的声明文件，是由 DefinitelyTyped 这个组织统一管理的；
- npm 声明文件可能的位置（以 jquery 为例）：
- node_modules/jquery/package.json 中 “types”: “types/xxx.d.ts”；
- node modules/jquery/index.d.ts；
- node modules/@types/jquery/index.d.ts；
- typings/jquery/index.d.ts 或 typings/jquery.d.ts；
自己编写声明文件
引入的库没有实现声明文件、给已实现的 js 功能写声明文件，无需 ts 重构
- js 已实现的功能
function myFetch(url, method, data) { return fetch(url, { body: data ? JSON.stringify(data) : '', method }).then(res => res.json()) } myFetch.get = (url) => { return myFetch(url, 'GET') } myFetch.post = (url, data) => { return myFetch(url, 'POST', data) } export default myFetch - 直接引 myFetch ，给它写声明文件
type HTTPMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' declare function myFetch<T = any>(url: string, method: HTTPMethod, data?: any): Promise<T> declare namespace myFetch { // 使用 namespace 来声明对象下的属性和方法 const get: <T = any>(url: string) => Promise<T> const post: <T = any>(url: string, data: any) => Promise<T> } - 两种配置：
- 创建一个 node_modules/@types/myFetch/index.d.ts 文件，存放 myFetch 模块的声明文件，这种方式不需要额外的配置，但是 node_modules 目录不稳定，代码也没有被保存到仓库中，无法回溯版本，有不小心被删除的风险，故不太建议用这种方案，一般只用作临时测试。
- 创建一个 types 目录，专门用来管理自己写的声明文件，将 myFetch 的声明文件放到 types 中，这种方式需要配置下 tsconfig.json 中的 paths 和 baseUrl 字段；
{ "compilerOptions": { // ...... "module": "commonjs", "baseUrl": "./", "paths": { "*": ["types/*"] } }, // ...... }
打赏作者
您的打赏是我前进的动力
微信
支付宝
模块VS命名空间
上一篇
评论
