Vue3 + TS

Vue2 与 Vue3 对比 

• Composition API:  取代Options API（函数式编程思想、面向对象思想）函数式编程有哪些优势，在常用的库有什么应用，应用场景等;   通过函数组合组织逻辑，增强了代码的复用性和可读性。
• TS 支持
• 更小的体积
•  性能提升：diff算法的优化（简单diff、双端diff、快速diff）最长递增子序列
• Fragments和Teleport

Vue3 与 TS 结合优势

• 类型安全
• 自动推导
• 更好的开发体验：自动补全和类型检查

TS 相关知识

•  基本类型
  • number  string  boolean null undefined symbol
• 联合类型
  • type Id = string | number
• 交叉类型
  • type Person = { name: string } & { age: number }
• 类型别名（自定义类型）
  • type Id = string | number
• 接口
  • interface Person { name: string }
• 泛型（使用的时候才知道类型）
  • function testFun<T>(arg: T) : T { return arg; }
• 条件类型（三目运算符）
  • type IsString<T> = T extends string ? true : false
  • 注意：extends  继承 / 约束泛型 / 条件类型
• 内置工具类型

  • // 类型复用
    // 用已有类型来派生新类型
    type Person = { name: string, age: number}
    
    type NamedPerson = Pick<Person, "name">
    // type NamedPeson = Omit<Person, "age">

• 类型保护（通过判断类型来确定类型）

  • type Val = string | number;
    
    function isString(value: Val): value is string {
        return typeof value === 'string'
    }

            

Vue3 项目中使用 TS

•   

  <script setup lang='ts'>
  // 宏定义 props 类型
  defineProps<{
      name: string;
      age: number
  }>()
  
  // 定义 emits 类型
  const Emits = defineEmits<{
      click:(e: MouseEvent) => void;
  }>()
  const emit = defineEmits<{
      (e:'update'): void
  }>()
  
  // 约束状态类型
  const isString = ref<boolean>(false);
  const person = ref<{name: string, age: number}>()
  </script>