TypeScript 支援

Nuxt 4 是用 TypeScript 構建的，並提供了一流的 TypeScript 支援。從自動生成的型別定義到全端型別安全，讓您的開發體驗更上一層樓。

為什麼選擇 TypeScript？

TypeScript 不僅僅是為了找 Bug，它提供了強大的 IDE 支援 (自動完成、重構)，讓開發過程更加流暢。Nuxt 會自動生成 .nuxt/tsconfig.json，為您的專案提供完整的環境型別。

Takeover Mode

為了獲得最佳效能，建議在 VS Code 中啟用 Volar (Vue Language Features) 擴充套件，並停用內建的 TypeScript 服務 (Takeover Mode)。

型別檢查

Nuxt 的開發伺服器預設不會執行型別檢查 (為了速度)。要啟用即時型別檢查或在建置時檢查，請安裝 vue-tsc。

Terminal

pnpm add -D vue-tsc typescript

在 nuxt.config.ts 中啟用：

nuxt.config.ts

export default defineNuxtConfig({
  typescript: {
    typeCheck: true,
    strict: true
  }
})

API 型別安全

這是 Nuxt 最強大的功能之一。當您使用 useFetch 呼叫內部 API 時，Nuxt 會自動推斷回傳值的型別，無需手動定義介面。

server/api/user.ts

Server

export default defineEventHandler(() => {
  return {
    id: 1,
    name: 'Zayn',
    role: 'admin' as const
  }
})

app.vue

Client

const { data } = await useFetch('/api/user')

// IDE 會自動提示 data.value.name (string)
// data.value.role 的型別是 'admin'
console.log(data.value?.name)

元件 Props

使用 defineProps 搭配 TypeScript 介面，可以獲得完美的 Props 型別提示。

components/MyComponent.vue

<script setup lang="ts">
interface Props {
  title: string
  count?: number
  user: {
    id: number
    name: string
  }
}

// 使用 withDefaults 設定預設值
const props = withDefaults(defineProps<Props>(), {
  count: 0
})
</script>