typescript 对象与接口

对象与接口

js 的对象在日常是用到的地方非常多，最常见的直接对象

const a = {
  name: '小明',
  age: 20
}

下面拿方法的参数来举例，方法参数少的时候写在参数列表中没什么问题。但是参数多的时候就不建议这样写了，使用对象参数来跟家的方便一点。

//分量参数
function getPersonString1(name: string ,age: number);

//使用对象参数 如果多个对象参数的话 这样写会很累的。
function getPersonString2(person:{name: string ; age: number})

//优化的对象参数方法   1. type 别名  2.interface 
//定义接口
interface IPerson{
  name: string;
  age: number;
  isMale: boolean;
}

//别名
type Person = IPerson;

function getPersonString(person: Person): string{
  const {name ,age} = person;
  return `姓名：${name} ，年龄：${age}`;
}

const james:IPersion = {
  name: '夏明'，
  age: 20,
  isMale: true
}

console.log(getPersonString(james));
console.log(getPersonString({name: '夏红',age: 19}));

接口属性

知识点：可选属性、只读属性、多余属性检查、索引属性

interface IPerson{
    name?: string;   //可选属性只要在属性名前面增加问好
    readonly age: number; //只读属性只能在初始化时赋值，声明是 使用readonly 关键字
    isNull: boolean,
    [index :number] : number;    //数字索引
    [key :string] : string;      //字符串索引
}

多余属性检查

把直接对象赋值给类型明确的变量时会不允许出现多余属性
如果需要使用多余属性即未知的属性可以通过索引属性来进行操作，可以赋值接口给定之外的属性

//定义接口属性类型
interface IPerson{
  name: string;
  age: number;
}
//报错 有明确的类型
const james:IPerson = {
    name: '小明' ,
    age: 12,
    isMack: true,    //报错
}
//正常
const james1 = {
    name: '小明' ,
    age: 12,
    isMack: true
}

使用索引属性

索引属性的规则：

数字索引属性类型必须与字符串属性索引类型相同或是其子类型
字符串索引属性类型必须包含已声明的普通属性类型

//创建一个接口
interface IPerson{
  [index: number]: number;    //数字索引    【报错】
  [key: string]: string;    //字符串索引
}

//当你创建上面接口是会报错，字符串索引规则 ‘1’ 中解释，
//数字索引属性类型必须与字符串属性索引类型相同或是其子类型。 
//解决方法 将数字索引的属性类型改为 string 或者 在字符串索引中增加联合属性

interface IPerson{
  [index: number]: number;    //数字索引
  [key: string]: string | number;    //字符串索引
}

//规则2 的体现
interface IPerson{
  [index: number]: number;    //数字索引      
  [key: string]: string | number;    //字符串索引   【报错】
  age: bigint;  
}

//规则2 中有提到，字符串索引属性类型必须包含已声明的普通属性类型 ，索引字符串索引还需要增加bigint 类型
//正常的
interface IPerson{
  [index: number]: number;    //数字索引      
  [key: string]: string | number | bigint;    //字符串索引   【报错】
  age: bigint;  
}

//如果属性的类型比较多的话 可以直接将字符串索引设为 unknown

interface IPerson {
    name?: string | number | boolean;
    readonly age: number;
    isMack: boolean;
    [key: string]: unknown;
    [index: number]: number;

}

//调用
const james:IPerson = {
   name: '小明',
   age: 12,
   isMack: true,
   address: '地址'
}
//使用索引访问
console.log(`地址：${james['address']}`);

typescript 对象 与 接口

对象与接口

接口属性

多余属性检查

使用索引属性

typescript 对象与接口