【TS】项目中常用到的类型声明

🧁 最近部门在推vue3+ts，之前看过一些ts但是没有用到很快就忘了，今天抽空做个复习，还是基础的，更高阶的等项目中用到再补充

基础

1.JS七种基本数据类型

 const num: number = 999;
 const str: string = 'asd';
 const bol: boolean = true;
 const nul: null = null;
 const undefin: undefined = undefined;
 const sym: symbol = Symbol('1');
 const big: bigint = 12n;

2.对象

注意属性的顺序： 只读类型 -> 必选属性 -> 可选属性 -> 不确定属性

interface IPerson {
  readonly id: string, // 只读属性
  name: string,
  age?: number, // 可选属性
  [propName: string]: unknown, // 其他不确定的任意个属性
}
const person: IPerson = {
  id: '1',
  name: '张三',
  age: 12,
  say: function() {}
}

• 接口继承

interface Modal {
  color: string
}
interface lightM extends Modal {
  opacity: number
}
const lm: lightM = {
  color: 'red',
  opacity: 0.3
}

• 使用泛型声明对象结构（常用）Record<string,unknown>

const person2: Record<string, unknown> = {
  id: '1',
  name: '张三',
}

3.数组

• 第一种形式：类型+[]

const persons1: string[] = ['张三', '李四', '王五']
const ages1: number[] = [1, 2, 3]
// 联合类型
const persons3: (string | number)[] = ['张', 3]

• 第二种形式：使用泛型Array<类型>

const persons2: Array<string> = ['张三', '李四', '王五']
const ages2: Array<number> = [1, 2, 3]
// 联合类型
const persons4: Array<string | number> = ['张', 3]

• 对象数组

interface PersonT {
  name: string,
  age: number
}
const persons5: PersonT[] = [{ name: '张三', age: 15 }]
const persons6: Record<string, unknown>[] = [{ name: '张三', age: 15, a: 15 }]

4.元组

已知长度和数组各项值类型的数组（严格的数组）

const tup1: [string, number] = ['hello', 0]
const tup2: [string, number] = ['hello', 0, 3] // 报错。源具有 3 个元素，但目标仅允许 2 个。

5.函数

// 没有返回值
function say1(): void {}
// 返回字符串
function say2(): string {
  return 'hello'
}
// 有入参
function say3(name: string): string {
  return name
}
// 无法结束的函数，如抛出异常、死循环
function say4(): never {
  throw new Error('异常')
}

6.枚举

• 实际项目中经常会有根据不同状态展示不同文字的需求，通常状态都是固定的几种
• 使用枚举声明有意义的单词，代替没有意义的数字（减少魔法数字）

enum IStatus {
  SUCCESS = 0,
  ERROR = 1,
  ING = 2
}
const defaultSta: number = 0

if (defaultSta === IStatus.SUCCESS) {
  console.log('成功的操作');
}

• 也可以使用类似枚举的方法，将状态都列出来

type Status = 'SUCCESS' | 'ERROR'

const defaultSta1: Status = 'SUCCESS'
const defaultSta2: Status = 'FAIL' // 不能将类型“"FAIL"”分配给类型“Status”

type/interface/class的区别

• 三者都是用来定义类型别名的

type Girl1 = {
  name: string,
  age?: number
}
class Girl2 {
  name: string;
  age: number;
  height?: number
}
interface Girl3 {
  name: string,
  age: number,
  height: number
}

• type:
  • 可以给基础类型，也可以给对象
  • 用于对象时，不同的属性之间要逗号隔开
  • 类型别名和{}中间有等号
  • 不能用extends继承

type Girl = string
type Girl1 = {
  name: string,
  age?: number
}

• class
  • 只能给对象
  • 类名和{}中间没有等号
  • 可以使用extends继承

class Modal {
  color: string
}
class lightM extends Modal {
  opacity: number
}

• interface
  • 只能用于对象
  • 属性之间要用逗号隔开
  • 可以使用extends继承

interface Modal {
  color: string
}
interface lightM extends Modal {
  opacity: number
}

其他

泛型工具

• Partial将传入的属性变为可选项

interface Iprops {
  name: string,
  age: number
}
const props1: Partial<Iprops> = {
  name: '123'
}

• Readonly 将传入的属性都变为只读

interface Iprops {
  name: string,
  age: number
}
const props2: Readonly<Iprops> = {
  name: '123',
  age: 12
}
// props2.age = 15 // 无法分配到 "age" ，因为它是只读属性

• Required 将传入的属性都变为必选的

interface Iprops2 {
  name?: string,
  age?: number
}
const props3: Required<Iprops2> = { // 类型 "{ name: string; }" 中缺少属性 "age"
  name: '张三'
}