Drupal 8 における TypeScript を使用する JavaScript 開発の現状

における TypeScript を使用する 開発の現状 Drupal 8 JavaScript Tom Konda (@tom_k_en)

TypeScript とは に型制約を与え、誤ったコードを書きづらくする AltJS で言うと、下記のコードのような型宣言 ライブラリの型制約は npm/@types からもダウンロード可 マイナーなライブラリは自力で型制約を書く必要あり Microsoft 製 JavaScript PHP function checkArray(int $a, array $b) :bool { return count($b) === $a; }

Drupal 8 と TypeScript で発表があった DrupalCon Barcelona (2015) TypeScriptize your next D8 site テーマで使用するJavaScriptをTypeScriptで作成する内容 ES class などモダンな構文を使用して変換などの紹介 これ以外にも Drupal 8 向けの TypeScript 型定義のプロジェクトが 存在

• https://events.drupal.org/barcelona2015/sessions/typescriptize-your-next-d8-site

Drupal 8 向けの TypeScript 型定義 というプロジェクトが存在 リリースされていないため、ダウンロードは不可 URL は https://www.drupal.org/project/typings TypeScript definitions

• https://www.drupal.org/project/typings

TypeScript definitions の中身 レポジトリの URL は http://cgit.drupalcode.org/typings/tree/ 2017/01/21現在の最新コミットは2016‑07‑17

• http://cgit.drupalcode.org/typings/tree/

TypeScript definitions

の package.json

の依存関係は以下の通り
TypeScript がちょっと古い（現在は 2.1.5）
typings を使ってライブラリの型制約を得る辺りが懐かしい
npm

{

}

"devDependencies": {
"minimatch": "^3.0.2",
"tslint": "^3.8.0",
"tslint-config-typings": "^0.2.3",
"typescript": "^1.8.10",
"typings": "^1.3.1"
}

TypeScript definitions に貢献すべきか あまり必要性を感じない TS2.0から依存関係に @types/*があると型制約を自動で読む JS 関係なのに、npm エコシステムに入っていない 他のツールとの連携で辛そう npm に移すことを働きかけた方がよいかもしれない このプロジェクトの有無とは別に TypeScript での開発には課題あり

変換前の TypeScript ファイルの例 インデントはスペースとタブが混在 foo のみタブ、他はスペース const somethingNew = { 'hogehoge' : 'foobar', } 'doe' : 'jane' TypeScript 'foo' : 'xyzzy', のコンパイラ（tsc コマンド）で変換すると…

変換後の JavaScript ファイルの例

インデントはスペース4文字に統一される
Drupal のインデントのコーディング規約を破ることになる
Drupal のコーディング規約ではインデントのスペースは2文字
tsc コマンドや tsconfig.json でインデントの設定は不可

const somethingNew = {
'hogehoge': 'foobar',
'foo': 'xyzzy',
'doe': 'jane'
};

ESLint

でも ‑‑fix オプションで変換できるが…

ESLint による修正の例 eslint --fix ./js/hogehoge/**.js で lint 時に修正 インデントの間違いなどは自動で修正 下記のように修正しきることは難しい（ == を変換できない） > [email protected] eslintfix /Users/TKonda/Documents/jsapps/hoge/ts > eslint --fix ./out/test3.js /Users/TKonda/Documents/jsapps/hoge/tstest/out/test3.js 6:27 error Expected '===' and instead saw '==' eqeqeq 7:3 error Unexpected console statement no-console ✖ 2 problems (2 errors, 0 warnings) drupal.org に公開しない場所でしか使い道がなさそう

• http://drupal.org/

で公開するJSをTSで書きたいなら

drupal.org
tsc

{

}

による変換後コーディング規約に合致するように変換が必要
下記のようにタスク定義をする感じ？
変換の実装はしんどい

"build" : "npm-run-all tsc convertD8JS lint",
"tsc" : "tsc -p ./src/hogehoge",
"convertD8JS" : "d8convert ./js/hogehoge",
"lint" : "eslint"

この問題は JavaScript を ES の最新版で書いても同様に生じる
トランスパイル後のコードが規約への準拠を保証していない

まとめ へ の型制約を付けるプロジェクトは存在 より にある方が有用と思われる TypeScript を用いて公開プロジェクトのソースを書くのは厳しい コーディング規約に合致させる難易度が大 コーディング規約に関しては、ES の最新版で書いた JS も同様 ブラウザサポートしんどそう 公開しないなら TypeScript とか ES の最新版も使用可能 今後 Drupal JavaScript コーディング規約の変更希望 #2809281 や #2809735 を見ると希望あり Drupal 8 TypeScript drupal.org npm

• http://drupal.org/
• https://www.drupal.org/node/2809281
• https://www.drupal.org/node/2809735