在Vue 3中使用Typescript和Jsx

Unreal

本文将介绍如何在Vue 3中使用tsx

首先回答两个问题:

Why Vue 3


在Vue 2中,组件相关的逻辑都被写在一个文件中,经常会出现一个组件几千行代码,非常难以维护;而且一个功能的相关代码通常会分散写在data methods created等各个选项中,想要复用一个功能也是比较困难的。而Vue 3的组合式API正是为了解决这个问题。

Why tsx


Vue中的组件是一个黑盒,你不知道他的内部结构(属性和事件),只能通过文档甚至阅读源码来了解,这样是很耗费时间的。而在tsx中,在编写代码时就可以获得代码提示,组件的内部结构可以一目了然,且具有代码约束力(当你编写了错误的代码时会获得一个报错),这样是可以极大的提高代码编写效率,减少低级错误出现。

组件的类型声明


Props

ts会从vue组件的props声明中推断属性的类型,以下是一些基本的类型推断:

  • String → string
  • Number → number
  • Boolean → boolean
  • Array → unknown[]
  • Object → Record<string, any>
  • Date → string
  • Function → Function
  • Symbol → symbol

你可以通过PropType来进行更加精确的类型声明,建议对所有的Array Object Function都进行声明

import { defineComponent, PropType } from 'vue'
export default defineComponent({
  props: {
    title: String,
    values: {
      type: Array as PropType<number[]>,
      required: true,
    },
    data: Object as PropType<{ id: number, name: string }>,
    onClick: Function as PropType<(id: number) => void>
  }
})

属性默认是可选的,在上面例子中的title默认会得到一个string | undefined的类型。如果你声明了required: true,他的类型就会变成string

有一些第三方组件可能会缺少类型声明,这会导致typescript类型检查错误***属性并不存在,这种情况建议使用属性解构,避开typescript类型检查

// Property 'onClick' does not exist on type ...
<ElButton onClick={onClickBtn}></Elbutton>

// 使用属性解构
<ElButton {...{onClick: onClickBtn} as any}></Elbutton>

Events

Events实际上是function props的语法糖,@click="myCallback"等价于onClick={myCallback}强烈建议避免使用Event,而使用与之等效的方法属性,这样你会获得更好的类型提示。

defineComponent({
  emits: {
    // event runtime validation
    'play': (value: string) => {
      return true
    },
    'rest-time': () => true
  },
  setup(props, {emit}) {
    onMounted(() => {
      emit('play', 'game')
      emit('rest-time')
    })
  }
})
<MyComponent onPlay={...} onRest-time={...} />

等价于

defineComponent({
  props: {
    onPlay: Function as PropType<(value: string) => void>,
    'onRest-time': Function as PropType<() => void>,
  },
  setup(props) {
    onMounted(() => {
      props.onPlay('game')
      props['onRest-time']()
    })
  }
})
<MyComponent onPlay={...} onRest-time={...} />

TSX语法


你可以继续使用template模板,不过我们更建议你使用tsx模板。

<template>
  <div>contents</div>
</template>
<script lang="tsx">
defineComponent({
  setup(props) {
    return {
      // ...
    }
  }
})
</script>

或者

<script lang="tsx">
defineComponent({
  setup(props) {
    return () => (
      <div>contents</div>
    )
  }
})
</script>

Attributes / Props

// template
<input type="email" :placeholder="placeholderText" />

// tsx
<input type="email" placeholder={placeholderText} />

Directives

v-model

// template
<input v-model="val" />
<input v-model:name="val">
<input v-model.trim="val">
<input v-model:name.trim="val">

// tsx
<input v-model={val} />
<input v-model={[val, 'name']} />
<input v-model={[val, ['trim']]} />
<input v-model={[val, 'name', ['trim']]} />

// bind ref value
<input v-model={valueRef.value} />

v-models

// template
<A v-model="foo" v-model:bar="bar" />

// tsx
<A v-models={[[foo], [bar, "bar"]]} />

slot

const A = (props, { slots }) => (
  <>
    <h1>{ slots.default ? slots.default() : 'foo' }</h1>
    <h2>{ slots.bar && slots.bar() }</h2>
  </>
);

const App = {
  setup() {
    const slots = {
      default: () => <div>A</div>,
      bar: () => <span>B</span>,
    };
    return () => <A v-slots={slots} />;
  },
};

Hooks


Hooks是从React借鉴过来的概念,Vue 3中的Hooks叫做组合式API,它包括Vue 3提供的响应性api(ref, reactive, computed, onMounted...),以及自己编写的hook函数。

Hooks可以对混乱的代码做逻辑拆分,相似的功能可以方便的进行复用,通过Hooks的灵活组合,可以轻松处理大型复杂组件。

以下是Vue官网的例子,组件的功能被拆分到不同的Hooks中。

setup(props) {
  const { user } = toRefs(props)

  const { repositories, getUserRepositories } = useUserRepositories(user)

  const { searchQuery, repositoriesMatchingSearchQuery } = useRepositoryNameSearch(repositories)

  const { filters, updateFilters, filteredRepositories } = useRepositoryFilters(repositoriesMatchingSearchQuery)

  return {
    repositories: filteredRepositories,
    getUserRepositories,
    searchQuery,
    filters,
    updateFilters
  }
}

在React中,使用Hooks时需要遵守一些规则。不过Vue 3的渲染机制不同于React,在Vue 3中使用Hooks规则稍有不同:

1. 只在最顶层使用 Hook, 不要在循环,条件或嵌套函数中调用 Hook

由于Vue 3使用Proxy来追踪数据改变,Hooks调用的顺序不会影响数据的依赖关系,所以这条规则不必遵守。

2. 只在 React(Setup 和 Hook) 函数中调用 Hook,不要在普通的 JavaScript 函数中调用 Hook

这条规则仍然适用于Vue 3。Hooks可以用来保存状态,而普通函数不可以。当数据依赖改变时,函数会被重新执行,如果刚好函数中声明了一些状态,例如ref对象,那么这个状态就会被重置,从而导致意外的情况发生。所以Hook只能在Setup函数以及其他Hook中调用。

// ❎ 不要在普通函数中调用hook(ref)
function renderInput() {
  // 当input重新渲染时,inputValue会被重置
  const inputValue = ref('')
  return <input v-model={inputValue.value} />
}
// ✅ 在setup中调用hook(ref)
setup() {
  const inputValue = ref('')
  return (
    {renderInput(inputValue)}
  )
}

// 通过参数传递inputValue
function renderInput(inputValue) {
  return <input v-model={inputValue.value} />
}

Problems


目前,Vue 3对ts的支持度还没有达到100%,所以仍存在一些问题,例如:

  1. tsx代码无法热更新,需手动刷新(截至2021/4/30)

    <script lang="tsx">
    defineComponent({
      setup(props) {
     return () => (
       <div>the text here won't change with HMR</div>
     )
      }
    })
    </script>
  2. 函数形式的属性默认值会干扰typescript类型推断,需改为箭头函数(截至2021/4/30)

    // ❎ 会干扰typescript类型推断
    export default defineComponent({
      props: {
     objectProp: {
       type: Object,
       default() {
         return {}
       }
     },
     arrayProp: {
       type: Array,
       default() {
         return []
       }
     }
      }
    })
    
    // ✅ 使用箭头函数
    export default defineComponent({
      props: {
     objectProp: {
       type: Object,
       default: () => ({})
     },
     arrayProp: {
       type: Array,
       default: () => []
     }
      }
    })

References


  1. Vue 3 typescript支持 (https://v3.cn.vuejs.org/guide/typescript-support.html)
  2. jsx-next repo (https://github.com/vuejs/jsx-next)
  3. Vue 3 组合式api (https://v3.cn.vuejs.org/guide/composition-api-introduction.html)
阅读 2.1k

Unreal的专栏
我不想努力了
68 声望
1 粉丝
0 条评论
你知道吗?

68 声望
1 粉丝
宣传栏