takashiskiのブログ

覚書の殴り書き

JavaScriptに型を付けてコード補完する

WIP

なんかやらないといけない気がしたので調べてる

たぶんこうなるだろうという予想

  • JSDocをかく
  • どう書くかはよくわかってない

手元でぱっとやって動いた内容

  • パッケージマネージャから追加したライブラリの型の補完
  • 対応する部分にd.tsなりで型が定義されてたら参照できるよう
//Type.js
/**
 * @type {import("googleapis").youtube_v3.Schema$Activity}
 */

jsだけのプロジェクトに対して必要だったこと

  • jsdocが記述されているコードを@typedef importし、その型を適用したい変数に対して@typeを記述する
  • モジュールではないコードをimport対象にした場合は@ts-checkで赤線がでる
    • js的には問題ないので気にしない
//Type.js

/**
 * @typedef {"test"|"this"|"is"|"a"|"test"} TestType
 */
//main.js
/**@typedef {import("./types/Types")} */

//いろいろな関係ないコード

/**@type {TestType} */
const test = "test"
  • importのあとに型を書かなくても、ファイルの中身がまるごと参照できるよう
  • 上記コードは const test="までタイピングした段階で候補としてTestTypeに列挙した文字列が提示される
    • 候補はでるが、別のモノを与えても特に問題は出ない
  • //@ts-checkを差し込むと、"that"などTestType外の文字列を与えている場合警告がでるようになる

課題

  • ES5までの書き方でクラス・継承が行われている場合、親クラスのメソッドが補完候補にでない
    • ES6以降のクラス構文で親クラス含めて定義・継承してるなら補完候補となる

参考文献