04-TS接口interface、对象类型的使用

// -------------------------- 04-接口interface、对象类型的使用
/**
 * 1、interface接口使用
 */




/**
 * 1、 interface
 * 
 *    知识点
 *      1、重名 会 重合
 *      2、任意key (常用于接口返回的res 不想全拿回来 只想要部分数据 不想一个个的定义类型 就可以使用任意key)
 *      3、?   可有可无
 *      4、readonly 只读属性
 *      5、interface继承  (相当于重合 合在一起  关键字extends)
 *      6、定义函数类型
 */

// 首先注意   key不能少 也不能多  两者必须一致   -- 强校验

interface A extends B {
  name:string,
  like:boolean,
  [result:string]:any,  // 任意key -- 除了A里面强校验数据  其他数据你随便吧 any了  result是随便定义的  [xxx:strign]:any
  // '?' 正常来说 我们再interface下定义了数据类型 那么使用这个的对象 他的属性就要和他保持一致
  //  不能多不能少不然就报错  但是有时候可能我们的某个数据 可能后端给 可能不给 所以可以使用这个
  user?:string, // 没有也可以 有就校验
  readonly id:number, // 只读属性
  readonly fn:()=>{}, // 只读属性
}
interface A {          // 此时发生重名的情况 A和A 那么就会重合 
  age:number
}

interface B{          // 演示一下继承 让A 继承 B 的东西   通过关键字extends
  xxx:number
}


//  2、对象类型的使用
let obj:A = {
  name:'1',
  like:false,
  age:2000,
  a:1,  // 任意key
  b:3,  // 任意key
  c:'false',  // 任意key
  d:{
    name:'1'  // 任意key
  },
  id:1,
  fn:()=>{return false},
  xxx:1
}

// 可能有人会尝试修改 id 或者修改函数的返回值  但是我们并不希望别人修改这个东西 所以我们可以给他设置成只读属性
// obj.id = 2
// obj.fn = ()=>{return true}


interface fn{
  // (xxx函数的参数):return函数的返回值
  (name:string):number[]  // 这个函数有一个参数name 数据类型是string类型  他的返回值是一个数字类型的数组
}
const changText:fn = (name)=>{
  console.log(name);
  return [1,2,3]
}
changText('悟空')

 原创：前端-悟空  请勿抄袭 可以转载

 下一章：05 - TS加餐环节 介绍object、Object、{} 类型_Sing前端-悟空的博客-CSDN博客

 码云地址：TypeScript: 深入TypeScript 与您同行