去除ts代码的类型 - 愧怍的小站

在短时间内有一个需求，原项目代码是 js，而我手里头的项目是 ts 的，需要将其合并。

按照以往，我通常会将 js 改写成 ts，但时间方面有限，只希望编译成 js 代码的时候把 ts 中的类型直接删除即可（最终目的，也就是标题所表明的意思），所以就准备深入了解 TypeScript 的编译配置，也顺带复习一下 tsconfig.json 的相关参数。

毕竟会写代码，不会编译可就...

安装 TypeScript

要编写 ts 代码，肯定要先安装其工具

npm i -g typescript ts-node

其中typescript自带的 tsc 命令并不能直接运行 typescript 代码，而ts-node可以直接运行 ts 代码的能力，省去编译阶段。

但不代表ts-node等于 ts 版的 Node.js，本质上 Node.js 只是 JavaScript 的运行时环境，而 Deno 确实可以直接运行 TypeScript。

不过本次的主题不在 ts-node 与 deno，而在于将 TypeScript 代码编译到 JavaScript 代码。

简单测试

安装完毕，编写一个demo.ts的文件，在里面编写如下代码

demo.ts
const add = (a: number, b: number): number => {
  return a + b
}

let c = add(1, 2)

使用命令 tsc demo.ts，将会在同级目录下生成demo.js，内容如下（默认是 ES5 标准）

demo.js
var add = function (a, b) {
  return a + b
}
var c = add(1, 2)

tsconfig.json

可以发现上面转化的代码是 ES5 标准的，然而现在都已经步入到 ES6 阶段了，同时如果有大量 ts 文件需要编译，将十分繁琐，所以就有了 tsconfig.json 用于描述将 TypeScript 转为 JavaScript 代码的配置文件。

终端使用tsc --init，会在目录下生成 tsconfig.json 文件，默认配置如下（已删除原注释）。

tsconfig.json
{
  "compilerOptions": {
    "target": "es5", // 编译
    "module": "commonjs", // 模块导入与导出
    "esModuleInterop": true, // 支持合成模块的默认导入
    "forceConsistentCasingInFileNames": true, // 看不懂
    "strict": true, // 严格模式
    "skipLibCheck": true // 跳过.d.ts
  }
}

假设我要编译 ES6 语法的，只需要将 es5 改为 es6，然后在终端输入tsc，生成的 js 代码就是 es6 规范的代码。

信息

如果想要单纯的取出 ts 的类型，可以设置"target": "ESNext"，除了 ts 的一些特殊标准，如 enum，那么生成的 js 代码基本就是原 ts 代码移除类型的代码。（基本上就已经满足了我一开始的需求）

更多相关 TS 编译配置和使用说明可以通过 tsc -h 查看。

这里有份 tsconfig.json 全解析内容如下

tsconfig.json
{
  "compilerOptions": {
    /* 基本选项 */
    "target": "es6", // 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'
    "module": "commonjs", // 指定使用模块: 'commonjs', 'amd', 'system', 'umd' or 'es2015'
    "lib": [], // 指定要包含在编译中的库文件
    "allowJs": true, // 允许编译 javascript 文件
    "checkJs": true, // 报告 javascript 文件中的错误
    "jsx": "preserve", // 指定 jsx 代码的生成: 'preserve', 'react-native', or 'react'
    "declaration": true, // 生成相应的 '.d.ts' 文件
    "declarationDir": "./dist/types", // 生成的 '.d.ts' 文件保存文件夹
    "sourceMap": true, // 生成相应的 '.map' 文件
    "outFile": "./", // 将输出文件合并为一个文件
    "outDir": "./dist", // 指定输出目录
    "rootDir": "./", // 用来控制输出目录结构 --outDir.
    "removeComments": true, // 删除编译后的所有的注释
    "noEmit": true, // 不生成输出文件
    "importHelpers": true, // 从 tslib 导入辅助工具函数
    "isolatedModules": true, // 将每个文件做为单独的模块 （与 'ts.transpileModule' 类似）.

    /* 严格的类型检查选项 */
    "strict": true, // 启用所有严格类型检查选项
    "noImplicitAny": true, // 在表达式和声明上有隐含的 any类型时报错
    "strictNullChecks": true, // 启用严格的 null 检查
    "noImplicitThis": true, // 当 this 表达式值为 any 类型的时候，生成一个错误
    "alwaysStrict": true, // 以严格模式检查每个模块，并在每个文件里加入 'use strict'

    /* 额外的检查 */
    "noUnusedLocals": true, // 有未使用的变量时，抛出错误
    "noUnusedParameters": true, // 有未使用的参数时，抛出错误
    "noImplicitReturns": true, // 并不是所有函数里的代码都有返回值时，抛出错误
    "noFallthroughCasesInSwitch": true, // 报告switch语句的fallthrough错误。（即，不允许switch的case语句贯穿）

    /* 模块解析选项 */
    "moduleResolution": "node", // 选择模块解析策略： 'node' (Node.js) or 'classic' (TypeScript pre-1.6)
    "baseUrl": "./", // 用于解析非相对模块名称的基础目录
    "paths": {}, // 模块名到基于 baseUrl 的路径映射的列表
    "rootDirs": [], // 根文件夹列表，其组合内容表示项目运行时的结构内容
    "typeRoots": [], // 包含类型声明的文件列表
    "types": [], // 需要包含的类型声明文件名列表
    "allowSyntheticDefaultImports": true, // 允许从没有设置默认导出的模块中默认导入。
    "esModuleInterop": true, // 支持合成模块的默认导入

    /* Source Map Options */
    "sourceRoot": "./", // 指定调试器应该找到 TypeScript 文件而不是源文件的位置
    "mapRoot": "./", // 指定调试器应该找到映射文件而不是生成文件的位置
    "inlineSourceMap": true, // 生成单个 soucemaps 文件，而不是将 sourcemaps 生成不同的文件
    "inlineSources": true, // 将代码与 sourcemaps 生成到一个文件中，要求同时设置了 --inlineSourceMap 或 --sourceMap 属性

    /* 其他选项 */
    "experimentalDecorators": true, // 启用装饰器
    "emitDecoratorMetadata": true // 为装饰器提供元数据的支持
  },
  /* 指定编译文件或排除指定编译文件 */
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"],
  "files": ["index.ts", "test.ts"],
  // 从另一个配置文件里继承配置
  "extends": "@tsconfig/recommended",
  // 让 IDE 在保存文件的时候根据 tsconfig.json 重新生成文件
  "compileOnSave": true // 支持这个特性需要Visual Studio 2015， TypeScript 1.8.4 以上并且安装 atom-typescript 插件
}

常用配置

原本想自己总结一遍，但刷到了下面这篇文章，总结的太好了，以至于我都不是很想再写一遍主要的配置 🤩

会写 TypeScript 但你真的会 TS 编译配置吗？ - 掘金 (juejin.cn)

话虽说，但一些主要的功能还是得写一下

配置别名

在一些项目中经常能看到导入模块不是使用相对路径./，而是像@/，其中@表示 src，也就是项目的原代码目录下，也就是路径别名。要实现这样的配置，项目的脚手架肯定是需要修改的。这里我就以 vite 为例。

vite.config.ts
import { defineConfig } from 'vite'
import { resolve } from 'path'

export default defineConfig {
    resolve: {
        alias: {
            "@": resolve(__dirname, 'src'), // 路径别名
        },
        extensions: ['.js', '.json', '.ts'] // 使用路径别名时想要省略的后缀名
    }
    // ...
}

tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".", // 必写，用于设置解析非相对模块名称的基本目录
    "paths": {
      "@/*": ["src/*"] // 用于设置模块名到基于baseUrl的路径映射
    }
    // ...
  }
}

支持合成默认导入

在使用 ESM（ES module）编写代码的时候，引入 CJS（CommonJS）的模块，通常需要写成 import * as React from 'react'的形式，若写成 import React from 'react' 将会提示 模块“"http"”没有默认导出。，如果将esModuleInterop设置为 true，同时allowSyntheticDefaultImports 也会自动设置为 true，则可以写成后者的形式。

这里有篇文章详细的说明缘由 esModuleInterop 到底做了什么？

所以，尽量不要用 default 导出。 ——借评论区的一条评论

声明浏览器全局对象 API

在代码中使用到浏览器的对象，如 window、document，这些对于TypeScript Complier 来说是不能识别。可以通过在 lib 字段中设置"DOM"

{
  "compilerOptions": {
    "target": "ES5",
    "lib": ["ES5", "ES6", "DOM"]
  }
}

声明文件

{
  "compilerOptions": {
    "declaration": true, // 生成相应的`.d.ts`文件
    "declarationDir": "./dist/types" 生成的 '.d.ts' 文件保存文件夹
  }
}

安装 TypeScript​

简单测试​

tsconfig.json​

常用配置​

配置别名​

支持合成默认导入​

声明浏览器全局对象 API​

声明文件​