Интеграция с инструментами сборки

Babel

Установка

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

.babelrc

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

Использование командной строки

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

package.json

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

Выполнение Babel из командной строки

npm run build

Browserify

Установка

npm install tsify

Использование командной строки

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

Использование API

var browserify = require("browserify");
var tsify = require("tsify");

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

Подробнее: smrq/tsify

Grunt

Установка

npm install grunt-ts

Basic Gruntfile.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

Gulp

Установка

npm install gulp-typescript

Basic gulpfile.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

Jspm

Установка

npm install -g jspm@beta

Примечание: В настоящее время поддержка TypeScript в jspm находится на стадии 0.16beta

Подробнее: TypeScriptSamples/jspm

MSBuild

Обновите файл проекта, чтобы включить локально установленные Microsoft.TypeScript.Default.props (вверху) и Microsoft.TypeScript.targets (внизу) файлы:

<?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

NuGet

• Щелкните правой кнопкой мыши -> Управление пакетами NuGet
• Поиск Microsoft.TypeScript.MSBuild
• Нажмите Install
• После завершения установки перестройте проект!

Дополнительную информацию можно найти на странице Package Manager Dialog и использование предварительных версий с NuGet

Rollup

Установка

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

Обратите внимание, что как typescript так и tslib являются зависимостями этого плагина, которые необходимо установить отдельно.

Использование

Создайте файл конфигурации rollup.config.js файл конфигурации и импортируйте плагин:

// rollup.config.js
import typescript from '@rollup/plugin-typescript';

export default {
  input: 'src/index.ts',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [typescript()]
};

Компилятор Svelte

Установка

npm install --save-dev svelte-preprocess

Обратите внимание, что typescript является необязательной зависимостью этого плагина и должна быть установлена отдельно. tslib также не предоставлена.

Вы также можете рассмотреть svelte-check для проверки типа в командной строке.

Использование

Создайте файл конфигурации svelte.config.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:

<script lang="ts">

Vite

Vite поддерживает импорт .ts файлов без дополнительных действий. Он выполняет только транспиляцию, а не проверку типов. Он также требует, чтобы некоторые compilerOptions имели определенные значения. Для получения дополнительной информации см. документацию Vite.

Webpack

Установка

npm install ts-loader --save-dev

Basic webpack.config.js при использовании Webpack 5 или 4

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 здесь.

Альтернативы:

• awesome-typescript-loader