前言

本文主要讲怎么写一个typescript的描述文件(以d.ts结尾的文件名,比如xxx.d.ts)。

最近开始从js转ts了。但是要用到一些描述文件(d.ts),常用的比如jquery等都可以通过 npm下载到别人已经写好的npm install @types/jquery。但是还是有一些小众的或者公司内部的公共库或者以前写过的公用js代码需要自己手动写描述文件。

之前也从网上面也找了一些资料,但还是看的云里雾里模糊不清,经过一段摸索,将摸索的结果记录下来,也希望可以给别人一个参考。

如果你只写js,d.ts对你来说也是有用的,大部分编辑器能识别d.ts文件,当你写js代码的时候给你智能提示。效果像这样:

如何编写一个d.ts文件的步骤详解

详情可以看我以前写过的一些文章:https://www.jb51.net/article/138211.htm

通常,我们写js的是时候有两种引入js的方式:

1,在html文件中通过<script>标签全局引入全局变量。

2,通过模块加载器require其他js文件:比如这样var j=require('jquery')。

全局类型

首先以第一种方式举例。

变量

比如现在有一个全局变量,那对应的d.ts文件里面这样写。

declare var aaa:number

其中关键字declare表示声明的意思。全局变量是aaa,类型是数字类型(number)。当然了也可以是string类型或者其他或者:

declare var aaa:number|string //注意这里用的是一个竖线表示"或"的意思

如果是常量的话用关键字const表示:

declare const max:200

函数

由上面的全局变量的写法我们很自然的推断出一个全局函数的写法如下:

/** id是用户的id,可以是number或者string */
decalre function getName(id:number|string):string

最后的那个string表示的是函数的返回值的类型。如果函数没有返回值可以用void表示。

在js里面调用的时候就会提示:

如何编写一个d.ts文件的步骤详解

我们上面写的注释,写js的时候还可以提示。

有时候同一个函数有若干种写法:

如何编写一个d.ts文件的步骤详解

get(1234)
get("zhangsan",18)

那么d.ts对应的写法:

declare function get(id: string | number): string
declare function get(name:string,age:number): string

如果有些参数可有可无,可以加个"htmlcode">

declare function render(callback"htmlcode">
render()
render(function () {
 alert('finish.')
})

class

当然除了变量和函数外,我们还有类(class)。

declare class Person {
 static maxAge: number //静态变量
 static getMaxAge(): number //静态方法
 constructor(name: string, age: number) //构造函数
 getName(id: number): string 
}

constructor表示的是构造方法:

如何编写一个d.ts文件的步骤详解 

如何编写一个d.ts文件的步骤详解 

其中static表示静态的意思,用来表示静态变量和静态方法:

如何编写一个d.ts文件的步骤详解 

如何编写一个d.ts文件的步骤详解 

对象

declare namespace OOO{ 
}

当然了这个对象上面可能有变量,可能有函数可能有类。

declare namespace OOO{
 var aaa: number | string
 function getName(id: number | string): string
 class Person {
 static maxAge: number //静态变量
 static getMaxAge(): number //静态方法
 constructor(name: string, age: number) //构造函数
 getName(id: number): string //实例方法
 }
}

其实就是把上面的那些写法放到这个namespace包起来的大括号里面,注意括号里面就不需要declare关键字了。
效果:

如何编写一个d.ts文件的步骤详解 

如何编写一个d.ts文件的步骤详解 

如何编写一个d.ts文件的步骤详解 

对象里面套对象也是可以的:

declare namespace OOO{
 var aaa: number | string
 // ...
 namespace O2{
 let b:number
 }
}

效果:

如何编写一个d.ts文件的步骤详解 

混合类型

有时候有些值既是函数又是class又是对象的复杂对象。比如我们常用的jquery有各种用法:

new $()
$.ajax()
$()

既是函数又是对象

declare function $2(s:string): void
declare namespace $2{
 let aaa:number
}

效果:

作为函数用:

如何编写一个d.ts文件的步骤详解

作为对象用:

如何编写一个d.ts文件的步骤详解

也就是ts会自动把同名的namespace和function合并到一起。

既是函数,又是类(可以new出来)

// 实例方法 
interface People{
 name: string
 age: number
 getName(): string
 getAge():number
}
interface People_Static{
 new (name: string, age: number): People
 /** 静态方法 */
 staticA():number
 
 (w:number):number
}
declare var People:People_Static

效果:

作为函数使用:

如何编写一个d.ts文件的步骤详解

类的静态方法:

如何编写一个d.ts文件的步骤详解

类的构造函数:

如何编写一个d.ts文件的步骤详解

类的实例方法:

如何编写一个d.ts文件的步骤详解

模块化

除了上面的全局的方式,我们有时候还是通过require的方式引入模块化的代码。

比如这样的效果:

如何编写一个d.ts文件的步骤详解 

对应的写法是这样的:

declare module "abcde" {
 export let a: number
 export function b(): number
 export namespace c{
  let cd: string
 }
 }

其实就是外面套了一层 module "xxx",里面的写法和之前其实差不多,把declare换成了export。

此外,有时候我们导出去的是一个函数本身,比如这样的:

如何编写一个d.ts文件的步骤详解 

对应的写法很简单,长这个样子:

declare module "app" {
 function aaa(some:number):number
  export=aaa
 }

以此类推,导出一个变量或常量的话这么写:

declare module "ccc" {
 const c:400
  export=c
 }

效果:

如何编写一个d.ts文件的步骤详解 

UMD

有一种代码,既可以通过全局变量访问到,也可以通过require的方式访问到。比如我们最常见的jquery:

 如何编写一个d.ts文件的步骤详解

如何编写一个d.ts文件的步骤详解

其实就是按照全局的方式写d.ts,写完后在最后加上declare namespace "xxx"的描述:

declare namespace UUU{
 let a:number
}
 
declare module "UUU" {
 export =UUU
}

效果这样:

作为全局变量使用:

如何编写一个d.ts文件的步骤详解

作为模块加载使用:

如何编写一个d.ts文件的步骤详解

其他

有时候我们扩展了一些内置对象。比如我们给Date增加了一个format的实例方法:

如何编写一个d.ts文件的步骤详解 

对应的d.ts描述文件这样写:

interface Date {
 format(f: string): string
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。

华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。