TypeStript 入门 - 11：类型声明

声明全局类型

//! 声明全局类型
declare let age: number;
declare function sum(a: string, b: string): void;
declare class Animal { };
declare const enum Seaons {
 Spring,
 Summer,
 Autumn,
 Winter
}
declare interface Person {
 name: string,
 age: number
}
//类型声明在编译的时候都会被删除，不会影响真正的代码。目的：是不用重构原有的js代码，TS能支持支持

使用第三方库，编写声明

通过cdn引入第三方库，比如：jquery手动编写声明

//! 使用场景：通过cdn引入，声明全局jquery方法
declare const $: (selector: string) => {
 height(num?: number): void
 width(num?: number): void
};
//! 声明后，此时就可以调用jquery中的方法，其他库也是类似的，如果没有.d.ts文件，可这样声明一下即可避免报错
//!（注意：一般库都提供了.d.ts文件，所以不用自己手动写）
$('').height();

通过webpack 使用第三方库，比如：jQuery手动编写声明

//! 使用场景：通过webpack 使用jQuery，进行声明
declare namespace jQuery {
 //! 注意：namespace 内的声明 无需添加declare
 function ajax(url: string, otpions: object): void;
 namespace fn {
  function extend(obj: object): void
 }
}
jQuery.ajax('/', {});
jQuery.fn.extend({});

创建类型声明文件.d.ts，将相关类型声明放到一个独立文件，这样使代码更加整洁(推荐方式)

//! 说明：可以把jquery声明，单独放置一个单独的声明文件中jquery.d.ts
declare const $: (selector: string) => {
 height(num?: number): void
 width(num?: number): void
};

declare namespace jQuery {
 function ajax(url: string, otpions: object): void;
 namespace fn {
  function extend(obj: object): void
 }
}

让ts能自动识别类型声明文件，修改tsconfig.js配置

{
 ...
 "paths": { 
  "*": [ "**/*.d.ts"],
 },
 ...
}

第三方声明文件

约定声明库前缀为@types，所有第三方声明的类型库都以@types/xxx开头

npm install @types/jquery -S

#等安装完后,使用jquery时默认会查找node_modules/@types/jquery/index.d.ts 文件

查找规范：先从package.json中types找，找不到再找node_modules/@types/jquery/index.d.ts

1. node_modules/jquery/package.json 中的types字段
2. node_modules/jquery/index.d.ts
3. node_modules/@types/jquery/index.d.ts