Nuxt TypeScript 2 11 - ChoDragon9/posts GitHub Wiki
์ค์น ์์๋ ๋ค์๊ณผ ๊ฐ๋ค.
$ npm install -g npx # npx ์ค์น. create-nuxt-app์ ์ค์นํ๊ธฐ ์ํจ.
$ npx create-nuxt-app <project-name> # nuxt ์ค์น
$ cd <project-name>
$ npm install --save-dev @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,
"baseUrl": ".",
"paths": {
"~/*": [
"./*"
],
"@/*": [
"./*"
]
},
"types": [
"@types/node",
"@nuxt/types"
]
},
"exclude": [
"node_modules"
]
}TypeScript์์ *.vue ํ์ฅ์ ํ์ผ์ ์ฌ์ฉํ๊ธฐ ์ํ ์ค์ ์ด๋ค. vue-shim.d.ts ํ์ผ์ ์ถ๊ฐํ๋ค ์๋ ์ฝ๋๋ฅผ ์์ฑํ๋ค.
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}nuxt.config.js์ buildModules์ @nuxt/typescript-build๋ฅผ ์ถ๊ฐํ๋ค.
buildModules: [
+ '@nuxt/typescript-build'
],๋จผ์ ๋ก์ปฌ ์๋ฒ๋ฅผ ๋์ด๋ค.
$ npm run devpages/index.vue ํ์ผ์์ TypeScript ์ฝ๋๋ฅผ ์์ฑํ์ฌ ํ์ธํด๋ณด์.
<script lang="ts">
import Logo from '~/components/Logo.vue'
interface User {
firstName: string
lastName: string
}
export default {
components: {
Logo
},
data (): User {
return {
firstName: 'Peter',
lastName: 'Cho'
}
}
}
</script>