什么是声明文件?
当我们使用typescript进行开发时经常会引入第三方的js库,默认情况下ts是不认识我们引入的这些JS库的。所以在使用这些js库的时候, 我们就要通过声明文件告诉ts它是什么, 怎么用,同时能获得对应的代码补全、接⼝提⽰等功能。声明文件一般是以xxx.d.ts命名。
常见类库声明文件编写方式
1. 全局类库
//global-lib.js
function globalLib(options) {
console.log(options);
}
globalLib.version = "1.0"
globalLib.doSomething = function() {
console.log("let`t do something!!!");
}
//global-lib.d.js
declare function globalLib(options: globalLib.Options):void;
declare namespace globalLib{
const version:string;
function doSomething():void;
interface Options {
[key: string]: any
}
}
2. 模块类库
//module-lib.js
function moduleLib(options) {
console.log(options);
}
moduleLib.version = "1.0"
moduleLib.doSomething = function() {
console.log("let`t do something!");
}
export default moduleLib
//module-lib.d.ts
declare function moduleLib(options: Options):void;
interface Options {
[key: string]: any
}
declare namespace moduleLib{
const version:string
function doSomething():void
}
export = moduleLib
3.umd类库
//umd-lib.js
(function (root, factory) {
if (typeof define === "function" && define.amd) {
define(factory)
} else if( typeof module === "object" && module.exports){
module.exports = factory()
} else {
root.umdLib = factory()
}
})(window, function(){
return {
version: '1.0',
doSomething(){
console.log('umdLib do something');
}
}
})
//umd-lib.d.ts
declare namespace umdLib{
const version:string
function doSomething():void
}
//umd类库必须加这行
export as namespace umdLib
export = umdLib
decalre关键字
decalre关键字除了用于声明文件中,也可以使用它对类库添加一些自定义的方法或属性
模块类库
import m from 'moment'
declare module 'moment' {
export function myFunction():void;
}
m.myFunction = () => {}
全局类库
declare global {
export namespace globalLib{
export function myFunction():void;
}
}
globalLib.myFunction = () => {}
第三方js库的声明文件查询网站 www.typescriptlang.org/dt/search?s…