前言：本类文章初衷只用作记录个人的学习博客，哪里有漏补哪里，不做任何其他商业用途。欢迎讨论，不喜勿喷。后面要是有遗漏的相关知识点，也会相应的补上。如果本篇文章能帮到你，我也会很愉快，共勉😁

编译环境

全局安装Typescript：

npm install typescript -g

全局安装ts的编译工具

npm install ts-node -g

路径切换到编译文件的位置，执行ts-node xxx.ts

接口基本用法

接口的基础定义：

普通属性
只读属性
可选属性
索引签名(当你不确定该对象还有哪些属性时，可以设置索引签名)
函数类型

interface PropsTarget {
  value: number, // 普通属性
  readonly label: string, // 只读属性
  desc?: string, // 可选属性
  [key: string]: any // 索引签名
}

const props: PropsTarget = {
  value: 0,
  label: 'TypeScript',
  desc: 'desc',
  handle: () => 1
}

函数类型

描述函数类型的接口


interface AddFn {
  (num1: number, num2: number): number
}

const add: AddFn = (num1, num2) => {
  return num1 + num2
}

类接口

class通过implements关键字来实现接口

interface PointTarget {
  x: number,
  y: number,
  z: number,
  setPointX(x: number): void
}

class Point implements PointTarget {
  x: number
  y: number
  z: number

  constructor(x: number, y: number, z: number) {
    this.x = x;
    this.y = y;
    this.z = z;
  }

  setPointX(x: number) {
    this.x = x;
  }
}

const p1 = new Point(1, 1, 2); 
console.log(p1) // { x: 1, y: 1, z: 2 }
p1.setPointX(10)
console.log(p1) // { x: 10, y: 1, z: 2 }

继承接口

接口和类一样，也能相互继承

interface Shape {
  color: string
}

interface Square extends Shape {
  len: number
}

const square: Square = {
  color: 'red',
  len: 10
}

一个接口可以继承多个接口


interface Shape {
  color: string
}

interface PenStroke {
  width: number
}

interface Square extends Shape, PenStroke {
  len: number
}

const square: Square = {
  color: 'red',
  width: 100,
  len: 10
}

联合类型

一个联合类型表示一个值的类型可以是几个类型中的一个，用竖线来分隔不同类型。

// 可以传入string或者number，而不需要再去写个any
const setValue = (value: string | number) => {
  return typeof value === 'string' ? `Hello ${value}` : value * 10
}

可区分联合

使用联合的一种常用技术是使用字面量类型的单个字段，来缩小TypeScript可能的当前类型。以下是一个包含三种类型的联合，这些类型都具有一个共享字段。

interface PromisePendingState {
  state: 'pending'
}

interface PromiseRejectState  {
  state: 'failed',
  code: number
}

interface PromiseResolveState {
  state: 'resolve',
  code: number,
  response: {
    list: string[],
    total: number
  }
}

type PromiseState =
  PromisePendingState |
  PromiseRejectState |
  PromiseResolveState

const p1: PromiseState = { // pending
  state: 'pending'
}

const p2: PromiseState = {
  state: 'failed',
  code: -400
}

const p3: PromiseState = {
  state: 'resolve',
  code: 200,
  response: {
    list: ['JavaScript', 'TypeScript'],
    total: 15
  }
}

state字段在PromiseState的每个类型中都是通用的，所以可以直接将state的值与相应的字符串进行匹配。

const execute = (res: PromiseState): string => {
  switch (res.state) {
    case 'pending':
      return 'Loading...'
    case 'failed':
      return `${res.state}: ${res.code}`
    case 'resolve':
      return `${res.response.list.join(',')}`
    default:
      return 'Loading...'
  }
}

execute({ state: 'failed', code: 500 })

交叉类型

交叉类型将多个类型合并为一个，得到一个具有所有功能的单个类型。

interface Person {
  name: string
}

interface Serializable {
  message: string
}

interface Loggable {
  loggable: number
}

type Merge = Person & Serializable & Loggable

const mergeTarget: Merge = {
  name: 'Tom',
  message: `Hello`,
  loggable: 0
}

【查漏补缺系列-ts篇】接口、联合类型、交叉类型

目录