如何编写 Typescript 声明文件

使用TypeScript已经有了一段时间，这的确是一个好东西，虽说在使用的过程中也发现了一些bug，不过都是些小问题，所以整体体验还是很不错的。

TypeScript之所以叫Type，和它的强类型是分不开的，这也是区别于JavaScript最关键的一点，类型的声明可以直接写在代码中，也可以单独写一个用来表示类型的描述文件*.d.ts。

常用方式

首先在d.ts中是不会存在有一些简单的基本类型定义的（因为这些都是写在表达式、变量后边的，在这里定义没有任何意义），声明文件中定义的往往都是一些复杂结构的类型。

大部分语法都与写在普通ts文件中的语法一致，也是export后边跟上要导出的成员。

最简单的就是使用type关键字来定义：

type A = {                 // 定义复杂结构
  b: number
  c: string
}

type Func = () => number   // 定义函数

type Key = number | string // 多个类型

组合类型

以及在TypeScript中有着很轻松的方式针对type进行复用，比如我们有一个Animal类型，以及一个Dog类型，可以使用&来进行复用。

P.S> &符号可以拼接多个

type Animal = {
  weight: number
  height: number
}

type Dog = Animal & {
  leg: number
}

动态的 JSON 类型指定

如果我们有一个JSON结构，而它的key是动态的，那么我们肯定不能将所有的key都写在代码中，我们只需要简单的指定一个通配符即可：

type info = {
  [k: string]: string | number // 可以指定多个类型
}

const infos: info = {
  a: 1,
  b: '2',
  c: true, // error 类型不匹配
}

以及在新的版本中更推荐使用内置函数Record来实现：

const infos: Record<string, string | number> = {
  a: 1,
  b: '2',
  c: true, // error
}

获取变量的类型

假如我们有一个JSON对象，里边包含了name、age两个属性，我们可以通过一些TypeScript内置的工具函数来实现一些有意思的事情。

通过keyof与typeof组合可以得到我们想要的结果：

const obj = {
  name: 'Niko',
  age: 18
}

// 如果是这样的取值，只能写在代码中，不能写在 d.ts 文件中，因为声明文件里边不能存在实际有效的代码
type keys = keyof typeof obj

let a: keys = 'name' // pass
let b: keys = 'age'  // pass

let c: keys = 'test' // error

而如果我们想要将一个类型不统一的JSON修改为统一类型的JSON也可以使用这种方式：

const obj = {
  name: 'Niko',
  age: 18,
  birthday: new Date()
}

const infos: Record<keyof typeof obj, string> = {
  name: '',
  age: '',
  birthday: 123, // 出错，提示类型不匹配
  test: '', // 提示不是`info`的已知类型
}

获取函数的返回值类型

又比如说我们有一个函数，函数会返回一个JSON，而我们需要这个JSON来作为类型。

那么可以通过ReturnType<>来实现：

function func () {
  return {
    name: 'Niko',
    age: 18
  }
}

type results = ReturnType<typeof func>

// 或者也可以拼接 keyof 获取所有的 key
type resultKeys = keyof ReturnType<typeof func>

// 亦或者可以放在`Object`中作为动态的`key`存在
type infoJson = Record<keyof ReturnType<typeof func>, string>

在代码中声明函数和class类型

因为我们知道函数和class在创建的时候是都有实际的代码的（函数体、构造函数）。
但是我们是写在d.ts声明文件中的，这只是一个针对类型的约束，所以肯定是不会存在真实的代码的，但是如果在普通的ts文件中这么写会出错的，所以针对这类情况，我们需要使用declare关键字，表示我们这里就是用来定义一个类型的，而非是一个对象、函数：

class Personal {
  name: string
  // ^ 出错了，提示`name`必须显式的进行初始化
}

function getName (personal: Personal): name
// ^ 出错了，提示函数缺失实现

以下为正确的使用方式：

-declare class Personal {
+declare class Personal {
  name: string
}

-function getName (personal: Personal): name
+declare function getName (personal: Personal): name

当然了，一般情况下是不建议这么定义class的，应该使用interface来代替它，这样的class应该仅存在于针对非TS模块的描述，如果是自己开发的模块，那么本身结构就具有声明类型的特性。

函数重载

这个概念是在一些强类型语言中才有的，依托于TypeScript，这也算是一门强类型语言了，所以就会有需要用到这种声明的地方。

例如我们有一个add函数，它可以接收string类型的参数进行拼接，也可以接收number类型的参数进行相加。

需要注意的是，只有在做第三方插件的函数重载定义时能够放到d.ts文件中，其他环境下建议将函数的定义与实现放在一起（虽说配置paths也能够实现分开处理，但是那样就失去了对函数创建时的约束）

// index.ts

// 上边是声明
function add (arg1: string, arg2: string): string
function add (arg1: number, arg2: number): number
// 因为我们在下边有具体函数的实现，所以这里并不需要添加 declare 关键字

// 下边是实现
function add (arg1: string | number, arg2: string | number) {
  // 在实现上我们要注意严格判断两个参数的类型是否相等，而不能简单的写一个 arg1 + arg2
  if (typeof arg1 === 'string' && typeof arg2 === 'string') {
    return arg1 + arg2
  } else if (typeof arg1 === 'number' && typeof arg2 === 'number') {
    return arg1 + arg2
  }
}

TypeScript 中的函数重载也只是多个函数的声明，具体的逻辑还需要自己去写，他并不会真的将你的多个重名 function 的函数体进行合并

多个函数的顺序问题

想象一下，如果我们有一个函数，传入Date类型的参数，返回其unix时间戳，如果传入Object，则将对象的具体类型进行toString输出，其余情况则直接返回，这样的一个函数应该怎么写？

仅做示例演示，一般正常人不会写出这样的函数...

function build (arg: any) {
  if (arg instanceof Date) {
    return arg.valueOf()
  } else if (typeof arg === 'object') {
    return Object.prototype.toString.call(arg)
  } else {
    return arg
  }
}

但是这样的函数重载在声明的顺序上就很有讲究了，一定要将精确性高的放在前边：

// 这样是一个错误的示例，因为无论怎样调用，返回值都会是`any`类型
function build(arg: any): any
function build(arg: Object): string
function build(arg: Date): number

因为TypeScript在查找到一个函数重载的声明以后就会停止不会继续查找，any是一个最模糊的范围，而Object又是包含Date的，所以我们应该按照顺序从小到大进行排列：

function build(arg: Date): number
function build(arg: Object): string
function build(arg: any): any

// 这样在使用的时候才能得到正确的类型提示
const res1 = build(new Date()) // number
const res2 = build(() => { })  // string
const res3 = build(true)       // any

一些不需要函数重载的场景

函数重载的意义在于能够让你知道传入不同的参数得到不同的结果，如果传入的参数不同，但是得到的结果（类型）却相同，那么这里就不要使用函数重载（没有意义）。

如果函数的返回值类型相同，那么就不需要使用函数重载

function func (a: number): number
function func (a: number, b: number): number

// 像这样的是参数个数的区别，我们可以使用可选参数来代替函数重载的定义
function func (a: number, b?: number): number
// 注意第二个参数在类型前边多了一个`?`

// 亦或是一些参数类型的区别导致的
function func (a: number): number
function func (a: string): number

// 这时我们应该使用联合类型来代替函数重载
function func (a: number | string): number

Interface

interface是在TypeScript中独有的，在JavaScript并没有interface一说。
因为interface只是用来规定实现它的class对应的行为，没有任何实质的代码，对于脚本语言来说这是一个无效的操作

在语法上与class并没有什么太大的区别，但是在interface中只能够进行成员属性的声明，例如function只能够写具体接收的参数以及返回值的类型，并不能够在interface中编写具体的函数体，同样的，针对成员属性也不能够直接在interface中进行赋值：

// 这是一个错误的示例
interface PersonalIntl {
  name: string = 'Niko'

  sayHi (): string {
    return this.name
  }
}

// 在 interface 中只能存在类型声明
interface PersonalIntl {
  name: string

  sayHi (): string
}

其实在一些情况下使用interface与普通的type定义也没有什么区别。
比如我们要导出一个存在name和age两个属性的对象：

// types/personal.d.ts
export interface PersonalIntl {
  name: string
  age:  number
}

// index.d.ts
import { PersonalIntl } from './types/personal'

const personal: PersonalIntl = {
  name: 'Niko',
  age:  18,
}

如果将interface换成type定义也是完全没问题的：

// types/personal.d.ts
export type PersonalIntl = {
  name: string
  age:  number
}

这样的定义在基于上边的使用是完全没有问题的，但是这样也仅仅适用于Object字面量的声明，没有办法很好的约束class模式下的使用，所以我们采用interface来约束class的实现：

import { PersonalIntl } from './types/personal'

class Personal implements PersonalIntl {
  constructor(public name: string, public age: number) { }

  // 上边的简写与下述代码效果一致

  public name: string
  public age: number

  constructor (name: string, age: number) {
    this.name = name
    this.age = age
  }
}

const personal = new Personal('niko', 18)

关于函数成员声明的一些疑惑

首先，在接口中有两种方式可以定义一个函数，一个被定义在实例上，一个被定义在原型链上。
两种声明方式如下：

interface PersonalIntl {
  func1 (): any      // 实例属性

  func2: () => any   // 原型链属性
}

但是我们在实现这两个属性时其实是可以互相转换的，并没有强要求必须使用哪种方式：

class Personal implements PersonalIntl {
  func1 () {
    console.log(this)
  }

  func2 = () => {
    console.log(this)
  }
}

其实这两者在编译后的JavaScript代码中是有区别的，并不清楚这是一个bug还是设计就是如此，类似这样的结构：

var Personal = /** @class */ (function () {
    function Personal() {
        var _this = this;
        this.func2 = function () {
            console.log(_this);
        };
    }
    Personal.prototype.func1 = function () {
        console.log(this);
    };
    return Personal;
}());

所以在使用的时候还是建议最好按照interface定义的方式来创建，避免一些可能存在的奇奇怪怪的问题。

接口声明的自动合并

因为interface是TypeScript特有的，所以也会有一些有意思的特性，比如相同命名的interface会被自动合并：

interface PersonalIntl {
  name: string
}

interface PersonalIntl {
  age: number
}

class Personal implements PersonalIntl {
  name = 'Niko'
  age = 18
}

不要在 interface 中使用函数重载

在interface中使用函数重载，你会得到一个错误的结果，还是拿上边的build函数来说，如果在interface中声明，然后在class中实现，那么无论怎样调用，返回值的类型都会认为是any。

所以正确的做法是在class中声明重载，在class中实现，interface中最多只定义一个any，而非三个重载。

class Util implements UtilIntl {
  build(arg: Date): number
  build(arg: Object): string
  build(arg: any): any

  build(arg: any) {
    if (arg instanceof Date) {
      return arg.valueOf()
    } else if (typeof arg === 'object') {
      return Object.prototype.toString.call(arg)
    } else {
      return arg
    }
  }
}

小结

有关TypeScript声明类型声明相关的目前就总结了这些比较常用的，欢迎小伙伴们进行补充。

在之前的版本中有存在module和namespace的定义，但是目前来看，好像更推荐使用 ES-Modules 版本的 import/export来实现类似的功能，而非自定义的语法，所以就略过了这两个关键字相关的描述

官方文档中有针对如何编写声明文件的模版，可以参考：传送阵

参考资料

原文地址：https://www.cnblogs.com/jiasm/p/9789962.html

时间： 2024-08-14 10:29:05

如何编写 Typescript 声明文件的相关文章

TypeScript学习笔记（八） - 声明文件

本篇将介绍TypeScript的声明文件,并简单演示一下如何编写和使用声明文件.本篇也是这个系列的最后一篇. 一.声明文件简介 TypeScript作为JavaScript的超集,在开发过程中不可避免要引用其他第三方的JavaScript的库.虽然通过直接引用可以调用库的类和方法,但是却无法使用TypeScript诸如类型检查等特性功能.为了解决这个问题,需要将这些库里的函数和方法体去掉后只保留导出类型声明,而产生了一个描述JavaScript库和模块信息的声明文件.通过引用这个声明文件,就可以

TypeScript 之 声明文件的发布

https://www.tslang.cn/docs/handbook/declaration-files/publishing.html 发布声明文件到npm,有两种方式: 与你的npm包捆绑在一起(推荐) 发布到npm上的@types organization. 包含声明文件到你的npm包 如果你的包有一个主.js文件,你还是需要在package.json里指定主声明文件. 设置 types属性指向捆绑在一起的声明文件. 比如: { "name": "awesome&qu

三、eggjs学习记录 - typescript声明放到types里面

如果项目需要做为一个模块被其它项目引用到,并用其它项目是用typescript写的, 这就需要兼容typescript, 需要把要导出的变量或者模块在types 目录里声明.对应的目录(文件名称)结构与真正的逻辑代码一致,只不过文件后缀改成.d.ts 就可以,不会被外部直接导入的文件,不需要写声明文件. //比如目录结构为: /** project/index.js, project/demo.js project/other/other.js */ //则可以增加声明文件: /** eggs/

利用windows系统ftp命令编写的BAT文件上传[转]

利用windows系统ftp命令编写的BAT文件上传[转] 利用windows系统ftp命令编写的BAT文件上传[转] 在开发中往往需要将本地的程序上传到服务器,而且用惯了linux命令的人来说.在windows下就比较麻烦了.为了方便特编写一个BAT程序来帮助需要这样功能的人.如果用其他IDE工具自带的FTP功能也可以,^_^!      命令: todev.bat /index.asp  默认d:\cnweb为网站的根目录.      我的 http://www.lawcar.cn/ htt

Csharp调用基于Opencv编写的类库文件

现在将Csharp调用基于Opencv编写的类库文件(Dll)的方法定下来,我取名叫做GreenOpenCsharpWarper,简称GOCW. 一.CLR编写的DLL部分 1.按照正常方法引入Opencv; 2.提供接口函数,进行图像处理(这里只是实现了cvtColor,实际过程中可以用自己编写的复杂函数) String^  Class1::Method(cli::array<unsigned char>^ pCBuf1){     pin_ptr<System::Byte> p

怎样编写注册表文件

有很多时候我们需要对注册表进行修改,而打开注册表编辑器一项一项的改又很麻烦,特别是注册表被锁无法打开时,这时候就需要编写一些reg文件导入注册表.下面就简单介绍一个.reg文件的编写规则,很简单.(对注册表操作具有一定的危险性,新手尝试时最好先做好备份.) 首先新建一个文本文档,并将文件名后缀的.txt改成.reg,然后右键编辑,这样我们就可以编写注册表文件了.先说明一下,注册表文件中的;号后面的内容是注释,导入时会忽略这些内容. 文件的第一行为:REGEDIT4;或Winddows Regis

第三百四十一节，Python分布式爬虫打造搜索引擎Scrapy精讲—编写spiders爬虫文件循环抓取内容—

第三百四十一节,Python分布式爬虫打造搜索引擎Scrapy精讲-编写spiders爬虫文件循环抓取内容- 编写spiders爬虫文件循环抓取内容 Request()方法,将指定的url地址添加到下载器下载页面,两个必须参数, 参数: url='url' callback=页面处理函数 使用时需要yield Request() parse.urljoin()方法,是urllib库下的方法,是自动url拼接,如果第二个参数的url地址是相对路径会自动与第一个参数拼接 # -*- coding:

angular2^ typescript 将 文件和Json数据 合并发送到服务器（1.客户端处理）

首先介绍下框架基本流程   (web > webservice  [前端架构] ) > (nodejs [ 数据中转站 ]) >(api [后台接口]) --web (html  angular 框架) --webservice(angular 中 编写的service文件 ,在此处原本可以使用 [ng2-file-upload]插件 文件+参数 合并提交,但是在我的项目中  请求需要统一提交,所以在此处 使用第三方插件不太适用 所以自己编写了XMLHttpRequest 进行 form

为项目编写Readme.MD文件(转自OneCoder)

点击原文--->为项目编写Readme.MD文件 两个Markdown的编辑器. 在线编辑器:stackedit网址:https://stackedit.io/ Mac下离线编辑器Mou下载地址:http://mouapp.com/ 也可以手动用语法写,下面是语法 Markdown 语法速查表1 标题与文字格式标题# 这是 H1 <一级标题>## 这是 H2 <二级标题>###### 这是 H6 <六级标题>文字格式**这是文字粗体格式***这是文字斜体格式*~~