DAY10: 使用 TypeScript 和 TSX 進行 Nuxt.js 開發

在 Nuxt.js 中啟用 TypeScript

npm install --save-dev typescript @nuxt/typescript-build

接著，執行以下命令來生成 TypeScript 配置文件 tsconfig.json：

npx tsc --init

在 Nuxt.js 的配置文件 nuxt.config.js 中啟用 TypeScript 支援：

export default {
  buildModules: ['@nuxt/typescript-build'],
}

使用 TypeScript 和 TSX

首先，創建一個 TypeScript 文件，例如 MyComponent.ts：

// components/MyComponent.ts

import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  setup() {
    const message = ref('Hello, TypeScript and TSX!');

    return { message };
  },
  template: `
    <div>
      <h1>{{ message }}</h1>
    </div>
  `,
});

接下來，讓我們在一個頁面中使用這個組件。創建一個頁面文件 my-page.vue：

<!-- pages/my-page.vue -->

<template>
  <div>
    <MyComponent />
  </div>
</template>

<script>
import MyComponent from '~/components/MyComponent';

export default {
  components: {
    MyComponent,
  },
};
</script>

這裡，我們導入了 MyComponent 組件並在頁面模板中使用它。

現在，啟動您的 Nuxt.js 項目，並訪問相應的頁面，您將看到使用 TypeScript 和 TSX 創建的組件在工作！