VUE3&TS: Vue3+TS基础编码的学习总结【不定时更新】_vue3 ts

前言

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

一、理解

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

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

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

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

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

let isBool: boolean
let num: number = 10
isBool = !num // ok
1
2
3

2. Typescript是什么

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

3. 为什么使用 Typescript

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

二、知识点

注意

<script set lang="ts">
// 代码片段....
</script>
1
2
3

1. 基础类型

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

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

1.1 boolean、number、string

  // boolean 类型
  let bool: boolean = true
  console.log(bool)

  // number 类型
  // 支持浮点数、十进制和十六进制字面量、ES5的二进制和八进制字面量
  let decLiteral: number = 6
  let hexLiteral: number = 0xf00d
  let binaryLiteral: number = 0b1010
  let octalLiteral: number = 0o744

  // string 类型
  let str: string = 'hellow word'
  let strL: string = `---${
     str}的字符串长度是${
     str.length}`
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

1.2 array

1.2.1 指定类型的数组

在元素类型后面接上 []，表示由此类型元素组成的一个数组。

  let numArr: number[] = [1, 2, 3]
  let anyArr: any[] = [1, '2', true]
1
2

1.2.2 泛型数组

  // Array<元素类型>
  let arrNum: Array<number> = [1, 2, 3]
1
2

1.3 tuple元组

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。
Ts 内置类型之 Tuple

  let tupleArr1: [string, number]
  tupleArr1 = ['', 0] // ok
  tupleArr1 = [1, false] // error

  let tupleArr2: [number, string, boolean] = [1, '2', false] // ok
1
2
3
4
5

1.4 enum枚举

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

TS中，枚举就是一组常量的集合，但是和集合不同，枚举可以通过变量的值来得到变量，它是一个双向的过程。

1.4.1 数字枚举

默认的，第一个变量的值是0，后面的值会在前一个值上 +1，以此类推。是支持正反映射的。

  enum PositionTypes {
   
    TOP,
    RIGHT,
    BOTTOM,
    LEFT
  }
  // 用值，则会得到 属性名的字符串
  const top1 = PositionTypes[0] // TOP
  // 用指定属性，则会得到 值
  const top2 = PositionTypes.TOP // 0
  console.log(top1, top2)
1
2
3
4
5
6
7
8
9
10
11
12

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

  enum PositionTypesNum {
   
    TOP = 2,
    RIGHT,
    BOTTOM,
    LEFT
  }
  // 用值，则会得到 属性名的字符串
  const topNum1 = PositionTypesNum[2] // TOP
  // 用指定属性，则会得到 值
  const topNum2 = PositionTypesNum.TOP // 2
  console.log(topNum1, topNum2)
1
2
3
4
5
6
7
8
9
10
11
12

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

  enum PositionTypesNum {
   
    TOP = 2,
    RIGHT = 2,
    BOTTOM,
    LEFT
  }
  const topNum1 = PositionTypesNum[2] // RIGHT
  const topNum2 = PositionTypesNum.TOP // 2
  console.log(topNum1, topNum2)
1
2
3
4
5
6
7
8
9
10

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

  enum demoTypesAny3 {
   
    a, // a=0
    b = 3, // b=3
    c, // c=4
    e = 'q1', // e="q1"
    f = 5 // f=5，此处不能直接写f
  }
  console.log(demoTypesAny3)
1
2
3
4
5
6
7
8
9

1.4.2 字符串枚举

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

  enum PositionTypesStr {
   
    TOP = 'top',
    RIGHT = 'right',
    BOTTOM = 'bottom',
    LEFT = 'left'
  }
  // 字符串枚举，就只能用属性名取值了
  const topStr = PositionTypesStr.TOP // &#
1
2
3
4
5
6
7
8