TypeScript字符串字面量/联合类型语法解释及Webpack打包报错解决问询

语法含义说明 #

1. 字符串字面量类型 #

你看到的const INIT: 'jsonforms/INIT' = 'jsonforms/INIT'是TypeScript的字符串字面量类型语法：

• 含义：限制INIT变量的取值只能是'jsonforms/INIT'这一个固定字符串，赋值为其他任意值都会触发TS类型报错。
• 为什么字符串可以作为类型：TypeScript支持字面量类型作为原生基础类型的子类型，除了字符串，数字、布尔值也可以作为字面量类型使用，作用是精准限制变量/参数的可选取值范围，这类写法最常见的场景是定义状态管理库的Action类型常量，避免写错固定字符串。
• 官方名称：字符串字面量类型（String Literal Type），属于字面量类型的子类。

2. 类型别名+联合类型 #

你看到的export type CoreActions = | InitAction | UpdateCoreAction | UpdateAction是TypeScript的两种语法组合：

• type关键字用来定义自定义类型别名，相当于给复杂的类型起一个简化的名字方便复用。
• |是联合类型标识，含义是CoreActions这个类型的取值可以是InitAction、UpdateCoreAction、UpdateAction三种类型中的任意一种，这类写法通常用来聚合Action类型，方便后续做类型收窄和类型校验。
• export type是TS的类型导出语法，用来把自定义类型导出给其他模块导入使用。

Webpack报错解决方案 #

报错的根本原因是你当前的Webpack配置只能识别普通JavaScript语法，无法处理TypeScript的类型标注，这些类型语法不会被保留到运行时，需要提前转译成普通JS才能打包。
解决步骤如下：

1. 安装依赖
   选择以下两种方案之一安装对应依赖：

• 方案一（ts-loader）：

  npm install typescript ts-loader --save-dev
  

• 方案二（babel-loader，已有babel配置的项目推荐）：

  npm install typescript @babel/preset-typescript --save-dev
  

2. 修改Webpack配置
   在webpack.config.js中新增TS文件处理规则：

• 对应ts-loader方案：

  module.exports = {
    // 原有配置保留
    module: {
      rules: [
        // 原有其他loader规则保留
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/
        }
      ]
    },
    resolve: {
      // 新增TS后缀识别，导入TS文件时可以不用写后缀
      extensions: ['.ts', '.tsx', '.js', '.jsx']
    }
  }
  

• 对应babel-loader方案：
  首先在Babel配置文件（.babelrc或babel.config.json）的presets中新增@babel/preset-typescript，然后修改Webpack规则：

  {
    test: /\.tsx?$/,
    use: 'babel-loader',
    exclude: /node_modules/
  }
  

3. 新增TS配置文件
   在项目根目录新建tsconfig.json，填入基础配置即可：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "ESNext",
    "jsx": "react",
    "strict": true,
    "moduleResolution": "Node"
  },
  "include": ["src/**/*"]
}

内容的提问来源于stack exchange，提问作者Mir-Ismaili