對象與接口

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

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

下面拿方法的參數(shù)來舉例，方法參數(shù)少的時候?qū)懺趨?shù)列表中沒什么問題。但是參數(shù)多的時候就不建議這樣寫了，使用對象參數(shù)來跟家的方便一點。

//分量參數(shù)
function getPersonString1(name: string ,age: number);

//使用對象參數(shù) 如果多個對象參數(shù)的話 這樣寫會很累的。
function getPersonString2(person:{name: string ; age: number})

//優(yōu)化的對象參數(shù)方法   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 關(guān)鍵字
    isNull: boolean,
    [index :number] : number;    //數(shù)字索引
    [key :string] : string;      //字符串索引
}

多余屬性檢查

把直接對象賦值給類型明確的變量時會不允許出現(xiàn)多余屬性
如果需要使用多余屬性即 未知的屬性 可以通過索引屬性來進(jìn)行操作，可以賦值接口給定之外的屬性

//定義接口屬性類型
interface IPerson{
  name: string;
  age: number;
}
//報錯 有明確的類型
const james:IPerson = {
    name: '小明' ,
    age: 12,
    isMack: true,    //報錯
}
//正常
const james1 = {
    name: '小明' ,
    age: 12,
    isMack: true
}

使用索引屬性

索引屬性的規(guī)則：

1. 數(shù)字索引屬性類型必須與字符串屬性索引類型相同或是其子類型
2. 字符串索引屬性類型必須包含已聲明的普通屬性類型

//創(chuàng)建一個接口
interface IPerson{
  [index: number]: number;    //數(shù)字索引    【報錯】
  [key: string]: string;    //字符串索引
}

//當(dāng)你創(chuàng)建上面接口是會報錯，字符串索引規(guī)則 ‘1’ 中解釋，
//數(shù)字索引屬性類型必須與字符串屬性索引類型相同或是其子類型。 
//解決方法 將數(shù)字索引的屬性類型改為 string 或者 在字符串索引中增加聯(lián)合屬性

interface IPerson{
  [index: number]: number;    //數(shù)字索引
  [key: string]: string | number;    //字符串索引
}

//規(guī)則2 的體現(xiàn)
interface IPerson{
  [index: number]: number;    //數(shù)字索引      
  [key: string]: string | number;    //字符串索引   【報錯】
  age: bigint;  
}

//規(guī)則2 中有提到，字符串索引屬性類型必須包含已聲明的普通屬性類型 ，索引字符串索引還需要增加bigint 類型
//正常的
interface IPerson{
  [index: number]: number;    //數(shù)字索引      
  [key: string]: string | number | bigint;    //字符串索引   【報錯】
  age: bigint;  
}

//如果屬性的類型比較多的話 可以直接將字符串索引設(shè)為 unknown

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

}

//調(diào)用
const james:IPerson = {
   name: '小明',
   age: 12,
   isMack: true,
   address: '地址'
}
//使用索引訪問
console.log(`地址：${james['address']}`);