Gridsome に Typescript を入れる
Gridsomeプロジェクトに Typescriot を導入する
2020-06-13T17:00:00.000Z
後々のことを考えて Gridsome プロジェクトに Typescript を導入しておこうと思った。
Plugin を検索すると以下の二つが出てきた
- https://gridsome.org/plugins/gridsome-plugin-typescript
- https://gridsome.org/plugins/gridsome-plugin-ts
どちらも ts-loader を適用するだけのように見えるが、今回はよく使われていそうで、 README がわかりやすかった前者を利用することにした。
依存パッケージのダウンロード
npm install -D typescript ts-loader gridsome-plugin-typescript
設定ファイルの修正
gridsome.config.js の plugin フィールドに以下を追加する
{
use: 'gridsome-plugin-typescript',
}
tsconfig.json を追加する
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"noImplicitReturns": true,
"outDir": "./dist/",
"sourceMap": true,
"strict": true
},
"include": ["./src/**/*"]
}
Vue コンポーネントの型情報追加
vue-shims.d.ts を作成して以下を記載
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}