【TS】declare 声明文件

一、文件类型

TS 中有两种文件类型：

• .ts文件（代码实现文件）
• .d.ts文件（类型声明文件）

• .ts文件

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

• .d.ts文件

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

二、基本用法

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

1. 项目类共享类型
2. 为已有JS文件提供类型声明

2.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.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;
interface Point {
	x: number;
	y: number;
}
declare let position: Point;
declare funcition add(x:number, y:number):number
declare funcition  changeDirection(
	direction: 'up' | 'down' | 'left' | 'right'
): void
type FomartPoint = (point: Point)=>void
declare const fomartPoint: FonmarePoint;

// 需要导出声明好的类型，才能在其他的 .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/**/*"
  ],