328 Views
June 01, 17
スライド概要
第1回 Drupal 勉強会@DC にて発表したスライドです
Web developer, OpenStreetMap mapper. This Account tweets only Tech or OSM, sometimes something like geography except for reply or fav.
における 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 型定義のプロジェクトが 存在
Drupal 8 向けの TypeScript 型定義 というプロジェクトが存在 リリースされていないため、ダウンロードは不可 URL は https://www.drupal.org/project/typings TypeScript definitions
TypeScript definitions の中身 レポジトリの URL は http://cgit.drupalcode.org/typings/tree/ 2017/01/21現在の最新コミットは2016‑07‑17
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 に公開しない場所でしか使い道がなさそう
で公開する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