VueCLIでTypeScriptはじめたらちょっとハマった話

こんにちわ、ななきです。

今日はクリぼっちだったのでこちらの記事をもとにvue-cliでTypeScript+Vue環境を作っていたのですがちょこっとハマったので原因とか抜きにして自分用にメモしておきます。

Vuexによる状態管理を含む最高に快適な Vue.js + TypeScript の開発環境を目指す話

前提として私はvscodeを使用しているので他のエディタやIDEだと挙動が違う可能性があります。

環境構築

プロジェクト作成時にチェックした項目はこんな感じです。

そしてハマったポイントとしてはこんな感じです。

– .tsファイル内import時のvscode上でのエラー
– デフォルトの test:unit コマンドでのエラー
– style-resources-loaderでのscssファイルのimport

そんな感じで順番にいきます。

.tsファイル内import時のIDE上でのエラー

こちらは.tsファイル内で.vueファイルをimportした際にvscode上でのみエラーがでました(ビルドは通ります)。

原因はshims-vue.d.ts を編集していたことらしく、前述の記事ではshims-vue.d.tsファイルを編集して型を定義していたのですが、shims-vue.d.tsファイルはそのままに別ファイルを作成して方を定義して上げる必要があるみたいです。

TypeScriptほんのり始めたばかりで内部的な仕組みは把握していないのでわかる方がいたら教えて頂けると嬉しいです。

 

デフォルトの test:unit コマンドでのエラー

プロジェクトを作成したままだと test:unit  コマンドで.vueファイルの import のエラーがでます。

こちらのissueでも話題に上がってたようでキャッシュを先に削除するように変更したら動くようになりました。

"test:unit": "vue-cli-service test:unit"

"jest --clearCache && vue-cli-service test:unit"

https://github.com/vuejs/vue-cli/issues/1879#issuecomment-438459961

style-resources-loaderでのscssファイルのimport

これは完全にいろいろ書いてたら動いてしまったパターン+TypeScript関係ないやつなんですけど、各コンポーネントファイルのstyleから variable.scss  の変数参照したかったやつです。

yarn add -D vue-cli-plugin-style-resources-loader

してから vue.config.js  に下記の記述をしました。

 

まとめ

TypeScriptよくわからないな状態ですが、同じところでハマっている人がいたら解決に近づけるといいなという気持ちです。

とりあえずわからないなりにこれからしばらくTypeScript触っていこうと思います。

Archives

MasatoChiba
Frontend Developer