Trying to write a code with Laravel+Vue+TypeScript

Transcript

1. Laravel+Vue +TypeScriptで フォームバリデーションを 実装してみた話 @plumsa

2. 自己紹介 株式会社プラムザ Tech Lead ハトヨウコ 公式Twitter ララ・ベル子さんの中の 人 @plumsa 2

3. 3 きっかけ 社内でこんな会話があっ た。

4. “ TypeScript勉強会 発足!! 4

5. 5 まずは ドキュメントの読み込み 公式ドキュメント(英語) https://www.typescriptlang.org/docs/handbook/basic-types.html js STUDIO https://www.typescriptlang.org/docs/handbook/basic-types.html 日本語に翻訳してくれてるありがたいサイト たまにコードが古かったり、変更になってる文がある。

   公式とちゃんと見比べたほうが◯

6. TypeScriptって何？ 6 特徴＆メリット • JavaScriptで静的型付けできる！ • JavaScriptでペチパーが知ってるような感じで Classが書ける！ (※クラス構文自体はES2015で導入されているが、完全一致ではない） •

   コンパイルされたあと普通のJavaScriptになる！ • おかしなものを変数に入れるとコンパイル時、 またはエディタでリアルタイムに怒ってくれる！

7. TypeScriptって何？ 7 デメリット 後述！

8. 8 基本は何となく 分かったので そろそろ実装したい

9. 実装してみることの意義 ◦ 使い勝手が分かる ◦ 簡単そうに見えていても実際は違うことがある ◦ 座学より遥かに多くの気付きがある ◦ 知識の定着 ◦

   応用する力を得られる 9

10. ざっくり手順 ◦ laravel new laravel-vue-typescript ◦ yarn install ◦ yarn

    add vue-class-component --dev ◦ yarn add vue-template-compiler --dev --production=false ◦ tsconfig.jsonを作成 ◦ Webpack.mix.jsを修正 ◦ Bladeにscriptタグを追加 ◦ CSRF Token追加 など 10

11. Demo &コード解説タイム 11

12. ▼問題 Symfonyがやたらエラーを吐く ▼解決法 tsconfig.jsで対象外にする https://qiita.com/ttwwiitttteerr0/items/5d 4590d37a48d868bd11 ハマり ポイント1 12

13. ハマり ポイント2 13 ▼問題 Element implicitly has an 'any' type

    because type 'Validator' has no index signature. 'Validator'はインデックスシグネチャを持たないため、要素は 暗黙的にany型を持ちます。 というエラーが消えない。 ▼解決法? interfaceを作りインデックスシグネチャを定義する https://qiita.com/Nossa/items/e01d0bce67b760c0bcb9#対策-interface-を定義 してメソッドを定義するオブジェクトに実装する

14. ハマり ポイント3 14 ▼問題 Element implicitly has an 'any' type

    because type 'Validator' has no index signature. というエラーがどうしても消えない。助けてママン。 ▼解決法 無理やり型注釈をつけて乗り切る

15. ハマり ポイント4 ▼問題 experimentalDecoratorsオプションを設定せ よと言われる ▼解決法 tsconfig.jsで設定する https://www.l08084.com/entry/2018/02/09/154824

16. 16 • 型が間違っている、コードが間違っている時に エディタ上ですぐ分かるのが気持ちよすぎて、 １つでも不可解なエラーが出ていると気になって夜も眠 れなくなる。 • classは結局コンパイル後はprototype拡張式のコード になるためコード量がやや増える •

    Importしてるファイルを変更してもwatchしてる状態で それが反映されない。 • 型を指定する部分が本筋と混ざることで複雑なコードの 場合、可読性が下がる デメリット

17. まとめ 17 • 馴染みのClassでオブジェクト指向的に書けるのはうれし い。すごい楽。 • チーム開発で威力を発揮しそう • ハマると時間がかかる •

    全部に型指定する生活を強いられるのがつらい • Componentのtemplateのシンタックスハイライトされ ないのつらい • 実行時ではなくコンパイル時に怒ってくれるから、 上品で気持ちいい！！ • 変なことを書いらたすぐ気づける！ • コードの堅牢性が上がる

18. 18 型を意識することで PHPなど他の言語使用時やTSで書いてない時も コードの書き方が矯正されると思った！ ただ、Vueとの兼ね合いとか ハマるとなかなかコストくうので うちの場合、TSの採用はもうちょっとみんなの知見が 溜まってからのほうが良さそう! 引き続きTypeScript勉強会で コードを書いていく！