Drupal 8 における TypeScript を聞喘する JavaScript _kのF彜
?
2 likes?950 views
及1指 Drupal 茶氏@DC にてk燕したスライドです
Drupal 8 における TypeScript を聞喘する JavaScript _kのF彜
- 1. Drupal 8 におけるTypeScript を聞喘する JavaScript _kのF彜 Tom Konda (@tom_k_en)
- 2. TypeScript とは JavaScript に侏崙sを嚥え、`ったコ`ドをきづらくするAltJS PHP で冱うと、和のコ`ドのような侏傚冱 ライブラリの侏崙sはnpmの?@types/*?からもダウンロ`ド辛 マイナ`なライブラリは徭薦で侏崙sをく駅勣あり Microsoft u function checkArray(int $a, array $b) :bool { return count($b) === $a; }
- 3. Drupal 8 とTypeScript DrupalCon Barcelona (2015)でk燕があった TypeScriptize your next D8 site テ`マで聞喘するJavaScriptをTypeScriptで恬撹する坪否 ES class などモダンな猟を聞喘してQなどのB初 これ參翌にもDrupal 8 鬚韻TypeScript 侏協xのプロジェクトが 贋壓
- 4. Drupal 8 鬚韻TypeScript 侏協x TypeScript definitions というプロジェクトが贋壓 リリ`スされていないため、ダウンロ`ドは音辛 URL はhttps://www.drupal.org/project/typings
- 5. TypeScript definitions の嶄附 レポジトリのURL はhttp://cgit.drupalcode.org/typings/tree/ 2017/01/21F壓の恷仟コミットは2016?07?17
- 6. TypeScript definitions のpackage.json npm の卆贋vSは參和の宥り TypeScript がちょっと硬い━F壓は2.1.5 typings を聞ってライブラリの侏崙sを誼るxりがかしい { "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から卆贋vSに?@types/*?があると侏崙sを徭咾杯iむ JS vSなのに、npm エコシステムに秘っていない 麿のツ`ルとのB亊で仭そう npm に卞すことをPきかけた圭がよいかもしれない このプロジェクトの嗤oとはeにTypeScript での_kにはn}あり
- 8. Q念のTypeScript ファイルの箭 インデントはスペ`スとタブが詞壓 ?foo?のみタブ、麿はスペ`ス const somethingNew = { 'hogehoge' : 'foobar', 'foo' : 'xyzzy', 'doe' : 'jane' } TypeScript のコンパイラtsc コマンドでQすると´
- 9. Q瘁のJavaScript ファイルの箭 インデントはスペ`ス4猟忖にy匯される Drupal のインデントのコ`ディングｼsを篤ることになる Drupal のコ`ディングｼsではインデントのスペ`スは2猟忖 tsc コマンドやtsconfig.json でインデントのO協は音辛 const somethingNew = { 'hogehoge': 'foobar', 'foo': 'xyzzy', 'doe': 'jane' }; ESLint でも??fix オプションでQできるが´
- 10. ESLint による俐屎の箭 ?eslint --fix ./js/hogehoge/**.js?でlint rに俐屎 インデントのg`いなどは徭咾俳渾 和のように俐屎しきることはyしい?==?をQできない 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 によるQ瘁コ`ディングｼsに栽崑するようにQが駅勣 和のようにタスク協xをする湖じ Qのg廾はしんどい { "build" : "npm-run-all tsc convertD8JS lint", "tsc" : "tsc -p ./src/hogehoge", "convertD8JS" : "d8convert ./js/hogehoge", "lint" : "eslint" } この}はJavaScript をES の恷仟井でいても揖に伏じる トランスパイル瘁のコ`ドがｼsへのを隠^していない
- 12. まとめ Drupal 8 へTypeScript の侏崙sを原けるプロジェクトは贋壓 drupal.org よりnpm にある圭が嗤喘と房われる TypeScript を喘いて巷_プロジェクトのソ`スをくのはしい コ`ディングｼsに栽崑させるy叟業が寄 コ`ディングｼsにvしては、ES の恷仟井でいたJS も揖 ブラウザサポ`トしんどそう 巷_しないならTypeScript とかES の恷仟井も聞喘辛嬬 書瘁Drupal JavaScript コ`ディングｼsの筝錬李 #2809281 や#2809735 をると錬李あり