携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情
对于熟悉了 Vue2 + js 模式的开发来说，Vue3+ts的变化让刚刚上手的时候有一种不太适应的感觉，不过用着用着感觉，真香。
在项目页面上，最直观的就是所有后缀为 .js 的文件 都变成了以 .ts 的形式展现。那么什么是 ts 呢？
TypeScript
typeScript 并不是一门新的语言,而是 JavaScript 的超集。从TypeScript的名字来看，它更加强调类型。
我们可以理解为 TypeScript = JavaScript + 类型系统。
特点：
- JavaScript 代码可与 TypeScript 一起工作
- TypeScript 通过类型标注进行编译时的静态类型检查
安装
-
方法1：
npm install -g typescript -
方法2：
VScode 安装ts插件
-
编译ts代码：
tsc app.ts
在Vue3中的使用
vue3 新增了 Composition API 的一些特性： setup()、computed()和 watch()等等。
1. script标签添加：lang="ts"
当是单文件组件时使用
<script lang="ts"></script>
或是：声明setup的形式（vue3 的新语法糖）
<script setup lang="ts"></script>
注：
- 这种形式可以使用纯Typescript声明 props 和抛出事件；
- 声明的变量、函数、import引入的内容、组件都能在模板中直接使用；
- 模板会被编译成与其同一作用域的渲染函数，运行时性能会更好；
- 必须使用 defineProps 和 defineEmits API 来声明 props 和 emits。
2. 定义组件
在Vue3中使用 defineComponent 用来定义组件，方式如下：
3. 标注类型
- ref 会根据初始化时的值推导其类型。变量赋值使用：.value。
const fruits = ref(["西瓜🍉", "香蕉🍌", "草莓🍓"]);
const str1 = ref("");
const myFunc = (index: number) => {
fruits.value = fruits.value[index];
};
- 复杂的类型，用
Ref()或ref()传入一个泛型参数
import { ref } from 'vue'
import type { Ref } from 'vue'
const year: Ref<string | number> = ref('2022')
const year2 = ref<string | number>('2022')
year.value = 2023
year2.value = 2023
computed()会自动从其计算函数的返回值上推导出类型- 除此之外，可以使用
reactive()接收对象，这是一种隐式的形式形式（不推荐）
