会社で[[Vite]]と[[TypeScript]]を使った勉強会をしたら、[[IntelliJ IDEA]]で型エラーがちゃんと出なかったので..。[[WebStorm]]を使っている参加者は表示されてた。
## インストール
https://vitejs.dev/guide/
```
$ npm init @vitejs/app vite-use --template vue-ts
npx: installed 4 in 7.32s
Scaffolding project in C:\Users\syoum\tmp\vite-use...
Done. Now run:
cd vite-use
npm install (or `yarn`)
npm run dev (or `yarn dev`)
$ cd vite-use
$ npm install
$ npm run dev
```
```
Vite dev server running at:
> Network: http://192.168.100.108:3000/
> Local: http://localhost:3000/
> Network: http://172.19.192.1:3000/
ready in 2067ms.
```
## IntelliJ IDEAで開いてコードを編集する
[[Composition API]]を使った実装にする。
```typescript
import { ref, defineComponent } from 'vue'
export default defineComponent({
name: 'HelloWorld',
props: {
msg: {
type: String,
required: true
}
},
setup: () => {
const count = ref(0)
return { count }
}
})
```
↓
```typescript
import { defineComponent, reactive, } from "vue";
export default defineComponent({
props: {
msg: { type: String, required: true },
},
setup() {
const state = reactive({
count: 0,
});
// ここを追加してみたがエラーにならない。。
const orange: string = 333;
return {
state,
};
},
});
```
## エラーにならない理由
[[Vite]]は型チェックをしないから。
> [[ViteのTypeScript対応#TypeScript対応について]]
[[IntelliJ IDEA]]の設定が以下になっていたため。
- TypeScript language serviceが有効になっていた
- [[IntelliJ IDEA]]に対するInspectionsが無効になっていた
## 対応
設定を変更する。
以下記事と真逆なことをやるので切ない😢
https://blog.mamansoft.net/2020/03/29/use-typescript-and-eslint-with-intellij-idea/
### TypeScript language serviceを無効にする
意図したものだが、[[IntelliJ IDEA]]の挙動が安定しないので無効にする。
![[Pasted image 20210103205644.png]]
チェックの方法が[[IntelliJ IDEA]]に依存するため可能なら有効にしたい。
今後[[Vite]]や[[Svelte]]のように[[esbuild]]の[[トランスパイル]]機能だけを使って型チェックをしない[[フロントエンドビルドツール]]が増えるならその方がいいかも。
### Inspectionsを有効にする
[[ESLint]]に任せていたので、それ以外は無効にしていた。
有効に戻す。
![[Pasted image 20210103210247.png]]
## その他
[[IntelliJ IDEA]]の設定を大きく変えたので他プロジェクトに問題が発生しないか不安。
[[ESLint]]と矛盾するルールさえなければ平気そうだから大丈夫だろうか..
あとはTypeScriptのバージョンを[[IntelliJ IDEA]]がちゃんと考慮してくれているのか..など。
### Togowlの場合
[[Nuxt2]]([[Vue2]])と[[Composition API]]を使った場合。
| Typescript language service | Inspections | 挙動 |
| --------------------------- | ----------- | ----------------------- |
| 有効 | 有効 | `props`にも挙動が効く |
| 有効 | 無効 | `props`には挙動効かない |
| 無効 | 有効 | 激しくエラーになる |
| 無効 | 無効 | ??? |
こんな感じになるかと思いきや関係なかった..[[IntelliJ IDEA]]の気分次第よ😇