第1回 Drupal 勉強会@DC にて発表したスライドです

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

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

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

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

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

6. TypeScript definitions のpackage.json
npm の依存関係は以下の通り
TypeScript がちょっと古い（現在は2.1.5）
typings を使ってライブラリの型制約を得る辺りが懐かしい
{
"devDependencies": {
"minimatch": "^3.0.2",
"tslint": "^3.8.0",
"tslint-config-typings": "^0.2.3",
"typescript": "^1.8.10",
"typings": "^1.3.1"
}
}

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

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

9. 変換後のJavaScript ファイルの例
インデントはスペース4文字に統一される
Drupal のインデントのコーディング規約を破ることになる
Drupal のコーディング規約ではインデントのスペースは2文字
tsc コマンドやtsconfig.json でインデントの設定は不可
const somethingNew = {
'hogehoge': 'foobar',
'foo': 'xyzzy',
'doe': 'jane'
};
ESLint でも‑‑fix オプションで変換できるが…

10. ESLint による修正の例
eslint --fix ./js/hogehoge/**.js でlint 時に修正
インデントの間違いなどは自動で修正
下記のように修正しきることは難しい（ == を変換できない）
drupal.org に公開しない場所でしか使い道がなさそう
> tstest@1.0.0 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)

11. drupal.orgで公開するJSをTSで書きたいなら
tsc による変換後コーディング規約に合致するように変換が必要
下記のようにタスク定義をする感じ？
変換の実装はしんどい
{
"build" : "npm-run-all tsc convertD8JS lint",
"tsc" : "tsc -p ./src/hogehoge",
"convertD8JS" : "d8convert ./js/hogehoge",
"lint" : "eslint"
}
この問題はJavaScript をES の最新版で書いても同様に生じる
トランスパイル後のコードが規約への準拠を保証していない

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