Detailed explanation of the use of d.ts files

This time I will bring you a detailed explanation of the use of d.ts files. What are the precautions when using d.ts files? Here are practical cases, let’s take a look.

Preface

This article mainly talks about how to write a typescript description file (a file name ending with d.ts, such as xxx.d. ts).

I recently started switching from js to ts. However, some description files (d.ts) are required. Commonly used ones such as jquery can be downloaded through npm to npm install @types/jquery that has been written by others. However, there are still some niche or internal public libraries within the company or public js codes that have been written before that require manual writing of description files.

I also found some information from the Internet before, but it was still unclear. After a period of exploration, I recorded the results of the exploration, and I hope it can give others a reference.

If you only write js, d.ts is also useful for you. Most editors can recognize d.ts files and give you intelligence when you write js code. hint. The effect looks like this:

For details, you can read some articles I have written before: http://www.jb51.net/article/138211.htm

Normally, when we write js, there are two ways to introduce js:

1. Globally introduce global variables in the html file through the <script> tag. </script>

2, require other js files through the module loader: for example, var j=require('jquery').

Global type

First give an example of the first way.

Variable

For example, if there is a global variable now, then the corresponding d.ts file writes like this.

declare var aaa:number

The keyword declare means declaration. The global variable is aaa, and the type is numeric type (number). Of course, it can also be a string type or other type:

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

If it is a constant, use the keyword const to express it:

declare const max:200

Function

From the above We can naturally infer that a global function is written as follows:

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

The last string represents the type of the return value of the function . If the function does not return a value, it can be expressed as void.

When called in js, it will prompt:

The comments we wrote above can also prompt when writing js.

Sometimes the same function has several ways of writing:

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

Then the corresponding way of writing d.ts:

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

If there are some parameters It is optional. You can add a ? to indicate that it is not necessary.

declare function render(callback?:()=>void): string

When calling in js, the callback can be passed or not:

render()
render(function () {
 alert('finish.')
})

class

Of course, in addition to variables and functions, we also have class.

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

constructor represents the construction method:

where static means static , used to represent static variables and static methods:

Object

declare namespace OOO{ 
}

Of course, there may be variables on this object , there may be functions or classes.

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关键字了。
效果：

 

 

 

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

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

效果：

 

混合类型

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

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

既是函数又是对象

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

效果：

作为函数用：

作为对象用：

也就是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

效果：

作为函数使用：

类的静态方法：

类的构造函数：

类的实例方法：

模块化

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

比如这样的效果：

 

对应的写法是这样的：

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

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

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

 

对应的写法很简单，长这个样子：

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

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

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

效果：

 

UMD

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

 

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

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

效果这样：

作为全局变量使用：

作为模块加载使用：

其他

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

 

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

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎么阻止vuex页面刷新后数据清除

vuex里mapState,mapGetters使用详解

操作render执行有哪些方法

The above is the detailed content of Detailed explanation of the use of d.ts files. For more information, please follow other related articles on the PHP Chinese website!