所有的引入的js库,需要ts的语法提升等,都必须要有声明文件
ts->.d.ts->js
1、创建声明文件
xx.d.ts xx和对应js库文件名称尽量一样,增强可读性
位置:
TypeScript会自动加载的src/typings文件夹中
对于库/插件作者来说,这个文件应该被定义在package.json的types property里
常规操作:配置tsconfig.json,设置声明文件解析路径
"baseUrl":".", 配置解析基本路径,"."表示根目录
"paths":{
"*":["./node_modules/@types","./typings/*"] 匹配所有模块的声明文件
自定义声明文件一般放在typings/模块同名文件夹/index.d.ts
}
2、下载声明文件(若有,则可省略第3步)
cnpm install @types/名称 --save-dev
3、创建声明语法,在xx.d.ts文件中,帮助ts文件理解引入库中的变量
声明全局变量
变量是只读的,那么可以使用declare const.你还可以使用declare let如果变量拥有块级作用域。
declare var x:(参数:返回类型)=>返回类型;
声明全局函数
同一个名称在声明函数时,可以有多个声明,函数重载,其他类型不能
declare function x(参数:返回类型):返回类型
声明类
declare class X{
constructor(参数: 类型);
普通属性: string;
方法(): void;
}
声明全局变量
declare global {
var LocalDataMessages:string
}
注意:修改"全局声明"必须在模块内部, 所以至少要有export{}字样
不然会报错❌: 全局范围的扩大仅可直接嵌套在外部模块中或环境模块声明中
export {}
通过接口声明函数,会默认重载,相当于多个declare function x..
interface x{
(参数:类型):返回类型
(参数:类型):返回类型
...
}
命名空间定义,即不暴露在全局,通过.的方式调用其中约束,内部不需要添加declare
declare namespace x{ 对应x.xxxx调用
function xxxx():返回类型 函数
class xxxx{} 类
}
可以和函数重载同名共存,以及其中的函数/类和命名空间嵌套
declare namespace x{ 对象x.xx.xxxx调用
namespace xx{ 嵌套命名空间定义对象的属性对象
function xxxx():返回类型 函数
class xxxx{} 类
}
}
模块类型声明文件(即需要import或require今来的js模块),需要最后export=导出需要对象
示例看底部图
若导出的模块:module.export={ff} ff为一个带一个参数的方法
则声明文件可以写成:
写法一:export只能导出声明或语句
export function ff(p: string): void;
写法二:不能是export {ff:(p:string)=>void}
declare function ff(p: string): void;
export {ff};
写法三:export=导出,导出的内容只能是已经声明的变量,不能直接导出表达式
declare let obj: {ff:(p:string)=>void}
export = obj
若导出的模块直接是一个函数,module.export=ff
declare function ff(p: string): void;
export =ff;
或export default ff;
全局库(script引入的库,如jquery)
直接declare对应声明即可
umd库(既可作为模块,也可作为全局库使用)
除了需要export=导出需要对象
添加:export as namespace 导出需要对象
给三方库添、模块加自定义内容(通过命名空间、接口等通过声明合并添加自定义内容也可以)
declare module '第三方库名' {
export 内容约束; export可选
}
其中:
为了利用好模块扩充,需要确认文件中至少有一个顶级的import或export,哪怕只是一个export {}
任何包含一个顶级import或export的文件都被视为一个“模块”,如果类型声明在模块之外,该声明会覆盖而不是扩充原本的类型
如:
import m from 'moment';
m.self = () => { }
添加:
declare module 'moment' {
export function self(params:void):void
}
给全局变量添加内容
declare global{
namespace 全局变量名称{
内容约束
}
}
4、声明文件中引入其他声明文件
///<reference types='库文件夹路径,会引入其中的index.d.ts文件'>
///<reference path='声明文件路径'>
5、通过npm包下载,然后es6的import引入模块还需要添加(直接script引入忽略这一步)
ts文件中:
import x from 'xx'
.d.ts文件:
declare module 'xx'{
和第3步相同,去掉declare即可
最后导出需要的名称
export=x
}
6、ts文件中使用声明文件内的变量
代码示例:
模块:
umd库:
jquery.d.ts
//声明一个全局变量$,类型是函数,参数是返回类型为空函数,返回值是空
// declare var $:(param:()=>void)=>void
//声明一个全局函数
declare function $(params:()=>void):void
declare function $(param:string):{
html:(html:string)=>{}
}
//声明类
declare class Greeter {
constructor(greeting: string);
greeting: string;
showGreeting(): void;
}
//接口重载
interface JqueryInstance{
html:(html:string)=>JqueryInstance
}
interface Jquery{
(param:()=>void):void
(param:string):JqueryInstance
}
declare var $:Jquery
//命名空间
//new $.fn.init()
//$对象,fn对象,init类/也可以理解成方法
declare namespace ${
namespace fn{
function init():void
class init{}
}
}
//模块写法
declare module 'jquery'{
interface JqueryInstance{
html:(html:string)=>JqueryInstance
}
function $(params:()=>void):void
function $(param:string):{
html:(html:string)=>{}
}
namespace ${
namespace fn{
function init():void
// class init{}
}
}
export=$;
}
ts文件:
$(function(){
$('body').html('<div>123</div>')
new $.fn.init()
});
const myGreeter = new Greeter("hello, world");
myGreeter.greeting = "howdy";
myGreeter.showGreeting();
//模块写法
import $ from 'jquery'
$(function(){
$('body').html('<div>123</div>')
new $.fn.init()
});