typescript 声明文件.d.ts

所有的引入的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()
});