VSCodeでVite + Vue3 + TypeScriptの開発環境のセットアップ

Type Safeな世界がやっと見えてきた。。。

すべては↑にかかれている（ありがとうございます）

実は先日試してたんだけど、そのときはなぜか再起動してもPluginが反映されていない挙動が発生しており？？？ってなっていましたが、今日うまく言ったよかった。

そしたら色々わかった。

なぜか InjectionKey をimportするとエラーがでてアプリが動かないのでなぜだーとかやってた件。

今回いれたPluginに注釈されたところ、InjectionKey は型なので、型としてimportしろと注意。なるほど。

before

import { InjectionKey, reactive, readonly } from "vue";

after

import type { InjectionKey } from "vue";
import { reactive, readonly } from "vue";

typeの読み込みの件

↑の記事参考にTODOリストっぽいアプリを開発してましたが、なぜか型定義したファイルをimportしようとするとエラーがでてしまい、アプリ自体がビルドできませんでした。。。

Pluginが表示する注釈確認すると、パスと type を変更＆付与してあげたらうまくいきました。（ ~/src/stores/main-nodes/{index.ts,types.ts} という構造で管理している）

before

import {
  Item,
  Marker
} from "@/stores/main-nodes";

after

import type {
  Item,
  Marker
} from "@/stores/main-nodes/types";

とりあえずなんかみえてきたぞ〜。あとはCIかcommitする前に型チェックするコマンドを実行するような仕組みを作りたい。（Viteは型チェックしてくれないとのこと）

ITの隊長のブログ