与构建工具集成

Babel

安装

🌐 Install

sh
npm install @babel/cli @babel/core @babel/preset-typescript --save-dev

.babelrc

js
{
  "presets": ["@babel/preset-typescript"]
}

使用命令行接口

🌐 Using Command Line Interface

sh
./node_modules/.bin/babel --out-file bundle.js src/index.ts

package.json

js
{
  "scripts": {
    "build": "babel --out-file bundle.js main.ts"
  },
}

从命令行执行 Babel

🌐 Execute Babel from the command line

sh
npm run build

Browserify

安装

🌐 Install

sh
npm install tsify

使用命令行接口

🌐 Using Command Line Interface

sh
browserify main.ts -p [ tsify --noImplicitAny ] > bundle.js

使用 API

🌐 Using API

js
var browserify = require("browserify");
var tsify = require("tsify");
browserify()
  .add("main.ts")
  .plugin("tsify", { noImplicitAny: true })
  .bundle()
  .pipe(process.stdout);

更多详情：smrq/tsify

🌐 More details: smrq/tsify

Grunt

使用 grunt-ts（不再维护）

🌐 Using grunt-ts (no longer maintained)

安装

🌐 Install

sh
npm install grunt-ts --save-dev

基本 Gruntfile.js

🌐 Basic Gruntfile.js

js
module.exports = function (grunt) {
  grunt.initConfig({
    ts: {
      default: {
        src: ["**/*.ts", "!node_modules/**/*.ts"],
      },
    },
  });
  grunt.loadNpmTasks("grunt-ts");
  grunt.registerTask("default", ["ts"]);
};

更多详情：TypeStrong/grunt-ts

🌐 More details: TypeStrong/grunt-ts

将 grunt-browserify 与 tsify 结合使用

🌐 Using grunt-browserify combined with tsify

安装

🌐 Install

sh
npm install grunt-browserify tsify --save-dev

基本 Gruntfile.js

🌐 Basic Gruntfile.js

js
module.exports = function (grunt) {
  grunt.initConfig({
    browserify: {
      all: {
        src: "src/main.ts",
        dest: "dist/main.js",
        options: {
          plugin: ["tsify"],
        },
      },
    },
  });
  grunt.loadNpmTasks("grunt-browserify");
  grunt.registerTask("default", ["browserify"]);
};

更多详情：jmreidy/grunt-browserify，TypeStrong/tsify

🌐 More details: jmreidy/grunt-browserify, TypeStrong/tsify

Gulp

安装

🌐 Install

sh
npm install gulp-typescript

基本 gulpfile.js

🌐 Basic gulpfile.js

js
var gulp = require("gulp");
var ts = require("gulp-typescript");
gulp.task("default", function () {
  var tsResult = gulp.src("src/*.ts").pipe(
    ts({
      noImplicitAny: true,
      out: "output.js",
    })
  );
  return tsResult.js.pipe(gulp.dest("built/local"));
});

更多详情：ivogabe/gulp-typescript

🌐 More details: ivogabe/gulp-typescript

Jspm

安装

🌐 Install

sh
npm install -g jspm@beta

注意：目前 jspm 对 TypeScript 的支持处于 0.16 测试版

🌐 Note: Currently TypeScript support in jspm is in 0.16beta

更多详情：TypeScriptSamples/jspm

🌐 More details: TypeScriptSamples/jspm

MSBuild

更新项目文件以包含本地安装的 Microsoft.TypeScript.Default.props（在顶部）和 Microsoft.TypeScript.targets（在底部）文件：

🌐 Update project file to include locally installed Microsoft.TypeScript.Default.props (at the top) and Microsoft.TypeScript.targets (at the bottom) files:

xml
<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <!-- Include default props at the top -->
  <Import
      Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props"
      Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props')" />
  <!-- TypeScript configurations go here -->
  <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptRemoveComments>false</TypeScriptRemoveComments>
    <TypeScriptSourceMap>true</TypeScriptSourceMap>
  </PropertyGroup>
  <PropertyGroup Condition="'$(Configuration)' == 'Release'">
    <TypeScriptRemoveComments>true</TypeScriptRemoveComments>
    <TypeScriptSourceMap>false</TypeScriptSourceMap>
  </PropertyGroup>
  <!-- Include default targets at the bottom -->
  <Import
      Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets"
      Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />
</Project>

关于定义 MSBuild 编译器选项的更多详细信息：在 MSBuild 项目中设置编译器选项

🌐 More details about defining MSBuild compiler options: Setting Compiler Options in MSBuild projects

NuGet

  • 右键单击 -> 管理 NuGet 包
  • 搜索 Microsoft.TypeScript.MSBuild
  • 按 Install
  • 安装完成后重建！

更多详情请参阅 Package Manager Dialog 和 使用 NuGet 的夜间版本

🌐 More details can be found at Package Manager Dialog and using nightly builds with NuGet

Rollup

安装

🌐 Install

npm install @rollup/plugin-typescript --save-dev

请注意，typescript 和 tslib 都是此插件的对等依赖，需要单独安装。

🌐 Note that both typescript and tslib are peer dependencies of this plugin that need to be installed separately.

用法

🌐 Usage

创建一个 rollup.config.js 配置文件 并导入插件：

🌐 Create a rollup.config.js configuration file and import the plugin:

js
// rollup.config.js
import typescript from '@rollup/plugin-typescript';
export default {
  input: 'src/index.ts',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [typescript()]
};

Svelte 编译器

🌐 Svelte Compiler

安装

🌐 Install

npm install --save-dev svelte-preprocess

请注意，typescript 是这个插件的可选同伴依赖，需要单独安装。tslib 也没有提供。

🌐 Note that typescript is an optional peer dependencies of this plugin and needs to be installed separately. tslib is not provided either.

你也可以考虑 svelte-check 来进行 CLI 类型检查。

🌐 You may also consider svelte-check for CLI type checking.

用法

🌐 Usage

创建一个 svelte.config.js 配置文件并导入插件：

🌐 Create a svelte.config.js configuration file and import the plugin:

js
// svelte.config.js
import preprocess from 'svelte-preprocess';
const config = {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: preprocess()
};
export default config;

你现在可以指定脚本块是用 TypeScript 编写的：

🌐 You can now specify that script blocks are written in TypeScript:

<script lang="ts">

Vite

Vite 支持开箱即用地导入 .ts 文件。它仅执行转译，而不进行类型检查。它还要求某些 compilerOptions 拥有特定的值。详情请参阅 Vite 文档。

🌐 Vite supports importing .ts files out-of-the-box. It only performs transpilation and not type checking. It also requires that some compilerOptions have certain values. See the Vite docs for more details.

Webpack

安装

🌐 Install

sh
npm install ts-loader --save-dev

使用 Webpack 5 或 4 时的基本 webpack.config.js

🌐 Basic webpack.config.js when using Webpack 5 or 4

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

请在此处查看有关 ts-loader 的更多详情。

🌐 See more details on ts-loader here.

备择方案：

🌐 Alternatives: