前言

整理一下所知道的Vue3+TS的基础知识点【会不定时更新】。

一、理解

若还没看过 Vue3文档 或 TS搭配Vue3使用 的官方文档的童鞋还是记得看看 官方文档

1. 静态类型、动态类型、强类型、弱类型

编译时就知道变量类型的是静态类型运行时才知道一个变量类型的叫做动态类型。 java 是静态类型 js 是动态类型。

不允许隐式转换的是强类型允许隐式转换的是弱类型。 java 是强类型 js 是弱类型。

那ts到底是什么类型的语言很明显 ts 是静态类型语言因为它需要经过编译。但是 ts不是强类型因为它可以允许隐式类型转换。

let isBool: boolean
let num: number = 10
isBool = !num // ok

2. Typescript是什么

ECMAScript 的超集 (stage 3)
编译期的类型检查
不引入额外开销(零依赖不扩展 js 语法不侵入运行时)
编译出通用的、易读的 js 代码
Typescript = Type + ECMAScript + Babel-Lite

3. 为什么使用 Typescript

增加了代码的可读性和可维护性
减少运行时错误写出的代码更加安全减少 BUG
享受到代码提示带来的快感
重构神器

二、知识点

1. TS基础类型

声明了变量的类型那么这个变量就有了静态类型的特性ts中使用:操作符来声明类型。

• boolean
• number
• string
• array
• tuple元组
• enum
• any & unknow
• void
• null & undefind
• never
• Object

1.1 boolean、number、string、array

<script setup lang="ts">
  let bool: boolean = true // boolean 类型
  let num: number = 1 // number 类型
  let str: string = 'hellow word' // string 类型
  let numArr: number[] = [1, 2, 3] // number数组 类型
  let arrNum: Array<number> = [1, 2, 3] // 数组泛型形式number数组类型
  console.log(bool, num, str, numArr, arrNum)
</script>

1.2 tuple元组

Ts 内置类型之 Tuple

<script setup lang="ts">
  let tupleData: [number, string, boolean] = [1, '2', false] // tuple
  console.log(tupleData)
</script>

1.3 enum枚举

• 数字枚举
• 字符串枚举
• 常量枚举

TS中枚举就是一组常量的集合但是和集合不同枚举可以通过变量的值来得到变量它是一个双向的过程。
1数字枚举
默认的第一个变量的值是0后面的值会在前一个值上 +1以此类推。是支持正反映射的。

<script setup lang="ts">
  enum PositionTypes {
    TOP,
    RIGHT,
    BOTTOM,
    LEFT
  }
  // 用值则会得到 属性名的字符串
  const top1 = PositionTypes[0] // TOP
  // 用指定属性则会得到 值
  const top2 = PositionTypes.TOP // 0
  console.log(top1, top2)
</script>

想改变枚举的初始值只需要给第一个变量赋值即可。

<script setup lang="ts">
  enum PositionTypesNum {
    TOP = 2,
    RIGHT,
    BOTTOM,
    LEFT
  }
  // 用值则会得到 属性名的字符串
  const topNum1 = PositionTypesNum[2] // TOP
  // 用指定属性则会得到 值
  const topNum2 = PositionTypesNum.TOP // 2
  console.log(topNum1, topNum2)
</script>

赋值重复的时候调用会返回最后一个。

<script setup lang="ts">
  enum PositionTypesNum {
    TOP = 2,
    RIGHT = 2,
    BOTTOM,
    LEFT
  }
  const topNum1 = PositionTypesNum[2] // RIGHT
  const topNum2 = PositionTypesNum.TOP // 2
  console.log(topNum1, topNum2)
</script>

当枚举值不是数字的时候下一个必须设置枚举值

<script setup lang="ts">
  enum demoTypesAny3 {
    a, // a=0
    b = 3, // b=3
    c, // c=4
    e = 'q1', // e="q1"
    f = 5 // f=5此处不能直接写f
  }
  console.log(demoTypesAny3)
</script>

2字符串枚举
在一个字符串枚举里每个成员都必须初始化值否则会报错

<script setup lang="ts">
  enum PositionTypesStr {
    TOP = 'top',
    RIGHT = 'right',
    BOTTOM = 'bottom',
    LEFT = 'left'
  }
  // 字符串枚举就只能用属性名取值了
  const topStr = PositionTypesStr.TOP // 'top'
  console.log(topStr)
</script>

当等号左侧和右侧重复的时候左侧优先

<script setup lang="ts">
  enum demoTypesStr1 {
    a = 'b',
    b = 'a',
    c = 'a'
  }
  const demo1 = demoTypesStr1['a'] // 'b'
  const demo2 = demoTypesStr1.a // 'b'
  console.log(demo1, demo2)
</script>

3常量枚举
用 const 修饰符来声明枚举编译后的js代码将不会出现额外的声明代码。

const 枚举只能在属性或索引访问表达式中使用或者在导入声明或导出赋值或类型查询的右侧使用如不可console。

<script setup lang="ts">
  enum PositionTypesSecond {
    UP,
    DOWN,
    LEFT,
    RIGHT
  }
  const enum PositionTypesSeconds {
    SPRING = 'SPRING',
    SUMMER = 'SUMMER',
    AUTUMN = 'AUTUMN',
    WINTER = 'WINTER'
  } // 编译后看不到
  const up = PositionTypesSecond.UP // 0
  const spring = PositionTypesSeconds.SPRING // 'SPRING'
  console.log(PositionTypesSecond, up, spring)
</script>

1.4 any和unkonwn

any任意类型unknown未知的类型。
任何类型都能分配给 unknown 但 unknown 不能分配给其他基本类型而 any 啥都能分配和被分配。

<script setup lang="ts">
  // any demo
  let testAny: any
  testAny = true // ok
  testAny = 123 // ok
  testAny.toFixed(2) // ok
  let testAny1: string = testAny // ok
  console.log(testAny1) // 123

  //  unkonwn demo
  let testUnknown: unknown
  testUnknown = true // ok
  testUnknown = 123 //ok
  //  testUnknown.toFixed(2) // error
  //  let testUnknown1: string = testUnknown // error
  console.log(testUnknown) // 123
</script>

用了 any 就相当于完全丢失了类型检查所以尽量少用 any 对于未知类型可以用 unknown。使用时尽量将类型范围缩小方式多样。

<script setup lang="ts">
  function getLength(value: unknown): number {
    if (typeof value === 'string') {
      // 因为类型保护的原因此处 value 被判断为 string 类型
      return value.length
    }
    return 0
  }
  console.log(getLength('aabbccdd')) // 8
  console.log(getLength(0.001)) // 0
</script>

1.5 never

表示的是那些永不存在的值的类型。

never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型
变量也可能是 never类型当它们被永不为真的类型保护所约束时。

是任何类型的子类型也可以赋值给任何类型

没有类型是never的子类型或可以赋值给never类型除了never本身之外即使 any也不可以赋值给never

在typescript 4.1.5版本中如下编码会提示报错

<script setup lang="ts">
  // never 用户控制流分析
  function neverReach(): never {
    throw new Error('an error')
  }

  const x = neverReach()
  x.toFixed(2) // Property 'toFixed' does not exist on type 'never'.
</script>

never 还可以用于联合类型的单位元。

<script setup lang="ts">
  type T0 = string | number | never // => type T0 = string | number
  let a: T0
  a = 1
  console.log(a) // 1
</script>

2. TODO…

最后

觉得有用的朋友请用你的金手指点一下赞或者评论留言一起探讨技术