Vue3+TypeScript 完整项目上手教程

朱叶民 發表於 2021-12-8 09:05:00

转自：https://juejin.cn/post/6875713523968802829
<h1 class="article-title" data-v-9a738c86="">Vue3拥抱TypeScript的正确姿势</h1>
<div class="article-content" data-v-9a738c86="">
<div class="markdown-body">
<code>TypeScript</code> 是JS的一个超集，主要提供了类型系统和**对ES6的支持，**使用 <code>TypeScript</code> 可以增加代码的可读性和可维护性，在 <code>react</code> 和 <code>vue</code> 社区中也越来越多人开始使用<code>TypeScript</code>。从最近发布的 <code>Vue3</code> 正式版本来看， <code>Vue3</code> 的源码就是用 <code>TypeScript</code> 编写的，更好的 <code>TypeScript</code> 支持也是这一次升级的亮点。当然，在实际开发中如何正确拥抱 <code>TypeScript</code> 也是迁移至 <code>Vue3</code> 的一个小痛点，这里就针对 <code>Vue3</code> 和 <code>TypeScript</code> 展开一些交流。
<img alt="image.png" class="medium-zoom-image lazyload" loading="lazy" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/745379c19b8447258c27be606a3918fe~tplv-k3u1fbpfcp-watermark.awebp">
<blockquote>
96.8%的代码都是TypeScript，支持的力度也是相当大💪
</blockquote>
Vue3入口
<h2 data-id="heading-0">项目搭建</h2>
在官方仓库的 Quickstart 中推荐用两种方式方式来构建我们的 <code>SPA</code> 项目：
<ul>
<li>vite</li>
</ul>
<pre><code class="hljs language-shell copyable" lang="shell">npm init vite-app sail-vue3 # OR yarn create vite-app sail-vue3
复制代码</code></pre>
<ul>
<li>vue-cli</li>
</ul>
<pre><code class="hljs language-shell copyable" lang="shell">npm install -g @vue/cli # OR yarn global add @vue/cli
vue create sail-vue3
# select vue 3 preset
复制代码</code></pre>
<code>vite</code> 是一个由原生ESM驱动的Web开发构建工具，打开 <code>vite</code> 依赖的 <code>package.json</code> 可以发现在 <code>devDependencies</code> 开发依赖里面已经引入了<code>TypeScript</code> ，甚至还有 <code>vuex</code> , <code>vue-router</code> , <code>less</code> , <code>sass</code> 这些本地开发经常需要用到的工具。 <code>vite</code> 轻量，开箱即用的特点，满足了大部分开发场景的需求，作为快速启动本地 <code>Vue</code> 项目来说，这是一个非常完美的工具。
<blockquote>
后面的演示代码也是用vite搭的
</blockquote>
从 <code>vue2.x</code> 走过来的掘友肯定知道 <code>vue-cli</code> 这个官方脚手架， <code>vue3</code> 的更新怎么能少得了 <code>vue-cli</code> 呢， <code>vue-cli</code> 更强调的是用 <code>cli</code> 的方式进行交互式的配置，选择起来更加灵活可控。丰富的官方插件适配，GUI的创建管理界面，标准化开发流程，这些都是 <code>vue-cli</code> 的特点。
<ul>
<li>vue-cli ✖ TypeScript STEP1</li>
</ul>
<img alt="vue3.png" class="medium-zoom-image lazyload" loading="lazy" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/327d5d765e5c404faa88626dd467d451~tplv-k3u1fbpfcp-watermark.awebp">
<ul>
<li>vue-cli ✖ TypeScript STEP2</li>
</ul>
<img alt="vue33.png" class="medium-zoom-image lazyload" loading="lazy" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fb58d5fc0d744865a76b92fd542f9203~tplv-k3u1fbpfcp-watermark.awebp">
<blockquote>
想要预装TypeScript，就需要选择手动配置，并check好TypeScript
</blockquote>
忘记使用选择 <code>TypeScript</code> 也没事，加一行cli命令就行了
<pre><code class="hljs language-shell copyable" lang="shell">vue add typescript
复制代码</code></pre>
最后，别忘了在 <code>.vue</code> 代码中，给 <code>script</code> 标签加上 <code>lang="ts"</code> 
<pre><code class="hljs language-html copyable" lang="html"><script lang="ts">
复制代码</code></pre>
<h2 data-id="heading-1">Option API风格</h2>
在 <code>Vue2.x</code> 使用过 <code>TypeScript</code> 的掘友肯定知道引入 <code>TypeScript</code> 不是一件简单的事情：
<ol>
<li>要用 <code>vue-class-component</code> 强化 <code>vue</code> 组件，让 <code>Script</code> 支持 <code>TypeScript</code> 装饰器</li>
<li>用 <code>vue-property-decorator</code> 来增加更多结合 <code>Vue</code> 特性的装饰器</li>
<li>引入 <code>ts-loader</code> 让 <code>webpack</code> 识别 <code>.ts</code>  <code>.tsx</code> 文件</li>
<li>.....</li>
</ol>
然后出来的代码风格是这样的：
<pre><code class="hljs language-typescript copyable" lang="typescript">@Component({
components:{ componentA, componentB},
})
export default class Parent extends Vue{
@Prop(Number) readonly propA!: number | undefined
@Prop({ default: 'default value' }) readonly propB!: string
@Prop([String, Boolean]) readonly propC!: string | boolean | undefined

// data信息
message = 'Vue2 code style'

// 计算属性
private get reversedMessage (): string[] {
 return this.message.split(' ').reverse().join('')
}

// method
public changeMessage (): void {
this.message = 'Good bye'
}
}
复制代码</code></pre>
<code>class</code> 风格的组件，各种装饰器穿插在代码中，有点感觉自己不是在写 <code>vue</code> ，些许凌乱🙈，所以这种曲线救国的方案在 <code>vue3</code> 里面肯定是行不通的。
在 <code>vue3</code> 中可以直接这么写：
<pre><code class="hljs language-typescript copyable" lang="typescript">import { defineComponent, PropType } from 'vue'

interface Student {
name: string
class: string
age: number
}

const Component = defineComponent({
props: {
success: { type: String },
callback: {
 type: Function as PropType<() => void>
},
student: {
 type: Object as PropType<Student>,
 required: true
}
},
data() {
return {
 message: 'Vue3 code style'
}
},
computed: {
reversedMessage(): string {
 return this.message.split(' ').reverse().join('')
}
}
})
复制代码</code></pre>
<code>vue</code> 对 <code>props</code> 进行复杂类型验证的时候，就直接用 <code>PropType</code> 进行强制转换， <code>data</code> 中返回的数据也能在不显式定义类型的时候推断出大多类型， <code>computed</code> 也只用返回类型的计算属性即可，代码清晰，逻辑简单，同时也保证了 <code>vue</code> 结构的完整性。
<h2 data-id="heading-2">Composition API风格</h2>
在 <code>vue3</code> 的 <code>Composition API</code> 代码风格中，比较有代表性的api就是 <code>ref</code> 和 <code>reactive</code> ，我们看看这两个是如何做类型声明的：
<h3 data-id="heading-3">ref</h3>
<pre><code class="hljs language-typescript copyable" lang="typescript">import { defineComponent, ref } from 'vue'

const Component = defineComponent({
setup() {
const year = ref(2020)
const month = ref<string | number>('9')

month.value = 9 // OK
const result = year.value.split('') // => Property 'split' does not exist on type 'number'
}
})
复制代码</code></pre>
分析上面的代码，可以发现如果我们不给定 <code>ref</code> 定义的类型的话， <code>vue3</code> 也能根据初始值来进行类型推导，然后需要指定复杂类型的时候简单传递一个泛型即可。
<blockquote>
Tips：如果只有setup方法的话，可以直接在defineComponent中传入setup函数
</blockquote>
<pre><code class="hljs language-typescript copyable" lang="typescript">const Component = defineComponent(() => {
const year = ref(2020)
const month = ref<string | number>('9')

month.value = 9 // OK
const result = year.value.split('') // => Property 'split' does not exist on type 'number'
})
复制代码</code></pre>
<h3 data-id="heading-4">reactive</h3>
<pre><code class="hljs language-typescript copyable" lang="typescript">import { defineComponent, reactive } from 'vue'

interface Student {
name: string
class?: string
age: number
}

export default defineComponent({
name: 'HelloWorld',
setup() {
const student = reactive<Student>({ name: '阿勇', age: 16 })
// or
const student: Student = reactive({ name: '阿勇', age: 16 })
// or
const student = reactive({ name: '阿勇', age: 16, class: 'cs' }) as Student
}
})
复制代码</code></pre>
声明 <code>reactive</code> 的时候就很推荐使用接口了，然后怎么使用类型断言就有很多种选择了，这是 <code>TypeScript</code> 的语法糖，本质上都是一样的。
<h2 data-id="heading-5">自定义Hooks</h2>
<code>vue3</code> 借鉴 <code>react hooks</code> 开发出了 <code>Composition API</code> ，那么也就意味着 <code>Composition API</code> 也能进行自定义封装 <code>hooks</code> ，接下来我们就用 <code>TypeScript</code> 风格封装一个计数器逻辑的 <code>hooks</code> （ <code>useCount</code> ）:
首先来看看这个 <code>hooks</code> 怎么使用：
<pre><code class="hljs language-typescript copyable" lang="typescript">import { ref } from '/@modules/vue'
importuseCount from './useCount'

export default {
name: 'CountDemo',
props: {
msg: String
},
setup() {
const { current: count, inc, dec, set, reset } = useCount(2, {
 min: 1,
 max: 15
})
const msg = ref('Demo useCount')

return {
 count,
 inc,
 dec,
 set,
 reset,
 msg
}
}
}
复制代码</code></pre>
出来的效果就是：
<img alt="vue-type.gif" class="medium-zoom-image lazyload" loading="lazy" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8e9c5e6c34bc42a0a290d8e700f69acb~tplv-k3u1fbpfcp-watermark.awebp">
贴上 <code>useCount</code> 的源码：
<pre><code class="hljs language-typescript copyable" lang="typescript">import { ref, Ref, watch } from 'vue'

interface Range {
min?: number,
max?: number
}

interface Result {
current: Ref<number>,
inc: (delta?: number) => void,
dec: (delta?: number) => void,
set: (value: number) => void,
reset: () => void
}

export default function useCount(initialVal: number, range?: Range): Result {
const current = ref(initialVal)
const inc = (delta?: number): void => {
if (typeof delta === 'number') {
 current.value += delta
} else {
 current.value += 1
}
}
const dec = (delta?: number): void => {
if (typeof delta === 'number') {
 current.value -= delta
} else {
 current.value -= 1
}
}
const set = (value: number): void => {
current.value = value
}
const reset = () => {
current.value = initialVal
}

watch(current, (newVal: number, oldVal: number) => {
if (newVal === oldVal) return
if (range && range.min && newVal < range.min) {
 current.value = range.min
} else if (range && range.max && newVal > range.max) {
 current.value = range.max
}
})

return {
current,
inc,
dec,
set,
reset
}
}
复制代码</code></pre>
分析源码
这里首先是对 <code>hooks</code> 函数的入参类型和返回类型进行了定义，入参的 <code>Range</code> 和返回的 <code>Result</code> 分别用一个接口来指定，这样做了以后，最大的好处就是在使用 <code>useCount</code> 函数的时候，ide就会自动提示哪些参数是必填项，各个参数的类型是什么，防止业务逻辑出错。 <img alt="屏幕快照 2020-09-23 下午10.49.36.png" class="medium-zoom-image lazyload" loading="lazy" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b4d76a72c00a4379813c701960c50e4a~tplv-k3u1fbpfcp-watermark.awebp"> 接下来，在增加 <code>inc</code> 和减少 <code>dec</code> 的两个函数中增加了 <code>typeo</code> 类型守卫检查，因为传入的 <code>delta</code> 类型值在某些特定场景下不是很确定，比如在 <code>template</code> 中调用方法的话，类型检查可能会失效，传入的类型就是一个原生的 <code>Event</code> 。
关于 <code>ref</code> 类型值，这里并没有特别声明类型，因为 <code>vue3</code> 会进行自动类型推导，但如果是复杂类型的话可以采用类型断言的方式： <code>ref(initObj) as Ref<ObjType></code> 
<h2 data-id="heading-6">小建议 💡</h2>
AnyScript
在初期使用 <code>TypeScript</code> 的时候，很多掘友都很喜欢使用 <code>any</code> 类型，硬生生把<code>TypeScript</code> 写成了 <code>AnyScript</code> ，虽然使用起来很方便，但是这就失去了 <code>TypeScript</code> 的类型检查意义了，当然写类型的习惯是需要慢慢去养成的，不用急于一时。
Vetur
<code>vetur</code> 代码检查工具在写vue代码的时候会非常有用，就像构建 <code>vue</code> 项目少不了 <code>vue-cli</code> 一样，<code>vetur</code> 提供了 <code>vscode</code> 的插件支持，赶着升级 <code>vue3</code> 这一波工作，顺带也把 <code>vetur</code> 也带上吧。 <img alt="屏幕快照 2020-09-23 下午10.39.12.png" class="medium-zoom-image lazyload" loading="lazy" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/02deaeb5922d4ca3afb4dd4bb375f9a0~tplv-k3u1fbpfcp-watermark.awebp">
<h2 data-id="heading-7">结束</h2>
不知不觉， <code>Vue</code> 都到3的One Piece时代了， <code>Vue3</code> 的新特性让拥抱 <code>TypeScript</code> 的姿势更加从容优雅， <code>Vue</code> 面向大型项目开发也更加有底气了。（文中有任何错误，欢迎掘友指正）
</div>
</div>

</div>
<div id="MySignature" role="contentinfo">
作者：小德cyj 出处：http://www.cnblogs.com/dongzhuangdian 欢迎转载，希望注明出处 
来源：https://www.cnblogs.com/dongzhuangdian/p/15659847.html

頁: [1]

琼殿技术论坛's Archiver

Vue3+TypeScript 完整项目上手教程