Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
62
Help us understand the problem. What is going on with this article?
@pirosikick

TypeScriptを徐々に導入する

More than 3 years have passed since last update.

TypeScriptは部分的に導入することが出来ないと思ってFlowtypeを導入したが、出来るぞ!という指摘を頂いたので、調べた。

--allowjsオプション

tscの実行時に--allowjsを付けるだけだった。tsconfig.jsonの場合、compilerOptions.allowJstrueを設定すればよい。

検証用のディレクトリを作って、typescriptをインストールする。

$ mkdir allow-options
$ cd allow-options

$ echo "{}" > package.json
$ yarn add -D typescript

tsconfig.jsonを書く。(TypeScriptにあまり詳しくないので自信は無い)compilerOptions.allowJstrueにする。

tsconfig.json
{
  "compilerOptions": {
    "allowJs": true,
    "sourceMap": true,
    "strictNullChecks": true,
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "outDir": "./lib/"
  },
  "include": [
    "./src/"
  ]
}

src/a.tssrc/b.jsを書く。TypeScriptからJavaScriptの関数を読み込む。

src/a.ts
import b from './b';

export default function a(arg1: number, arg2: number): number {
  return b(arg1) + b(arg2);
}
src/b.js
export default function b(num) {
  return num * 2;
}

tscを実行する。普通にコンパイルが通る!lib/以下にa.js, b.jsとソースマップが出力される。

$ tsc
# => 何も出ない

# a.js, b.jsが出力されている
$ ls lib
./        ../       a.js      a.js.map  b.js      b.js.map

--allowjs falseを付けてtscを実行する。(もちろん、tsconfig.jsonallowJsを書き換えてもOK)実行するとエラーが表示され、lib/以下を見ると、a.jsだけがある。

# クリアする
$ rm -r lib

# 実行。エラーが出る
$ tsc --allowjs false
src/a.ts(1,15): error TS6143: Module './b' was resolved to '/xxxx/xxxx/xxxx/allowjs-option/src/b.js', but '--allowJs' is not set.

# lib/a.jsは出力されている
$ ls lib
./        ../       a.js      a.js.map

src/a.tsを下記のように書き換える。

src/a.ts
import b from './b';

export default function a(arg1: number, arg2: number): number {
  return b(arg1, arg2) + b(arg1, arg2);
}

tscを実行するとエラーが出る。引数の数はちゃんと見ているみたいですね。

$ tsc
src/a.ts(4,10): error TS2554: Expected 0-1 arguments, but got 2.
src/a.ts(4,26): error TS2554: Expected 0-1 arguments, but got 2.

追記: --checkJsオプション

コメント欄で@cotttpanさんに「--checkJsオプションを使うとJSDocの型を見てくれるぞ!」と教えていただいたので、試してみた。

Type Checking JavaScript Files · Microsoft/TypeScript Wiki

src/b.jsにJSDocのコメントで関数の引数と返り値の型を記述する。

src/b.js
/**
 * @param {number} num
 * @return number
 */
export default function b(num) {
  return num * 2;
}

src/a.tsを下記のように書き換え、numberで受け取った引数を文字列に変換してb関数に渡す(ちょっと無理やりですが)

src/a.ts
import b from './b';

export default function a(arg1: number, arg2: number): number {
  return b(arg1 + "") + b(arg2 + "");
}

tsc--checkjsオプションを追加して、実行する。tsconfig.jsonで指定する場合は、compilerOptions.checkJsをtrueにする。

$ tsc --checkjs
src/a.ts(4,12): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.
src/a.ts(4,27): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'

ちゃんと型をチェックしてくれていますね!ドキュメントを見ると関数の引数・返り値以外にもJSDocで型注釈できるようで、よさそう。

@cotttpan さん、ありがとうございました。

おわり

普通に出来ました。--allowJsオプションはTypeScript 1.8からの機能で、--checkJsオプションは2.3からの機能のようです。

62
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
pirosikick
JavaScript大好きっ子

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
62
Help us understand the problem. What is going on with this article?