TypeScript实例讲解（二十三）

这是我参与11月更文挑战的第23天，活动详情查看：2021最后一次更文挑战

接上一篇：TypeScript实例讲解（二十二）

本篇内容：TypeScript 类型定义文件（二）。

函数重载

// 例 1
// demo.ts
$(function () {
    $('body').html('hello');
})

// jquery.d.ts
interface JqueryInstance {
    html: (html: string) => JqueryInstance
}
interface JQuery {
    (param: () => void): void;
    (param: string): JqueryInstance;
}
declare var $: JQuery;

上一篇文章 通过定义同名函数实现函数重载，这里使用 interface 接口的语法，重新实现了函数重载。

对象及类的类型定义

// 例 2
// demo.ts
$(function () {
    new $.fn.init();
})

new 一个 $.fn.init() 这样的类或构造函数。编辑器会提升错误说 fn 不存在，因为 TypeScript 是不知道 $ 下面包含 fn 的。那需要写这样的类型定义文件应该怎么写呢？

上一篇文章 讲解了如何对全局函数进行类型定义，这里继续讲解如何对对象进行类型定义，以及对类进行类型定义。

// 例 3
// jquery.d.ts
declare function $(param: () => void): void;
declare function $(param: string): JqueryInstance;

declare namespace $ {
    namespace fn {
        class init {}
    }
}

使用 namespace 构建 $ 对象，因为 $ 下面的 fn 也是一个对象，所有用到了命名空间嵌套。
使用 class 对 init 构造函数进行定义。

模块化的类型定义文件

不使用 CDN 的方式引入库文件，而使用模块化的方式引入，如 npm 安装 JQuery 包。当通过 import $ from 'jquery' 引入 jQuery 时提示找不到 jquery 模块。

// 例 4
// demo.ts
import $ from 'jquery'

// jquery.d.ts
declare module 'jquery' {
    interface JqueryInstance {
        html: (html: string) => JqueryInstance
    }

    function $(param: () => void): void;
    function $(param: string): JqueryInstance;

    namespace $ {
        namespace fn {
            class init {}
        }
    }
    export = $;
}

例4通过 ES6 模块化定义一个模块为 jquery，并把函数重载的代码放到对象里面，相当于使用了混合定义。

说明：
1、模块里面就不需要使用 declare 关键字了。
2、记得最后需要把 $ 导出。

声明文件语法总结

声明文件的语法包括：
declare var 声明全局变量
declare function 声明全局方法
declare class 声明全局类
declare enum 声明全局枚举类型
declare namespace 声明（含有子属性的）全局对象
interface 和 type 声明全局类型
export 导出变量
export namespace 导出（含有子属性的）对象
export default ES6 默认导出
export = commonjs 导出模块
export as namespace UMD 库声明全局变量，UMD 固定语法。
declare global 扩展全局变量
declare module 扩展模块
/// <reference /> 三斜线指令

本篇完！如果文章对你有一点点帮助，请记得点个赞哦。