How to make d.ts file-JS Tutorial-php.cn

This time I will show you how to make a d.ts file and what are the precautions for making a d.ts file. The following is a practical case, 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 smart prompts when you write js code. 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 tag.

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 Copy after login 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 something else:

declare var aaa:number|string //注意这里用的是一个竖线表示"或"的意思 Copy after login If it is a constant, use the keyword const to express it:

declare const max:200 Copy after login Function

From the above From the way of writing global variables, we can naturally infer that the way of writing a global function is as follows:

/** id是用户的id，可以是number或者string */ decalre function getName(id:number|string):string Copy after login 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) Copy after login Then the corresponding way of writing d.ts:

declare function get(id: string | number): string declare function get(name:string,age:number): string Copy after login 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 Copy after login When calling in js, the callback can be passed or not:

render() render(function () { alert('finish.') }) Copy after login 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 } Copy after login constructor represents the construction method:

where static means static and is used to represent static variables And static methods:

Object

declare namespace OOO{ } Copy after login Of course, this object may have variables, functions, or kind.

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 //实例方法 } } Copy after login In fact, put the above writing methods into the curly brackets enclosed by this namespace. Note that the declare keyword is not needed inside the brackets. Effect:

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

declare namespace OOO{ var aaa: number | string // ... namespace O2{ let b:number } } Copy after login 效果：

混合类型

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

new $() $.ajax() $() Copy after login 既是函数又是对象

declare function $2(s:string): void declare namespace $2{ let aaa:number } Copy after login 效果：

作为函数用：

作为对象用：

也就是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 Copy after login 效果：

作为函数使用：

类的静态方法：

类的构造函数：

类的实例方法：

模块化

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

比如这样的效果：

对应的写法是这样的：

declare module "abcde" { export let a: number export function b(): number export namespace c{ let cd: string } } Copy after login 其实就是外面套了一层 module "xxx"，里面的写法和之前其实差不多，把declare换成了export。

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

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

declare module "app" { function aaa(some:number):number export=aaa } Copy after login 以此类推，导出一个变量或常量的话这么写：

declare module "ccc" { const c:400 export=c } Copy after login 效果：

UMD

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

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

declare namespace UUU{ let a:number } declare module "UUU" { export =UUU } Copy after login 效果这样：

作为全局变量使用：

作为模块加载使用：

其他

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

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

interface Date { format(f: string): string } Copy after login 相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

How to make d.ts file