博客

原始类型

const num: number = 12

const str: string = ‘你好世界’

const flag: boolean = false

const nu: null = null

const und: undefined = undefined

数组类型

// 数组类型

// 写法一(推荐)

const arr: number[] = [1, 2, 3, 4, 5]

// 写法二

const arr2: Array = [1, 2, 3, 4, 5, 6]

联合类型

// 联合类型(注意有没有括号区别)

// 带括号谢安的意思, 数字联合字符串类型 组成的数组

const arr3: (number | string)[] = [1, ‘2’]

// 不带括号写法的意思, 数字 和 字符串数组 联合的类型, 要么数字, 要么数组, 如果是数组, 就只能装字符串

const arr4: number | string[] = [‘s’, ‘d’]

类型别名

type TimerId = number | null

let timer: TimerId = null

let timer2: TimerId = null

// let timer3: number | null = null

// 等价于

let timer3: TimerId = null

函数类型

基本使用

// 函数类型
// 分开声明函数表达式
const addFn1 = (a: number, b: number): number => {
  return a + b
}
// 分开声明 函数声明
function addFn2(a: number, b: number): number {
  return a + b
}


// 同时指定(适用于函数表达式)
const addFn3: (a: number, b: number) => number = (a, b) => {
  return a + b
}

// 同时指定中的类型别名优化
type FnType = (a: number, b: number) => number

const addFn4: FnType = (a, b) => {
  return a + b
}

void

// void 类型
function setStorage(): void {
  localStorage.setItem('data', '666')
}

可选参数

// 可选参数 模拟 slice
const mySlice = (a?: number, b?: number) => { }

mySlice()
mySlice(1)
mySlice(1, 3)

对象类型

// 分隔符可以是逗号, 也可以是分号, 可以放在一行, 也可以分行
const student: { name: string; age: number; study(): void } = {
  name: 'tom',
  age: 12,
  study() { }
}

const student2: {
  name: string
  age: number
  study(): void
} = {
  name: 'tom',
  age: 12,
  study() { }
}

type StudentType = {
  name: string,
  age: number,
  study(): void,
  time?: string
  // study: () => void
}

const student3: StudentType = {
  name: 'tom',
  age: 18,
  study() { }
}

ts其他功能

字面量类型

type NewBaby = {
  name: string,
  age: 0,
  gender: '男' | '女'
}

const baby1: NewBaby = {
  name: 'tom',
  age: 0,
  gender: '男'
}