みなさん、こんにちは。どんぶラッコです。
本日は、Nuxt.jsでTypeScriptを使えるようにする手順についてまとめようと思います。
過去は様々なライブラリをインストールする必要がありましたが、2019年11月現在、パパッと設定できちゃいます！是非みなさんも試してみてください♪
セットアップ方法
https://typescript.nuxtjs.org/guide/setup.html
yarn add --dev @nuxt/typescript-build
そのあと、nuxt.config.jsを下記のように編集します。
export default {
buildModules: ['@nuxt/typescript-build']
}
次に、tsconfig.json というファイルを作成し、下記の設定をコピペします。
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"lib": [
"esnext",
"esnext.asynciterable",
"dom"
],
"esModuleInterop": true,
"allowJs": true,
"sourceMap": true,
"strict": true,
"noEmit": true,
"baseUrl": ".",
"paths": {
"~/*": [
"./*"
],
"@/*": [
"./*"
]
},
"types": [
"@types/node",
"@nuxt/types"
]
},
"exclude": [
"node_modules"
]
}以上で設定は完了です！
コンポーネントでTypeScriptを使えるようにするには？
typescriptを使うための設定も簡単です！ コンポーネントの <script>タグに lang="ts" を追加するだけ♪
<template>
</template>
<script lang="ts">
</script>また、19年11月現在、コンポーネント内でコンポーネントをインポートしようとするとエラーが発生します。
現状のワークアラウンドはこちら。
https://stackoverflow.com/questions/58474763/nuxt-typescript-error-nuxttypescript-cannot-find-module-my-module
ts-shim.d.ts というファイルを作って、下記を作成すればOKです。
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}これで完了です！
以上、セットアップ方法のご紹介でした♪
