当前位置:网站首页>TypeScript—类型定义文件(*.d.ts)

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

2020-12-08 01:05:49 程序猿欧文

一、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,所以呢,怎么处理这种方式.........

版权声明
本文为[程序猿欧文]所创,转载请带上原文链接,感谢
https://my.oschina.net/mikeowen/blog/4780270