typescript 声明文件.d.ts

r囧r小猫 2021-07-24 11:15 2461阅读 0赞

所有的引入的js库,需要ts的语法提升等,都必须要有声明文件
    	ts->.d.ts->js
    
    1、创建声明文件
    	xx.d.ts		xx和对应js库文件名称尽量一样,增强可读性
    	
    	常规操作:配置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 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文件中使用声明文件内的变量

代码示例:  
模块:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]umd库:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]

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()
    });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/9cca4788528947848dfaf78123054f74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]: /images/20210724/58f2a7c70a0c43a4bc8a37f4c8acfe6b.png