第20-21讲、Vue3.x中集成Typescript 使用Typescript

一、Vue3.x集成Typescript

Ts基础教程：https://www.itying.com/goods-905.html

# 1\. Install Vue CLI, if it's not already installed
npm install --global @vue/cli

# 2\. Create a new project, then choose the "Manually select features" option
vue create my-project-name

# If you already have a Vue CLI project without TypeScript, please add a proper Vue CLI plugin:
vue add typescript

image-20201108121622154.png

image-20201108121848583.png

image-20201108121935756.png

二、Vue3.x集成Typescript后定义组件

vue3.x中集成ts后请确保组件的 script 部分已将语言设置为 TypeScript

要让 TypeScript 正确推断 Vue 组件选项中的类型，需要使用 defineComponent 全局方法定义组件

import { defineComponent } from 'vue'

const Component = defineComponent({
  // 已启用类型推断
})

1、定义一个基于ts的Home组件

2、定义一个接口约束Home组件中data的数据类型

3、方法、计算属性中约束数据类型

三、Vue3.x集成Typescript与组合式 API 一起使用