TypeScript Vue 怎么用

平时做前端开发时，很多人会碰到“用Vue写项目时，要不要加TypeScript”的疑问，毕竟TypeScript的“类型检查”和Vue的组合，既能帮我们少踩坑，又能让代码更易维护，今天就用生活化的例子，把用法拆解成几步讲清楚。

第一步：先给项目“装个TypeScript的小工具”

如果是从头开始做新Vue项目，不用自己手动搭架子，用官方的创建工具就行。举个例子，就像你要煮奶茶，不用从洗茶、煮奶一步步来，用现成的奶茶粉冲调包更省心。打开电脑的命令行，输入npm create vue@latest，工具会弹出选项，只要选上“Add TypeScript”，剩下的配置它都会自动做好，就这么简单。

如果是已经有的老Vue项目，想加TypeScript，也不用慌，官方有对应的适配插件，就像给旧自行车装个新的挡泥板，找对应的配件装上就行，不用把车拆了重做。

第二步：给代码“贴个身份标签”——类型标注

很多新手觉得TypeScript复杂，其实核心就是给变量、函数“说清楚它是什么类型”，就像给快递贴个“生鲜”“文件”的标签，分拣时不会搞错。

比如写Vue里的组件数据，以前写const name = "小明"，TypeScript会自动认出name是字符串，没法赋值成数字；要是想明确告诉它“这里存的是字符串”，也可以手动写const name: string = "小明"。再比如组件里的函数，写个“计算商品总价”的函数，以前可能直接写function getTotal(price, count) { return price * count }，现在可以给参数加类型：function getTotal(price: number, count: number): number { return price * count }，就像给收银员说“这个是单价，这个是数量，算出来的是总价”，不会出现“单价写了个字符串，算出来NaN”的低级错误。

第三步：Vue组件里的“专属类型配置”

Vue有自己的组件规则，TypeScript也有对应的适配，就像给定制的衣服配专属的衣架，不用普通衣架凑活。

如果是用Vue 3的<script setup>语法，不用写复杂的配置，只要在<script>标签里加lang="ts"就行，就像给普通的笔记本加个“防水封皮”，告诉编辑器“这里要用TypeScript规则写”。要是要定义组件的props（就是父组件传给子组件的参数），以前用defineProps直接写数组，现在可以用TypeScript的接口（可以理解成“参数的要求清单”）：

`typescript

interface Props {

title: string; // 必填，字符串

count?: number; // 可选，数字，加?表示可以不传

}

const props = defineProps<Props>()

`

就像给快递单写清楚“收件人姓名（必填）、电话（可选）”，子组件拿到参数就知道该怎么用，不会错用。

第四步：遇到问题别慌，用官方“说明书”

刚开始用可能会碰到“编辑器报红”，比如某个类型没写对，这时候不用硬扛，就像组装家具碰到卡壳，看一眼产品说明书就行。Vue和TypeScript的官方文档有专门的入门部分，里面有各种常见场景的例子，比如“怎么给组件的方法加类型”“怎么用Vuex的TypeScript版本”，照着做就行。

另外，不用一开始就把所有代码都改成TypeScript，就像学做饭不用从满汉全席开始，先改核心部分——比如数据复杂的组件、多人协作的模块，先改这部分，既能尝到好处，又不会有太大压力。

其实TypeScript和Vue的组合，本质就是“给代码加了个靠谱的提醒员”，写的时候就告诉你哪里错了，不用等到运行时才发现，慢慢用几次，就能感受到它的省心，不用怕复杂，跟着步骤来，很快就能上手。