typescript声明⽂件.d.ts
所有的引⼊的js库，需要ts的语法提升等，都必须要有声明⽂件
ts->.d.ts->js
1、创建声明⽂件
重庆美联xx.d.ts xx和对应js库⽂件名称尽量⼀样，增强可读性
位置:
TypeScript会⾃动加载的src/typings⽂件夹中
对于库/插件作者来说，这个⽂件应该被定义在package.json的types property⾥
常规操作：配置tsconfig.json，设置声明⽂件解析路径
"baUrl":".", 配置解析基本路径,"."表⽰根⽬录
"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..
2013年考研政治真题
interface x{
(参数：类型)：返回类型
(参数：类型)：返回类型
...
}
命名空间定义，即不暴露在全局，通过.的⽅式调⽤其中约束，内部不需要添加declare
declare namespace x{ 对应x.xxxx调⽤
function xxxx()：返回类型函数
class xxxx{} 类
}
可以和函数重载同名共存，以及其中的函数/类和命名空间嵌套
declare namespace x{ 对象调⽤
namespace xx{ 嵌套命名空间定义对象的属性对象
function xxxx()：返回类型函数
function xxxx()：返回类型函数
class xxxx{} 类
}
}
模块类型声明⽂件(即需要import或require今来的js模块)，需要最后export=导出需要对象
⽰例看底部图
若导出的模块:port={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
若导出的模块直接是⼀个函数,port=ff
declare function ff(p: string): void;
export =ff;
或export default ff;
全局库(script引⼊的库，如jquery)
直接declare对应声明即可
umd库(既可作为模块，也可作为全局库使⽤)
除了需要export=导出需要对象
添加:export as namespace 导出需要对象
给三⽅库添、模块加⾃定义内容(通过命名空间、接⼝等通过声明合并添加⾃定义内容也可以)
declare module '第三⽅库名' {
export 内容约束; export可选doulton
}autopatch
其中:
为了利⽤好模块扩充，需要确认⽂件中⾄少有⼀个顶级的import或export，哪怕只是⼀个export {}
chew任何包含⼀个顶级import或export的⽂件都被视为⼀个“模块”，如果类型声明在模块之外，该声明会覆盖⽽不是扩充原本的类型如:
import m from 'moment';
m.lf = () => { }
添加:
declare module 'moment' {
export function lf(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;
style是什么意思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{}
mop
}
}
//模块写法
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"); ing ="howdy"; myGreeter.showGreeting();
//模块写法
import $ from'jquery'
$(function(){
$('body').html('<div>123</div>')
new $.fn.init()
});
winch
