TypeScript引用类型 | 空对象增加属性报错解决方案 - 在TypeScript中动态为对象赋值 - 初始化空数组 -具有未知键的对象定义类型

TypeScript引用类型

对象的类型

添加接口的时候，分割符分号和逗号都可以，换行可以省略分号，因为JS中换行会自动添加分号

此时变量需要严格遵守接口中的要求，少一个属性多一个属性都不可以

定义接口，一般使用首字母大写

// 定义接口，一般使用首字母大写
interface Person {
    name: string;
    age: number;
}

可选属性
如果希望属性是可选的，可以使用?

只读属性
和static连用需要放在其后面

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}

索引签名: 不确定具体的属性名

索引签名:可以通过索引访问[标识符自己起:通过什么索引访问]:索引访问之后返回值的类型
使用场景:不知道具体的实现是什么样的，但是知道具备某种特性

说明

• 一个索引签名属性的类型必须是string或者number其中一个
• 数字类型索引的类型必须是字符串类型索引的子类型

原因:所有数字类型访问索引时最终都是转换为string类型访问的，如果同时设置了，数字类型0拿到的类型需要符合字符串类型’0’拿到的类型

//案例1
interface IndexLanguage {
	[index:number]:string //通过number索引访问，访问之后返回string类型数据
	//这里定义的属性也得满足索引签名的要求
	//如果需要两种类型，需要分开写(语法不支持)
	 [index:string]:string 
}
function getInfo():IndexLanguage {} //不知道具体的实现是什么样的，但是知道具备某种特性
const frontLanguage = getInfo()

//案例2
interface IPerson {
  //告知通过索引获取到的数据类型是什么样
  [index:string]: string
}
//报错原因 ["biu","ranran"]通过字面量创建的Array实例 =>数组中自带了很多其他属性比如name.forEach返回值是Function不是string
const name:IPerson = ["biu","ranran"]

为未知键的对象定义类型 Record

Record 类型来定义对象的类型。
Record 类型接受两个参数，第一个参数是键的类型，第二个参数是值的类型。

type UnknownObject = Record<string, unknown>;

const unknownObj: UnknownObject = {
  key1: "value1",
  key2: 123,
  key3: true,
};

为具有已知和未知键的对象定义类型 交叉类型

type KnownKeys = {
  key1: string;
  key2: number;
};

type UnknownKeys = Record<string, unknown>;

type MixedObject = KnownKeys & UnknownKeys;

对象增加属性报错解决方案

问题描述
在JavaScript中常见使用，先声明一个空对象，然后再给空对象增加属性并赋值。但是这个操作放在TypeScript中会发生报错。

let a = {};

a.b = 1;
// 终端编译报错：TS2339: Property 'b' does not exist on type '{}'.
// 编辑器报错：[ts] 类型“{}”上不存在属性“b”。

原因:TypeScript不允许增加没有声明的属性。

方法1:在对象中增加属性定义

适用于明确有哪些属性的情况

let a = {b: void 0};
a.b = 'xxxx';//a.b可以赋值任意的类型

源码涉及到 undefined 表达都会被编译成 void 0

方法2:在对象中增加类型定义

如果不确定对象中的属性名

//propName 可以是任意值
interface Obj {
    [propName: string]: any
};
let a: obj = {};

a.a = 1;

如果确定部分属性名，可以结合可选属性和必选属性规范传入的参数

export interface Obj {
  subdivFactor?: number
  DQGStyle?: number
  isDrawSurface?: boolean
  [key: string]: any
}

方法3:对象增加全局any(不推荐/应急可用)

let a: any = {};

数组类型

初始化空数组

• 1.使用构造函数的形式：const persons: Array<Person> = new Array<Person>();
• 2.先置空：const persons: Array<Person> = null;