TypeScript细碎知识点：.d.ts 声明文件

一、文件类型

TS 中有两种文件类型：

⏰ .ts文件（代码实现文件）

• 1. 既包含类型信息又可执行代码
• 2. 可以被编译为 .js 文件，然后执行代码
• 3. 通常用于编写程序代码的地方

⏰ .d.ts文件（类型声明文件）

• 1. 只包含类型信息的类型声明文件
• 2. 不会生成 .js 文件，仅用于提供类型信息
• 3. 通常用于为 js 提供类型信息。

二、基本用法

创建自己的类型声明文件有两种：

1、项目类共享类型

🔊：如果多个.ts文件中都用到用一个类型，此时可以创建.d.ts文件提供该类型，实现类型共享。

操作步骤：

• 1. 创建 index.d.ts 类型声明文件
• 2. 创建共享的类型，并使用 export 导出（TS中的类型也可以使用import/export实现模块化功能）
• 3. 在需要使用共享类型的 .ts 文件中，通过import导入即可（.d.ts后缀导入时，直接省略）

⏰ index.d.ts文件

type Props = {x: number; y: number;}
export {Props}

⏰a.ts文件

import { Props } from './index'
let pp: Props = {
　　x: 1,
　　y: 2,
}

2、为已有JS文件提供类型声明

一般用于：

• 1. 在将JS项目迁移到TS项目时，为了让已有的 .js 文件有类型声明

• 2. 成为库作者，创建库给其他人使用。

  在导入 .js 文件时，TS会自动加载与 .js 同名的 .d.ts文件，以提供类型声明。
  declare 关键字：用于类型声明，为其他地方（比如：.js文件）一存在的变量声明类型，而不是创建应该新的变量。

• 3. 对于 type、interface 等这些明确就是TS类型的，可以省略declare关键字

• 4. 对于 let、function 等具有双重含义（在JS、TS中都能用），应该使用declare关键字，明确指定此处用于类型声明

⏰ utils.js 文件

let count = 10;
let songName = 'aaa';
let position = {
    x: 0,
    y: 0,
}
function add(x, y) {
    return x + y;
}
function changeDirection(direction) {
    console.log(direction)
}
const fomartPoint = point => {
    console.log('当前坐标：', point)
}
export { count, songName, position, add, changeDirection, fomartPoint }

⏰ utils.d.ts 文件

declare let count: number;
declare let songName: string;
declare let position: Point;
declare funcition add(x: number, y: number): number
declare funcition changeDirection(
    direction: 'up' | 'down' | 'left' | 'right'
): void
declare const fomartPoint: FonmarePoint;

// 类型别名 & 接口 不用 declare 关键字
interface Point {
    x: number;
    y: number;
}
type FomartPoint = (point: Point) => void
        

// 需要导出声明好的类型，才能在其他的 .ts 文件中使用
export { count, songName, position, add, changeDirection, fomartPoint }

三、实际运用

以 .ice 脚手架搭建的 react 项目为例：

⏰ typings.d.ts 文件：

declare module '*.module.less' {
    const classes: { [key: string]: string };
    export default classes;
}

declare module '*.module.css' {
    const classes: { [key: string]: string };
    export default classes;
}

module '*.module.scss' {
    const classes: { [key: string]: string };
    export default classes;
}

declare module '*.svg' {
    const src: string;
    export default src;
}

⏰ tsconfig.json文件：

{
  "compileOnSave": false,
  "buildOnSave": false,
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "build",
    "module": "esnext",
    "target": "es6",
    "jsx": "react-jsx",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "lib": [
      "es6",
      "dom"
    ],
    "sourceMap": true,
    "allowJs": true,
    "rootDir": "./",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": false,
    "importHelpers": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "skipLibCheck": true,
    "paths": {
      "@/*": [
        "./src/*"
      ],
      "ice": [
        ".ice"
      ]
    },
    "resolveJsonModule": true
  },
  "include": [ // include：指定允许ts处理的目录：
    "src",
    ".ice",
    "src/typings.d.ts" // 使用
  ],
  "exclude": [
    "node_modules",
    "build",
    "public"
  ]
}

如果有多个声明文件，目录结构如下所示：

一 typings
丨一 一 flow.d.ts
丨一 一 index.d.ts

tsconfig.json文件：

"include": [
　　"./src/**/*",
　　"./typings/**/*"
],

四、文件声明详情了解

文件声明学习