18.类型声明
一.声明全局变量
- 普通类型声明
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
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
类型声明在编译的时候都会被删除，不会影响真正的代码。目的是不重构原有的js代码，而且可以得到很好的TS支持
练习: 声明jQuery类型
jquery通过外部CDN方式引入，想在代码中直接使用
declare const $:(selector:string)=>{
height(num?:number):void
width(num?:number):void
};
$('').height();
1
2
3
4
5
2
3
4
5
- 命名空间声明
declare namespace jQuery {
function ajax(url:string,otpions:object):void;
namespace fn {
function extend(obj:object):void
}
}
jQuery.ajax('/',{});
jQuery.fn.extend({});
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
namespace表示一个全局变量包含很多子属性 , 命名空间内部不需要使用 declare 声明属性或方法
二. 类型声明文件
类型声明文件以
.d.ts结尾。默认在项目编译时会查找所有以.d.ts结尾的文件
// 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
}
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
三.编写第三方声明文件
配置tsconfig.json
- jquery声明文件
"moduleResolution": "node",
"baseUrl": "./",
"paths": {
"*": ["types/*"]
},
1
2
3
4
5
2
3
4
5
// types/jquery/index.d.ts
declare function jQuery(selector: string): HTMLElement;
declare namespace jQuery {
function ajax(url: string): void
}
export = jQuery;
1
2
3
4
5
6
7
2
3
4
5
6
7
- events模块声明文件
import { EventEmitter } from "zf-events";
var e = new EventEmitter();
e.on('message', function (text) {
console.log(text)
})
e.emit('message', 'hello');
1
2
3
4
5
6
2
3
4
5
6
export type Listener = (...args: any[]) => void;
export type Type = string | symbol
export class EventEmitter {
static defaultMaxListeners: number;
emit(type: Type, ...args: any[]): boolean;
addListener(type: Type, listener: Listener): this;
on(type: Type, listener: Listener): this;
once(type: Type, listener: Listener): this;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
四.模块导入导出
import $ from 'jquery' // 只适用于 export default $
const $ = require('jquery'); // 没有声明文件可以直接使用 require语法
import * as $ from 'jquery' // 为了支持 Commonjs规范 和 AMD规范 导出时采用export = jquery
import $ = require('jquery') // export = jquery 在commonjs规范中使用
1
2
3
4
5
6
7
2
3
4
5
6
7
五.第三方声明文件
@types是一个约定的前缀，所有的第三方声明的类型库都会带有这样的前缀
npm install @types/jquery -S
1
当使用jquery时默认会查找
node_modules/@types/jquery/index.d.ts文件
查找规范
- node_modules/jquery/package.json 中的types字段
- node_modules/jquery/index.d.ts
- node_modules/@types/jquery/index.d.ts