ts定义html是什么类型,JavaScript 和 TypeScript 交叉口 —— 类型定义文件(*.d.ts)

这篇文章有更新！！！！请去 原文 阅读！！！

在 《从 JavaScript 到 TypeScript 系列》 文章我们已经学习了 TypeScript 相关的知识。

TypeScript 的核心在于静态类型，我们在编写 TS 的时候会定义很多的类型，但是主流的库都是 JavaScript 编写的，并不支持类型系统。那么如何让这些第三方库也可以进行类型推导呢？

这篇文章我们来讲解 JavaScript 和 TypeScript 的静态类型交叉口 —— 类型定义文件。

这篇文章首发于我的个人博客 《听说》。

前端开发 QQ 群：377786580

类型定义文件

在 TypeScript 中，我们可以很简单的，在代码编写中定义类型：

interface IBaseModel {

say(keys: string[] | null): object

}

class User implements IBaseModel {

name: string

constructor (name: string) {

this.name = name

}

}

但是主流的库都是 JavaScript 编写的，TypeScript 身为 JavaScript 的超集，自然需要考虑到如何让 JS 库也能定义静态类型。

TypeScript 经过了一系列的摸索，先后提出了 tsd(已废弃)、typings(已废弃)，最终在 TypeScript 2.0 的时候重新整理了类型定义，提出了 DefinitelyTyped。

DefinitelyTyped 就是让你把 "类型定义文件(*.d.ts)"，发布到 npm 中，配合编辑器(或插件)，就能够检测到 JS 库中的静态类型。

类型定义文件的以 .d.ts 结尾，里面主要用来定义类型。

例如这是 jQuery 的类型定义文件 中一段代码(为了方便理解做了一些改动)

// 定义 jQuery 需要用到的类型命名空间

declare namespace JQuery {

// 定义基本使用的类型

type Selector = string;

type TypeOrArray = T | T[];

type htmlString = string;

}

// 定义 jQuery 接口，jquery 是一个 包含 Element 的集合

interface JQuery extends Iterable {

length: number;

eq(index: number): this;

// 重载

add(selector: JQuery.Selector, context: Element): this;

add(selector: JQuery.Selector | JQuery.TypeOrArray | JQuery.htmlString | JQuery): this;

children(selector?: JQuery.Selector): this;

css(propertyName: string): string;

html(): string;

}

<