大規模改修の裏でTypeScriptとテスト導入をすすめた話

 大規模改修の裏でTypeScriptとテスト導入をすすめた話

4c060f902c6d1baa80466a5931eda477?s=128

Amon Keishima

June 05, 2020
Tweet

Transcript

  1. 5.
  2. 11.
  3. 13.

    作戦 TypeScriptの環境を導⼊ / Vue.js の TypeScript対応 Jestの導⼊ / Babelのアップデート /

    Webpackのアップデート 脱Browserify / 脱grunt など… やりたいこと(やらないといけないこと)はたくさんあるが、 ⼀気にいろいろ変えてしまうとコードの差分が⼤きくなってしまう 動作を確認するにも時間かかるし レビュワーの負担も⼤きくなってしまう 今回の作戦は なるべく⼩さく⼊れること とした
  4. 18.

    まずはTypeScriptをコンパイルできるように 3. tsconfig の target を es2019 にした  → ts-loader→babel-loaderを通すときに、tsでトランスパイルをしてほしくなかった

     → spread-arrays や rest-spread は、今まで通りbabelでpolyfillを⼊れてほしい       → tsのトランスパイルで差し込まれるpolyfillで挙動が変わるかもしれない      みたいな⼼配をしたくなかった // spread-arrays const nums = [ 1, 2 ]; const newNums = [ 0, ...nums ]; console.log(newNums); // [ 0, 1, 2 ]; // rest-spread let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; console.log(z); // { a: 3, b: 4 }
  5. 20.

    VueのSFCファイルをTS対応にする import { Vue, Component, Prop } from 'vue-property-decorator' @Component

    export default class FooComponent extends Vue { @Prop(Number) readonly propA: number | undefined } export default { props: { propA: { type: Number } } } "vue-class-decorator" や "vue-class-component" があるが、導⼊を⾒送った ・書き換え量が多いこと ・Vue3のRFCではrejectされていること  → これは特に⻑く続いているプロジェクトとして気にした    また⼤規模に書き換える必要がありそうなら、ここでやることはないと判断 Example: vue-class-component
  6. 22.

    ビルド環境のシンプル化 ts-loaderでJavaScript / TypeScript 両⽅ビルドするようにした  → 数秒ビルド時間が伸びる程度・環境のシンプルさを優先 module.exports = {

    module: { rules: [ { test: /\.js$/, use: babelLoader, }, { test: /\.ts$/, loader: [ babelLoader, tsLoader ], } ] } } module.exports = { module: { rules: [ { test: /\.(js|ts)x?$/, loader: [ babelLoader, tsLoader ], } ] } } Before / 41s After / 45s
  7. 26.

    TODO<T>: any で "攻めながらanyを使う" js → ts に拡張⼦を変えただけでビルドが通らなくなるケースはあるはず そんなときにTODO型を使うと ・とりあえずビルドを通すことができる

    ・やるべき型をメモしておけるので、anyより便利 // 内部的にはany でエラーを回避しつつ、本来当てたい型をメモしておける const foo: TODO<Article> = getArticles();   const foo = getArticles(); // なんかエラー出るんだけど!!! ↓
  8. 27.

    Vueの型解決エラーはComputedの返り値を書け ・VueのSFCをTS化する最中に、どうしても  this.hogehoge の型が解決できないときがある ・こういうときはcomputedの返り値を明⽰的に書くことでほとんど解決した computed: { getOpacity(): number {

    return this.isActive ? 1 : 0; } } 注釈: 循環参照の都合上こうなってしまうようです。詳しくは公式ドキュメント参照 → https://jp.vuejs.org/v2/guide/typescript.html#戻り値の型にアノテーションをつける
  9. 28.