TypeScript：创建自己的类型声明文件（针对为已有JS文件提供类型声明的情况）

在使用TS进行项目开发的时候，有两种情况下需要创建自己的类型声明文件：
1）项目内共享类型。
2）为已有的JS文件提供类型声明。

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

说明

为已有JS文件提供类型声明，又分两种情况：
1）在将JS项目迁到TS项目时，为了让已有的.js文件有类型声明。
2）成为库作者，创建库给其他人使用。

注意：类型声明文件的编写与模块化方式相关，不同的模块化方式有不同的写法。TS支持各种模块化形式的类型声明。
https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html

环境搭建

下面的示例基于ESModule（import/export）来为已有的 .js文件，创建类型声明文件。
开发环境准备：使用webpack搭建，通过ts-loader处理.ts文件。

项目的package.json文件：

{
  "name": "ts-demo",
  "version": "1.0.0",
  "main": "src/index.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack serve --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "css-loader": "^7.1.2",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.6.0",
    "style-loader": "^4.0.0",
    "ts-loader": "^9.5.1",
    "typescript": "^5.5.4",
    "url-loader": "^4.1.1",
    "webpack": "^5.93.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4"
  }
}

在vscode集成终端中运行命令tsc --init，自动在项目目录下生成tsconfig.json文件：

webpack.config.js文件：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },

  resolve: {
    // 哪些文件类型可省略后缀名称
    extensions: ['.js', '.ts', '.tsx']
  },

  devtool: 'eval-cheap-module-source-map',

  devServer: {
    open: true,
    hot: true,
    port: 9000
  },

  module: {
    rules: [
      // 处理 .ts or .tsx 文件
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html')
    })
  ]
}

执行npm run dev启动项目：

在浏览器控制台可以看到，项目正常启动了：

为已有js文件提供类型声明文件

说明：TS项目中也可以使用.js文件。
说明：在导入.js文件时，TS会自动加载与.js同名的.d.ts文件，以提供类型声明。
所以，在提供类型声明文件的时候，只要文件名和.js文件的文件名相同，然后以.d.ts后缀结尾，不需要额外的导入类型声明文件。

declare关键字：用于类型声明，为其它地方（例如.js文件）已存在的变量声明类型，而不是创建一个新的变量。
1）对于type、interface等这些明确就是TS类型的（只能在TS中使用的），可以省略declare关键字。
2）对于let、function等具有双重含义（在JS、TS中都能使用），应该使用declare关键字，明确指定此处用于类型声明。

假设已经存在src/utils.js文件，内容如下：

在src目录下新建一个utils.d.ts文件，根据utils.js文的内容，编写对应的类型声明：

现在，就可以在src/index.ts文件中导入src/utils.js文件，同时拥有了TS的类型约束和提示：

完成以后的文件布局：

在浏览器中查看功能正常运行：