はじめに

Web 開発で Typescript を導入する際に、コストを抑えるために Javascript を併用したい場合があります。

今日は Typescript で Javascript のインポートやコンパイルを行う方法をご紹介します。

確認に使用したのは Typescript 3.9.7 と 4.1.2 です。

目次

1. 設定方法
2. checkJs オプション

1. 設定方法

TSConfig (tsconfig.json) をお使いの場合は compilerOptions に "allowJs" : true を追加してください。

"compilerOptions": {
    // ↓ 追加
    "allowJs": true,
    ...
}

gulp.js (gulp-typescript) で TSConfig 不使用の場合は、下記のように追加すれば OK です。

const { dest, src, task } = require('gulp');
const ts = require('gulp-typescript');

task('default', () => {
  return src([
      'src/**/*.js', // ← .js をコンパイルする場合は追加
      'src/**/*.ts'
    ])
    .pipe(ts({
      allowJs: true, // ← 追加
    }))
    .pipe(dest('dist'));
});

Allow JS - allowJs (TypeScript: TSConfig Reference - Docs on every TSConfig option)

https://www.typescriptlang.org/tsconfig#allowJs

TypeScript 3 + gulp 4 で開発環境を構築する方法 / Twin Turbo Computing

https://tt-computing.com/ts3-gulp4-install

2. checkJs オプション

Javascript 使用時のオプションとして checkJs があります。

これを allowJs と併せて true にすると Javascript でも型チェックをしてくれます。

"compilerOptions": {
    "allowJs": true,
    "checkJs": true, // ← 追加
    ...
}

例えば下記のように Math.round() の引数に文字列を指定した場合、checkJs を true にするとエラーとなります。
(false にするとエラーは出ません)

var num = Math.round('1.23');
console.log(num);

# checkJs が true だとエラーとなります
src/sample.js:1:22 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

1 var num = Math.round('1.23');
                       ~~~~~~

checkJs を有効化すると既存コードでエラーが出て動かなくなる場合があるので、状況に応じて使用するのが良いかなと思います。

一時的に有効化して可能な範囲で修正し、また無効に戻す、という使い方もできますね。

Check JS - checkJs (TypeScript: TSConfig Reference - Docs on every TSConfig option)

https://www.typescriptlang.org/tsconfig#checkJs