TypeScript 转换为 JavaScript - TypeScript

介绍

TypeScript 是一种由微软开发的编程语言，它是 JavaScript 的超集，添加了可选的静态类型和面向对象的编程特性。TypeScript 代码可以编译成 JavaScript，这使得 TypeScript 可以与现有的 JavaScript 代码库无缝集成。

编译 TypeScript 代码以便在浏览器或 Node.js 等 JavaScript 运行时环境中执行，需要将 TypeScript 代码转换为 JavaScript 代码。

转换方法

使用 TypeScript 官方编译器

TypeScript 官方提供了一个命令行编译器。在项目根目录下执行以下命令可以安装 TypeScript 编译器：

npm install -g typescript

然后，在项目根目录下执行以下命令可以将 TypeScript 代码编译成 JavaScript 代码：

tsc mycode.ts

这将会生成 mycode.js 文件，其中包含了转换后的 JavaScript 代码。该文件可以直接在浏览器或 Node.js 等 JavaScript 运行时环境中执行。

使用 Webpack

Webpack 是一个流行的打包工具，它可以将多个 JavaScript 文件打包成一个文件，并且可以通过配置文件非常灵活地控制打包过程。Webpack 默认使用 JavaScript 解析器来解析模块源代码，但是也可以通过安装 ts-loader 等 TypeScript 相关的 loader 来支持编译 TypeScript 代码。

首先需要安装以下依赖：

npm install webpack webpack-cli ts-loader typescript -D

然后，在项目根目录下创建一个 webpack.config.js 文件，包含以下内容：

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

这个配置文件指定了 webpack 的入口点（./src/index.ts），使用了 ts-loader 来处理 .ts 和 .tsx 文件，以及输出打包后的文件 bundle.js 到 ./dist 目录。

最后，在项目根目录下执行以下命令可以执行打包：

npx webpack

执行成功后，会在 ./dist 目录下生成打包后的 JavaScript 文件 bundle.js。

使用 Babel

Babel 是另一个非常流行的 JavaScript 编译器，它可以将最新的 ECMAScript 语法转换成能够运行在现有浏览器上的语法，同时也可以支持编译 TypeScript 代码。

首先需要安装以下依赖：

npm install --save-dev babel-core babel-loader babel-preset-typescript babel-preset-env

然后，在项目根目录下创建一个 .babelrc 文件，包含以下内容：

{
  "presets": [
    "env",
    "typescript"
  ]
}

该文件指定了 Babel 需要使用的语法预设，分别是 babel-preset-env 和 babel-preset-typescript。

最后，在项目根目录下创建一个 webpack.config.js 文件，包含以下内容：

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
  },
};

这个配置文件指定了 webpack 的入口点（./src/index.ts），使用了 babel-loader 来处理 .ts 和 .tsx 文件，以及输出打包后的文件 bundle.js 到 ./dist 目录。

最后，在项目根目录下执行以下命令可以执行打包：

npx webpack

执行成功后，会在 ./dist 目录下生成打包后的 JavaScript 文件 bundle.js。

总结

以上是将 TypeScript 代码转换为 JavaScript 代码的三种方法：使用 TypeScript 官方编译器、使用 Webpack、使用 Babel。您可以根据自己的项目需要选择不同的方法。