持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第10天，点击查看活动详情

一、定义变量

常规使用的变量有string, number, any, object, array, null, undefined, boolean

假设定义一个对象，基本如下

interface UserInfo {
  name: string,
  age: number,
  sex: string,
  address: Object,
  state: boolean
}

const userInfo: UserInfo = {
  name: 'niu',
  age: 100,
  sex: 111,
  address: {
    addressID: 1,
    addressInfo: '1111'
  },
  state: false
}

这里有一个是错的地方，sex,这里点击能看到提示

必填项的时候，如果还有其他选填的参数，可以看到上边，如果值不写的话，是会报错的，比如少写个name

定义可选属性

假设name这个参数有时候需要传空，那么就需要修改下这里修改为

interface UserInfo {
  name?: string,
  age: number,
  sex: string,
  address: Object,
  state: boolean
}

这时，userInfo就不会再报错了

定义联合类型

比如age参数，可能为string，也可能为number，或者undefined,在之前的情况下定义为string

看到提示信息，不能将age写成string，因此这里，要定义联合类型

interface UserInfo extends AddressType {
  name?: string,
  age: number | string,
  sex: string,
  state: boolean
}

这里就能看到userInfo没有报错提示信息了

二、接口的继承

例如将地址信息单独拿出去，通过继承，来定义参数类型，这个在项目中是会经常用的到的比如Store中

这里单独定义地址接口

interface AddressType {
  addressId?: number,
  addressInfo?: string
}

设置为多个参数均为可选填参数

这里通过extends继续该接口

interface UserInfo extends AddressType {
  name?: string,
  age: number,
  sex: string,
  state: boolean
}

接下来写这个数据

const userInfo: UserInfo = {
  age: 100,
  sex: '111',
  addressId: 1,
  addressInfo: '1111',
  state: false
}

这里可以看出，该类型继承自地址接口

三、交叉类型

还有一种相似的情况，就是两种同级别的数据，没有继承关系的，比如一个商品，它有商品的类型信息，商品的地址信息等

这里使用交叉类型处理

interface productType {
  size?: number,
  color?: string,
  type: string
}

interface productAddress {
  addressInfo: string,
  addressId: number
}

const productInfo: (productType & productAddress) = {
  addressId: 1,
  addressInfo: '牛头山',
  type: '服装类'
}

通过&将两个接口连接起来

四、函数的定义

定义一个函数，常规情况下，比如一个加法

const addNum = (x: number, y: number): number => {
  return x + y
}

这里定义X和y为number,同时返回值也为number,

type声明

type AddType = (x: number, y: number) => number
const addNum: AddType = (x, y) => {
  return x + y
}
addNum('1', '2')

这里能看到报错

函数中只能传递number

interface声明

interface AddType {
  (x:number, y: number): number
}

const addNum: AddType = (x, y) => {
  return x + y
}

如果当前类中还要参数，那么定义如下

interface AddType {
  (x:number, y: number): number
}

interface TotalType {
  first: number,
  addNum: AddType
}

const totalInfo: TotalType = {
  first: 1,
  addNum: (x, y) => {
    return x + y
  }
}
totalInfo.addNum(1, 2)

或者

interface TotalType {
  first: number,
  // addNum: AddType
  addNum: (x:number, y: number) => number
}

如果没有返回值的话，使用void

interface TotalType {
  first: number,
  // addNum: AddType
  // addNum: (x:number, y: number) => number
  addNum: (x:number, y: number) => void
}

const totalInfo: TotalType = {
  first: 1,
  addNum: (x, y) => {
    console.log(x + y)
    // return x + y
  }
}
totalInfo.addNum(1, 2)

五、泛型的使用

正常情况下的泛型使用，可以通过修改类型，传不同类型的值

function AddNum2<T> (x: T): T {
  console.log('x', x)
  return x
}
AddNum2<number>(1)

接口型

将泛型定义成接口，动态修改类型

const AddNum2:AddNum2Type<number> = (x, y) => {
  console.log('x', x)
  return x + y
}
AddNum2(1, 2)

定义不同的类型

interface AddNum2Type<U, T> {
  (x:U, y:T): T
}

const AddNum2:AddNum2Type<number, string> = (x, y) => {
  return x + y
}
AddNum2(1, '2')

ts的使用