Nuxt2系の環境下にTypeScriptを導入する方法についてのご紹介です。
最初のプロジェクト作成の際に、TSを選択せずに後から導入したくなったパターンになります。
必要なパッケージをインストール
$ yarn add @nuxt/typescript-build @nuxt/types
nuxt.config.jsに追記
export default {
//省略
buildModules: ['@nuxt/typescript-build']
}
tsconfig.json
{
"compilerOptions": {
"target": "ES2018",
"module": "ESNext",
"moduleResolution": "Node",
"lib": [
"ESNext",
"ESNext.AsyncIterable",
"DOM"
],
"esModuleInterop": true,
"allowJs": true,
"sourceMap": true,
"strict": true,
"noEmit": true,
"experimentalDecorators": true,
"baseUrl": ".",
"paths": {
"@/*": [
"./app/*"
],
"~/*": [
"./*"
]
},
"types": [
"@types/node",
"@nuxt/types",
"@nuxtjs/firebase",
"@nuxtjs/dayjs",
"nuxt-i18n"
]
},
"exclude": [
"node_modules",
".nuxt",
"dist"
]
}
動作確認
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
mounted() {
const str: string = 'Hello World'
console.log(str)
},
})
</script>