TS语法二 接口

TS中的接口

主要包括以下内容：

• 基本用法
• 可选属性
• 多余属性检查
• 绕开多余属性检查
• 只读属性
• 函数类型
• 索引类型
• 继承接口
• 混合类型接口

// 基础用法
interface NameInfo {
    
    
    firstName:string,
    lastName:string,
}
const getFullName = ({
    
    firstName,lastName}:NameInfo):string => {
    
    
    return `${
      
      firstName}-${
      
      lastName}`
}
getFullName({
    
    firstName:'l',lastName:'yy'})

//可选属性
interface Vegatable{
    
    
    color?:string,
    type:string,
}
const getVegatables = ({
     
     color,type}:Vegatable)=>{
    
    
    return `a ${
      
      color? color:''} ${
      
      type}`
}

console.log(getVegatables({
    
    
    // color:'red',
    type:'tomato'
}))

//绕开多余属性检
//1.通过as类型断言指定类型
console.log(getVegatables({
    
    
    color:'red',
    type:'tomato',
    amount:2,
} as Vegatable
))

//2.利用索引签名
interface Vegatable{
    
    
    color?:string,
    type:string,
    [prop:string]:any,
}

console.log(getVegatables({
    
    
    color:'red',
    type:'tomato',
    amount:2, 
}))

//3.类型兼容  const b=a,要求b中的内容a都有
const vegatableParam ={
    
    
    color:'red',
    type:'tomato',
    amount:2, 
}
console.log(getVegatables(vegatableParam))

//只读属性
interface Vegatable2{
    
    
    color?:string,
    readonly type:string,
}

const v1:Vegatable2 = {
    
    
    type:'tomato'
}

// v1.type = 'carrot'  //报错，只读，不可修改

//定义数组接口
interface ArrInter {
    
    
    0:number,
    readonly 1: string
}

let arr:ArrInter = [1, 'a']
// arr[1] = 'b'  //报错，只读，不可修改

//定义函数接口
interface AddFunc {
    
    
    (num1:number,num2:number):number
}

//这里如果用ts语法检查的话，ts会建立使用类型别名，保存后上面的代码会变为:
// type AddFunc = (num1:number,num2:number) => number

const add:AddFunc = (n1, n2)=>n1+n2  //这里参数名称不必相同，只要数目能对应上即可

//定义索引类型, 用法同索引签名
interface RoleDic {
    
    
    [id:number]:string
}

const role1:RoleDic = {
    
    
    0:'SUPER_ADMIN'
}

interface RoleDic1 {
    
    
    [id:string]:string
}

const role2:RoleDic1 = {
    
    
    a: 'SUPER_ADMIN',
    0: 'ADMIN'  // 数字也是可以的，因为js在指定类型名会先把数值转成字符串
}

//接口继承
interface Veg {
    
    
    color:string
}

interface Tomato extends Veg {
    
    
    radius:number
}

const tom:Tomato = {
    
    
    color:'red',
    radius: 2
}

索引签名

1.用法

//数字索引
interface NumI {
    
    
    [index: number]: string
}
let arr1:NumI = ['1', '2', '3']
let arr2:NumI = {
    
    
    0: 'admin',
    1: 'user'
}
console.log(arr1[0])   //1

//字符串索引
interface StrI {
    
    
    [key: string]: string
}
let arr2: StrI = {
    
    
    name: 'lyy',
    age: '18'
}
console.log(arr2['name'])  //lyy

注意:
(1)键的类型只能是string，number或symbol
(2)定义了索引签名后，里面的所有数据都得符合该类型，如：

interface StrI {
    
    
    [key: string]: string,
    //salary: number   报错，不可以是number类型
}

2.与Record<Keys, Type>对比
TS中有一个实用类型Record<Keys, Type>类似于索引签名，区别是Record<Keys, Type>在键这块是通用的。
例如Keys中传入字符串字面量

type names = Record<'name1'|'name2', string>
  
const nameInfo: names = {
    
     
  'name1': 'lyy',
  'name2': 'little_moon',
};