vue3+ts组件页面怎么写

在 Vue3 中使用 TypeScript 编写组件页面，需要先安装 `vue` 和 `vue-template-compiler` 及 `@vue/compiler-sfc`，然后在 `tsconfig.json` 中配置 `"strict": true`。

下面是一个示例：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script lang="ts">
import { reactive, defineComponent } from 'vue';

interface State {
  title: string;
  content: string;
}

export default defineComponent({
  name: 'MyComponent',
  setup() {
    const state = reactive<State>({
      title: 'Hello, Vue3!',
      content: 'This is a demo for Vue3 component with TypeScript.'
    });

    return {
      title: state.title,
      content: state.content
    };
  }
});
</script>

在这个示例中，我们使用了 TypeScript 编写了一个 State 接口，并在 `setup` 函数中使用了 `defineComponent` 函数来创建组件。需要注意的是，在 Vue3 中，组件必须使用 `defineComponent` 函数来替代 Vue2 中的 `Vue.extend`，并且使用 `reactive` 函数来创建响应式对象。