欢迎光临
我的个人博客网站

TypeScript—类型定义文件(*.d.ts)


一、ts文件中引入jquery。
1.大家是否有再vue 上使用过 ts,并再 .ts文件中引用过 jquery

1.1是不是遇到过如下问题:

import $ from 'jquery'; /*** Could not find a declaration file for module 'jquery'. 'd:/node-common/node_modules/jquery/dist/jquery.js' implicitly has an 'any' type.   Try `npm install @types/jquery` if it exists or add a new declaration (.d.ts) file containing `declare module 'jquery';` / 
2.上述提示:

2.1.找不到模块“jquery”的声明文件

2.2.尝试npm install @types/jquery (如果存在的话)

2.3.添加一个包含declare module 'jquery'; 的声明(.d.ts)文件

3.尝试安装 npm install @types/jquery 文件

执行后,发现npm仓库下是有这个包的,而且不需要引用该包,且项目能够正常运行了,是不是很神奇。

其实这里可以理解为,ts文件并不知道jquery文件到底暴露出的什么东西,无法获取。.d.ts 会把jquery 文件里面的方法属性重新定义为它能够认识的类型。

比如说常用到的$.ajax;$.get,在node_modules/types/jquery/JqueryStatic.d.ts 中我们可以看到对其的定义

interface JQueryStatic {     ajax(settings?JQuery.AjaxSettings):Jquery.jqXHR;     get(url: string,         data: JQuery.PlainObject | string,         success: JQuery.jqXHR.DoneCallback | null,         dataType?: string): JQuery.jqXHR; } 

说到这里你可能还不太懂 .d.ts文件怎么去用。

那么接下来和大家一起分享如何在自己的项目中使用.d.ts文件,(如2.3中所说,也可以自己创建.d.ts文件,对jquery 进行定义)。

二、了解下TS数据类型
简单的数据类型:

number:包括数字,浮点数,以及NAN、+-Infinity

string:字符串类型

boolean:布尔类型

null,undefined类型

void类型:可以用于表示没有返回值的函数

对象类型
type ballType = {     color:string;     r:number; } let ball : ballType = {color:'red',r:10}  interface ball2Type{     color:string;     r:number; }  let ball2:ballType = {color:'red',r:0.5}  /*** interface 和 type都可以去定义类型。具体也是有区别 如interface 只能定义function、object、class类型,type 不仅可以定义此类型,还可以定义其它类型 type msg = string; 具体差异可自行查阅资料  */  //顺带着说一下 可选属性  interface ball3Type {     color:string;     r:number;     index?:number // ? 把该属性设为可选属性,即该属性可有可无 } let ball3:ball3type = {color:'red',r:10} //正确 let ball4:ball3type = {color:'red'} //错误,ball3Type 需要有r属性 let ball5:ball3type = {color:'red',r:10,index:1} //正确  //Partial<T> 实现可选属性 //先看一下Partial 类型的定义 type Partial<T> = {     [P in keyof T]?: T[P]; }; let ball6:Partial<ball3Type> = {}//正确 let ball7:Partial<ball3Type> = {r:10} //正确 //实际上 Partial 转化 ball3Type 后,其类型就变成了,每个属性都是可选属性,如下 type Patial_ball3Type = {     color?:string | undefined; // | 如 js 里面的 ‘||’ 或的意思     r?:number | undefined;     index?number | undefined; }  //类型的拓展属性 let ball8:ball3Type = {color:'red',r:10,title:'ball'} //error ,title 属性不属于ball3Type,所以呢,怎么处理这种方式呢,如下:  type ball4Type = {     color:string;     r:number;     index?number;     [key:string]:string|number; // 表示,可含有string类型的key,且值为stirng或number类型。 } let ball9:ball4Type = {color:'red',r:10,title:'ball',x:10,y:10} //正确  
函数类型
//声明函数类型 type funType = (name:string) = >void; let fun:funType = (name)=>{ console.log(name) } //多态 interface fun2Type = {     set(name:string):void;     get(x:number):number; } let fun2:fun2Type = {     set(name){},     get(x){         return x;     } } 

还有一些混合类型,类型的并集,联合,结构子类型等,

//简单列举下类型的并集和联合 type A = {     x:number;     y:number; } type B = {     z:number;     x:number; } let m : A&B = {x:1,y;1,z:1} let z:A|B = {z:1,x:1} 
泛型
//泛型很重要,大家可以查阅资料细看,这里简单列举一下 //函数泛型 function get1<T>(num:T[]):T{     return num[0] } //接口泛型 interface gen2Type<T>{    getColor(ball:T):string;    saveBall(ball:T):void; } //类的泛型 class gen3<T>{     info(i:T):T{         return i;     } } 
三、类
//定义一个类 class A{     //静态成员     static classId:number;     //成员变量,默认为public 公有属性     name:string;     age:number|void;     s?:string;     //构造函数     constructor(name:string,age?:number);     //方法     setS(s:string){         this.s = s;     } }  //通过 new 实例化一个对象 const stu = new A('zhangsan'); const stu1 = new A('lisi',18); stu1.setS("hello"); A.classId = 123; console.log(`A.classId=${A.classId}`)  //类的继承 class A {     name:string;     constructor(name:string){         this.name = name;     } } class B extends A {     age:number;     constructor(name:string,age:number){         super(name);         this.age = age;     } } console.log(new B("zhangsan",18)); // B {name:'zhangsan',age:18}  //接口 interface Ani{     kinds:number;     draw(name:string):void;     getKinds():number; } interface Bni extends Ani{     time:Date;     setTime(time:Date):void; }  //当作变量类型 const M:Bni = {     kinds:1,     time:new Date(),     draw(name:string){},     getKinds(){         return this.kinds;     },     setTime(time:Date){} } //当作接口 class M implements Bni {     kinds = 1;     time = new Date();     draw(name:string){}     getKinds(){         return this.kinds;     }     setTime(time:Date){} } 
四、动手编写.d.ts文件,让ts文件识别js

新建index.js文件

module.exports = {     url:'https://www.cnblogs.com/zcookies/' } 

新建custom.d.ts

//定义模块 declare module '*/index.js'{     const content: {         url:string     };     export = content; } 

入口文件main.ts

import config from './index.js'; console.log(config.url); //此时发现引入index.js 不会报错,而且会智能提示 config下面的url 属性;  /*** 1.如果没有custom.d.ts 代码会抛出:Could not find a declaration file for module './index.js'; 且没有智能提示; 2.如果声明 declare module '*.js',这样做可以解决掉错误提示,但是没有智能提示; 3.想要正确的智能提示,需要按照js文件,输入对应的.d.ts文件即可。 */ 

大家可以利用上面的知识点,实现对更复杂的js文件进行声明.d.ts文件;

赞(0) 打赏
未经允许不得转载:张拓的天空 » TypeScript—类型定义文件(*.d.ts)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏