TypeScript结合Webpack使用类型时报错问题求助

嘿，这个坑我之前踩过！你遇到的Unexpected token错误，本质是Webpack 4本身不认识TypeScript的类型语法（比如: string这种注解），必须搭配合适的loader和正确的tsconfig.json配置才能搞定，具体步骤如下：

1. 先安装必要的依赖 #

Webpack需要借助ts-loader（或者awesome-typescript-loader）来转译TypeScript代码，同时你得确保项目里有typescript包：

# npm 安装
npm install typescript ts-loader --save-dev

# 或者用 yarn
yarn add typescript ts-loader -D

2. 配置tsconfig.json #

没错，这个文件是必须的——它是TypeScript编译器的核心配置文件，ts-loader会读取它来处理你的代码。给你一个基础可用的配置：

{
  "compilerOptions": {
    "target": "ES5", // 编译目标，根据你的需求选ES6/ESNext都可以
    "module": "ESNext",
    "strict": true, // 开启严格类型检查，可选但推荐
    "esModuleInterop": true, // 兼容CommonJS和ES模块
    "skipLibCheck": true
  },
  "include": ["src/**/*"], // 指定要编译的TS文件范围，比如src下所有文件
  "exclude": ["node_modules"]
}

如果你的项目已经有tsconfig.json，可以检查下compilerOptions里有没有开启和类型相关的正确配置，比如noImplicitAny这类选项不会导致报错，但target如果设得太老可能有兼容问题，不过一般默认配置就够。

3. 调整Webpack配置文件 #

关键一步：告诉Webpack遇到.ts（或.tsx）文件时用ts-loader处理。修改你的webpack.config.js：

module.exports = {
  entry: './src/js/test.ts', // 你的入口文件
  module: {
    rules: [
      {
        test: /\.tsx?$/, // 匹配.ts和.tsx文件
        use: 'ts-loader',
        exclude: /node_modules/ // 排除第三方包
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'] // 让Webpack自动解析这些后缀的文件，避免import时写全后缀
  },
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist' // 输出目录，按需修改
  }
};

为什么去掉类型就正常？ #

因为去掉: string后，你的代码就变成了标准的JavaScript，Webpack默认就能处理JS文件，不需要额外loader；但只要有TypeScript的专属语法（比如类型注解、接口等），就必须经过TS编译器转译，Webpack本身做不到这一点。

内容的提问来源于stack exchange，提问作者Scott Walter