Cao Note

外观

Typescript 基础类型 ​

基本类型 ​

ts
let bool: boolean = true       // 布尔
let num: number = 123          // 数字
let str: string = 'abc'        // 字符串
let bool: boolean = true       // 布尔
let num: number = 123          // 数字
let str: string = 'abc'        // 字符串

数组与元组 ​

ts
// 数组
let arr1: number[] = [1, 2, 3]
let arr2: Array<number> = [1, 2]
let arr3: (string | number)[] = [1, '2', 3]
let arr4: { name: string }[] = [{ name: 'hhh' }]

// 元组（固定长度和类型）
let tuple: [string, number, boolean] = ['a', 1, false]
// 数组
let arr1: number[] = [1, 2, 3]
let arr2: Array<number> = [1, 2]
let arr3: (string | number)[] = [1, '2', 3]
let arr4: { name: string }[] = [{ name: 'hhh' }]

// 元组（固定长度和类型）
let tuple: [string, number, boolean] = ['a', 1, false]

特殊类型 ​

ts
// any — 任何类型（能不用尽量不用）
let arr: any[] = [1, {}, []]

// void — 没有返回值
const test = (text: string): void => {
  console.log(text)
}
let v: void = undefined

// unknown — 顶级类型，比 any 安全
let value: unknown
value = 1
value = 'a'

// null / undefined（既是值也是类型）
let u: undefined = undefined
// 开启 strictNullChecks 时，null/undefined 不能赋值给其他类型

// object — 非原始类型
const getObj = (obj: object): void => {}
getObj({ name: 'hhh' })
// any — 任何类型（能不用尽量不用）
let arr: any[] = [1, {}, []]

// void — 没有返回值
const test = (text: string): void => {
  console.log(text)
}
let v: void = undefined

// unknown — 顶级类型，比 any 安全
let value: unknown
value = 1
value = 'a'

// null / undefined（既是值也是类型）
let u: undefined = undefined
// 开启 strictNullChecks 时，null/undefined 不能赋值给其他类型

// object — 非原始类型
const getObj = (obj: object): void => {}
getObj({ name: 'hhh' })

类型推论 ​

TypeScript 会根据初始值自动推断类型：

ts
let myNumber = 5
myNumber = 'a'   // 报错，已推断为 number
let myNumber = 5
myNumber = 'a'   // 报错，已推断为 number

类型断言 ​

当我们比 TS 更了解某个值的类型时，可以使用类型断言：

ts
const getLength = (target: string | number): number => {
  // 方式一：尖括号（JSX 中不能用）
  if ((<string>target).length) {
    return (<string>target).length
  }
  // 方式二：as 关键字（推荐，JSX 中也可用）
  if ((target as string).length === 0) {
    return (target as string).length
  }
  return target.toString().length
}
const getLength = (target: string | number): number => {
  // 方式一：尖括号（JSX 中不能用）
  if ((<string>target).length) {
    return (<string>target).length
  }
  // 方式二：as 关键字（推荐，JSX 中也可用）
  if ((target as string).length === 0) {
    return (target as string).length
  }
  return target.toString().length
}

非空断言 ​

ts
let x = name!          // 断言值不是 undefined 或 null
cb!()                  // 函数调用非空断言
let x = name!          // 断言值不是 undefined 或 null
cb!()                  // 函数调用非空断言

确定赋值断言 ​

ts
let a!: number         // 告诉 TS 该属性会被赋值，不用检查
let a!: number         // 告诉 TS 该属性会被赋值，不用检查

const 断言 ​

将值锁定为字面量类型：

ts
const x = 'x'          // x: 'x'（const 声明本身就是字面量）
let y = 'y' as const   // y: 'y'（let 声明通过 as const 锁定）

const action = {
  type: 'SET_VALUE',
  payload: [1, 2, 3],
} as const
// action.payload.push(1)  // 报错，只读

// window 上设置属性
(window as any).foo = 1
const x = 'x'          // x: 'x'（const 声明本身就是字面量）
let y = 'y' as const   // y: 'y'（let 声明通过 as const 锁定）

const action = {
  type: 'SET_VALUE',
  payload: [1, 2, 3],
} as const
// action.payload.push(1)  // 报错，只读

// window 上设置属性
(window as any).foo = 1

Copyright © 2024-present xiaocao