ITの隊長のブログ

ITの隊長のブログです。Pythonを使って仕事しています。最近はWebに戻ってきたお(^ω^ = ^ω^)

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

スポンサードリンク

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

zenn.dev

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

実は先日試してたんだけど、そのときはなぜか再起動しても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の読み込みの件

qiita.com

↑の記事参考に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は型チェックしてくれないとのこと)