Vue TypeScript コンパイルできない

TypeScript

Vueで、最初にサーバーを立ち上げようとしたら、コンパイルエラーが出ました。

 

エラー

ERROR TS1149: File name ‘/home/vagrant/myproject/html/src/models/sample.ts’ differs from already included file name ‘/home/vagrant/myproject/html/src/models/Sample.ts’ only in casing.

 

解決

importで参照しているファイル名を間違えていました。
結論として、小文字始まりのファイル名(正しいファイル名)でインポートすればOK。

実際には、
myproject/html/src/models/sample.tsというファイルがありますが、
myproject/html/src/components/Sample.vue
sample.tsを下記のように参照していました。

// myproject/html/src/components/Sample.vue

import {Sample} from ‘@/models/Sample.ts’

 

これだけで、エラー回避できました。

// myproject/html/src/components/Sample.vue

import {Sample} from ‘@/models/sample.ts’

まとめ

Vueに限らずimportするときは、正しいファイル名にしましょうという当たり前のことでした・・・。

今回の県は違うかもしれませんが、
TypeScript使っていると、他にも型など気を使わないといけないですね・・・。

コメント