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

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

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

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

一个索引签名属性的类型必须是 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;
                JavaScript 位置大小相关属性 | offsetX/screenX - clientWidth/offsetWidth - Intersection Observer API
                    CSDN-Ada助手: 
                    推荐 Java 技能树：https://edu.csdn.net/skill/java?utm_source=AI_act_java
                three.js 学习笔记 | 光线投射技术 - 包围盒(碰撞检测)
                    CSDN-Ada助手: 
                    恭喜你这篇博客进入【CSDN月度精选】榜单，全部的排名请看 https://bbs.csdn.net/topics/618571157。 
                three.js 学习笔记 | 光线投射技术 - 包围盒(碰撞检测)
                    CSDN-Ada助手: 
                    恭喜你这篇博客进入【CSDN每天值得看】榜单，全部的排名请看 https://bbs.csdn.net/topics/618553911。 
                react query 学习笔记
                    CSDN-Ada助手: 
                    恭喜你这篇博客进入【CSDN每天值得看】榜单，全部的排名请看 https://bbs.csdn.net/topics/618428929。 
                ThreeJS 几何体顶点position、法向量normal及uv坐标
                    ha_lydms: 
                    这篇博客让我看到了新的世界，感受到了新的思想。我觉得自己受益匪浅！
            JavaScript 位置大小相关属性 | offsetX/screenX - clientWidth/offsetWidth - Intersection Observer API
            《深入理解现代JavaScrpt》阅读笔记-目前更新第五章