.d.ts

一、认识

---

当我们在 TS 文件中需要引入外部库时，编译时是无法判断传入参数的类型的，所以我们需要在引入前加入一个声明文件来帮助ts判 断类型。当然现在大部分库都自带有自己的声明文件，一般在@types目录下。

二、语法

---

2.1 声明全局变量

通过 declare let/const 声明全局变量

2.2 声明全局方法

通过 declare function 声明全局方法

2.3 声明全局类

通过 declare class 声明全局类

2.4 声明全局枚举

通过 declare enum 声明全局枚举

2.5 声明全局对象

通 过**declare namespace** 声明全局对象

2.6 声明全局类型

通过 interface/type声明全局类型。interface/type 前面不需要加 declare, 因为编译后的 JavaScript 文件是不能识别 interface/type 的，所以加上 declare 也没有意义。

2.7 声明全局模块

声明自定义模块

declare module "TestModule" {
    type BarType = string | number;
    interface ObjType {
        name:string;
        age:number;
    }
    interface FunType{
        (argu:string):string
    }
    interface FunLinkType{
        fun:(argu:string) => FunLinkType;
    }
}

使用自定义模块

使用模块

import TestModule from 'TestModule'

const num:TestModule.BarType = 3;
const obj:TestModule.ObjType = {
    name:'哈哈',
    age:23
}
const foo:TestModule.FunType = function(argu){
    return argu;
}
foo('哈哈')


const fooLink:TestModule.FunLinkType = {
    fun(argu){
        return fooLink;
    }
}
fooLink.fun('哈哈').fun('嘻嘻');

三、场景

---

3.1 图像

definitions/image.d.ts

declare module "*.jpg" {
  const value: string;
  export default value;
}

declare module "*.jpeg" {
  const value: string;
  export default value;
}

declare module "*.png" {
  const value: string;
  export default value;
}

declare module "*.gif" {
  const value: string;
  export default value;
}

declare module "*.svg" {
  const value: string;
  export default value;
}

declare module "*.bmp" {
  const value: string;
  export default value;
}

declare module "*.webp" {
  const value: string;
  export default value;
}

3.2 字体

definitions/font.d.ts

declare module "*.woff" {
  const value: string;
  export default value;
}

declare module "*.woff2" {
  const value: string;
  export default value;
}

declare module "*.eot" {
  const value: string;
  export default value;
}

declare module "*.ttf" {
  const value: string;
  export default value;
}

declare module "*.otf" {
  const value: string;
  export default value;
}

3.3 语音

definitions/audio.d.ts

declare module "*.mp3" {
  const value: string;
  export default value;
}

declare module "*.wav" {
  const value: string;
  export default value;
}

declare module "*.flac" {
  const value: string;
  export default value;
}

3.4 视频

definitions/video.d.ts

declare module "*.mp4" {
  const value: string;
  export default value;
}

declare module "*.webm" {
  const value: string;
  export default value;
}

declare module "*.ogg" {
  const value: string;
  export default value;
}

declare module "*.avi" {
  const value: string;
  export default value;
}

declare module "*.mov" {
  const value: string;
  export default value;
}

3.5 文件

definitions/file.d.ts

declare module "*.json" {
  const value: any;
  export default value;
}
declare module "*.txt" {
  const value: string;
  export default value;
}

declare module "*.md" {
  const value: string;
  export default value;
}

declare module "*.xml" {
  const value: string;
  export default value;
}

declare module "*.work" {
  const value: string;
  export default value;
}

3.6 样式

definitions/style.d.ts

declare module "*.css" {
  const content: { [className: string]: string };
  export default content;
}

declare module "*.scss" {
  const content: { [className: string]: string };
  export default content;
}

declare module "*.less" {
  const content: { [className: string]: string };
  export default content;
}

declare module "*.module.css" {
  const content: { [className: string]: string };
  export default content;
}

declare module "*.module.scss" {
  const content: { [className: string]: string };
  export default content;
}

declare module "*.module.less" {
  const content: { [className: string]: string };
  export default content;
}

四、配置

---

为了使 TypeScript 正确加载这些类型声明文件，你还需要确保在 tsconfig.json 中包含了 include 配置项，确保编译器能够找到这些 .d.ts 文件。

"include": ["src/**/*", "definitions/**/*"],
"exclude": ["node_modules", "dist"]