TS中的声明文件 .d.ts 的作用是为了在TS中使用js文件,但是js文件没有类型,ts又是一个类型严格的语言。所以为了在ts中使用js第三方包,或者自定义Js模块。便由此引出了.d.ts文件。
需要注意的是 声明文件的文件名需要和你引入的js文件名相同,只是文件后缀不同。
描述文件通常可以分为3种。1.全局声明 2.模块声明 3.UMD声明。
UMD就是 既可以全局也可以模块,
所以在此只记录全局和局部的声明文件编写方式
// 全局类库 global-lib.js function globalLib(options) { console.log(options); } globalLib.version = '1.0.1'; globalLib.doSomething = function() { console.log('typescript search') } // 声明文件 global-lib.d.ts declare function globalLib(options: globalLib.Options): void; declare namespace globalLib { const version: string; function doSomething(): void; interface Options { [propName: string]: any; } }
// 模块类库 const version = '1.0.1'; const doSomething = function() { console.log('typescript search') } function moduleLib(options) { console.log(options); } moduleLib.version = version; moduleLib.doSomething = doSomething; module.exports = moduleLib; // 声明文件 declare function moduleLib(option:Options):void; interface Options { [key:string]:any } declare namespace moduleLib { const version:string; function doSomething():void; } export = moduleLib;
// 使用 let hello: string = 'Hello TypeScript' document.querySelectorAll('.app')[0].innerHTML = hello globalLib({name:'申屠肆'}); console.log(globalLib.version); import moduleLib from "./libs/module-lib"; import matchModuleLib from './libs/match-module-lib' console.log(matchModuleLib('asda17398977903sdas')); moduleLib({name:'模块'})
记录一下