TypeScript 是JS的一个超集,主要提供了类型系统和对ES6的支持,使用 TypeScript 可以增加代码的可读性和可维护性,在 react 和 vue 社区中也越来越多人开始使用TypeScript。从最近发布的 Vue3 正式版本来看, Vue3 的源码就是用 TypeScript 编写的,更好的 TypeScript 支持也是这一次升级的亮点。当然,在实际开发中如何正确拥抱 TypeScript 也是迁移至 Vue3 的一个小痛点,这里就针对 Vue3 和 TypeScript 展开一些交流。
8%的代码都是TypeScript,支持的力度也是相当大💪
- Vue3入口: https://github.com/vuejs/vue-next
项目搭建
在官方仓库的 Quickstart 中推荐用两种方式方式来构建我们的 SPA 项目:
- vite
- npm init vite-app sail-vue3 # OR yarn create vite-app sail-vue3
- vue-cli
- npm install -g @vue/cli # OR yarn global add @vue/clivue create sail-vue3# select vue 3 preset
vite 是一个由原生ESM驱动的Web开发构建工具,打开 vite 依赖的 package.json 可以发现在 devDependencies 开发依赖里面已经引入了TypeScript ,甚至还有 vuex , vue-router , less , sass 这些本地开发经常需要用到的工具。vite 轻量,开箱即用的特点,满足了大部分开发场景的需求,作为快速启动本地 Vue 项目来说,这是一个非常完美的工具。
后面的演示代码也是用vite搭的
从 vue2.x 走过来的掘友肯定知道 vue-cli 这个官方脚手架, vue3 的更新怎么能少得了 vue-cli 呢, vue-cli 更强调的是用 cli 的方式进行交互式的配置,选择起来更加灵活可控。丰富的官方插件适配,GUI的创建管理界面,标准化开发流程,这些都是 vue-cli 的特点。
- vue-cli ✖ TypeScript STEP1
- vue-cli ✖ TypeScript STEP2
想要预装TypeScript,就需要选择手动配置,并check好TypeScript
忘记使用选择 TypeScript 也没事,加一行cli命令就行了
- vue add typescript
最后,别忘了在 .vue 代码中,给 script 标签加上 lang="ts"
-
-
- ...
-
-
-
-
-
- tsx写法
- import { ref, reactive } from "vue";
- import { AddressList, NavBar, Toast, Popup } from "vant";
- import AddressEdit from './AddressEdit'
- import router from '@/router'
-
- export default {
- setup() {
- const chosenAddressId = ref('1')
- const showEdit = ref(false)
-
- const list = reactive([
- {
- id: '1',
- name: '张三',
- tel: '13000000000',
- address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
- isDefault: true,
- },
- {
- id: '2',
- name: '李四',
- tel: '1310000000',
- address: '浙江省杭州市拱墅区莫干山路 50 号',
- },
- ])
- const disabledList = reactive([
- {
- id: '3',
- name: '王五',
- tel: '1320000000',
- address: '浙江省杭州市滨江区江南大道 15 号',
- },
- ])
-
- const onAdd = () => {
- showEdit.value = true
- }
- const onEdit = (item: any, index: string) => {
- Toast('编辑地址:' + index);
- }
-
- const onClickLeft = () => {
- router.back()
- }
-
- const onClickRight = () => {
- router.push('/todoList')
- }
-
- return () => {
- return (
- "background:#f7f8fa">
-
- title="地址管理"
- left-text="返回"
- right-text="Todo"
- left-arrow
- onClick-left={onClickLeft}
- onClick-right={onClickRight}
- />
-
- vModel={chosenAddressId.value}
- list={list}
- disabledList={disabledList}
- disabledText="以下地址超出配送范围"
- defaultTagText="默认"
- onAdd={onAdd}
- onEdit={onEdit}
- />
-
'show' ]} position="bottom" round style="height: 80%" > -
-
-
- );
- };
- }
- };
结束
不知不觉, Vue 都到3的One Piece时代了, Vue3 的新特性让拥抱 TypeScript 的姿势更加从容优雅, Vue 面向大型项目开发也更加有底气了,点击查看更多。