🟡TypeScript类型声明

原始类型

使用let,const会自动类型断言,可不写类型

const name: string = 'Jonathan'
const age: number = 20
const isMale: boolean = true
const bigInteger: bigint = 12345n
const mark: symbol = Symbol('mark')

undefined与null

undefined: null:

any与unknown

any:可以用任意数据赋值,可以使用任意方法

unknown:更安全的any,但仅可赋值给any或unknown

function transpondByAny (x: any): any {
  return x
}

function transpondByUnkown (x: any): unknown {
  return x
}

const y1 = transpondByAny(1) / 2
// 无报错
const y2 = transpondByUnkown(1) / 2
// 报错提示: 对象的类型为 "unknown"。

上面的例子表明使用unknown可以尽可能的提示开发者这么用可能会出错误(返回值不一定是number)

在使用时需要开发者手动断言类型以明确这么做不会错误错误

const y2 = transpondByUnkown(1) as number / 2

void与never

void:函数无返回值

never:函数无法执行到return语句,总是会抛出错误或进入死循环

const say = (): void => {
  alert('Hellow TypeScript!')
}

function createError (msg: string): never {
  throw new Error(msg)
}

内置对象类型

Number,String,Boolean,Date等

const num: Number = Number(1)
const str: String = String('a')
const bool: Boolean = Boolean(true)
const time: Date = new Date()

联合类型

当类型是几个中的某个时可用联合类型 赋值前可使用各类型的共有属性或方法 联合类型赋值后会类型收窄,即不可使用赋值类型外的属性或方法 但可重新赋值其它联合范围内的值

let numStr: number | string
numStr = 2

类型断言

🍖可用标签断言any类型

const myName: any = 'Jonathan'
const Len: number = (<string>myName).length

🍖推荐as语法

const myName: any = 'Jonathan'
const Len: number = (myName as string).length

类型收窄

类型收窄是让TS对大类型进行更精确的定位

🍳赋值

let x: string | number

x = 'a'      // 收窄为string
x.length

x = 1        // 收窄为number
x.length     // number没有length属性会标红报错

🍳typeof

function getNum(x: string | number): number {
  return x.length              // number没有length属性会标红报错
}

function getNum(x: string | number): number {
  if(typeof x === 'string')
  	return x.length           // Ts可按上一句判断将类型收窄为string
  return x                    // (parameter) x: number下一条的x收窄为number
}

🍳逻辑运算符

function getNum(x: string | number,y: string | boolean): number {
  if(x === y)           // 类型收窄为x,y的类型交集,即string
    return x.length
  return 0
}

数组

const list: number[] = [0, 1, 2]

// 或使用数组泛型
const list: Array<number> = [0, 1, 2]

元组

元组为元素数量,各索引数据类型已知的数据类型

const tuples: [string, number, boolean] = ['Jonathan', 20, true]

元素可以是更复杂的元素类型,或嵌套元组

const tuples: [
    Array<string>,
    [string, number, boolean]
  ] = [
    ['Hellow', 'TypeScript'],
    ['Jonathan', 20, true]
  ]

枚举

枚举可以通过数值得到反向映射结果

enum ItemType {
  RADIO,
  INPUT = 2,
  TYPEAREA,
  SELECT,
  SWITCH = 9,
}

if (formItem.type === ItemType.RADIO) { /* ...单选 */ }
else if (formItem.type === ItemType.SELECT) { /* ...下拉框 */ }

console.log(ItemType)
/**
 * {
 *   '0': 'RADIO',
 *   '2': 'INPUT',
 *   '3': 'TYPEAREA',
 *   '4': 'SELECT',
 *   '9': 'SWITCH',
 *   RADIO: 0,
 *   INPUT: 2,
 *   TYPEAREA: 3,
 *   SELECT: 4,
 *   SWITCH: 9
 * }
 */

收到后端的一个动态表单数据,后端用数字来表示不同的表单项类型

若用if (formItem.type === 0) { /* ...单选 */ }来表示就缺少了可读性

使用元组if (formItem.type === ItemType.RADIO) { /* ...单选 */ }就很明了

字符串枚举不支持反向映射

enum Message {
    False = "No",
    True = "Yes",
    Yes = True
}

参考文档:

《冴羽的TS中文文档》

《TypeScript中文网》