ビルドツールとの統合

Babel

インストール

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

.babelrc

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

コマンドラインインターフェースの使用

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を実行する

sh
npm run build

Browserify

インストール

sh
npm install tsify

コマンドラインインターフェースの使用

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

APIの使用

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

詳細: smrq/tsify

Grunt

grunt-ts の使用 (現在はメンテナンスされていません)

インストール

sh
npm install grunt-ts --save-dev

基本的な 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

grunt-browserify と tsify の組み合わせの使用

インストール

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

基本的な 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

Gulp

インストール

sh
npm install gulp-typescript

基本的な 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

Jspm

インストール

sh
npm install -g jspm@beta

注: 現在 jspm での TypeScript のサポートは 0.16beta です

詳細: TypeScriptSamples/jspm

MSBuild

ローカルにインストールされた Microsoft.TypeScript.Default.props (上部) および Microsoft.TypeScript.targets (下部) ファイルを含めるようにプロジェクト ファイルを更新します

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 プロジェクトでのコンパイラ オプションの設定

NuGet

• 右クリック -> NuGet パッケージの管理
• Microsoft.TypeScript.MSBuild を検索します
• インストール をクリックします
• インストールが完了したら、リビルドします!

詳細は パッケージ マネージャー ダイアログ および NuGet での nightly ビルドの使用 を参照してください

Rollup

インストール

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

typescript と tslib はこのプラグインのピア依存関係であり、個別にインストールする必要があることに注意してください。

使用法

構成ファイル rollup.config.js を作成し、プラグインをインポートします

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

インストール

npm install --save-dev svelte-preprocess

typescript はこのプラグインのオプションのピア依存関係であり、別途インストールする必要があることに注意してください。tslib も提供されていません。

CLIでの型チェックには、svelte-check も検討すると良いでしょう。

使用法

svelte.config.js 設定ファイルを作成し、プラグインをインポートします。

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

インストール

sh
npm install ts-loader --save-dev

Webpack 5または4を使用する場合の基本的なwebpack.config.js

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の詳細はこちらをご覧ください。

代替案

• awesome-typescript-loader