TypeScript object types

type of object

When adding an interface, the separator semicolon and comma can be used, and the semicolon can be omitted for line breaks, because line breaks in JS will automatically add semicolons

At this time, the variable needs to strictly abide by the requirements in the interface, and one less attribute and one more attribute are not allowed

Define the interface, generally use the first letter capitalized

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

Optional Attributes
If you want an attribute to be optional, you can use?

Read-only properties
and static need to be placed behind it

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

Index signature: not sure about the exact property name

Index signature: can be accessed through the index [标识符自己起:通过什么索引访问]:索引访问之后返回值的类型
Usage scenario: I don’t know what the specific implementation is like, but I know it has certain characteristics

illustrate

The type of an index signature property must be stringor numberone of
The type of a numeric type index must be a subtype of a string type index

Reason: All numeric types are eventually converted to stringtype access when accessing the index. If it is set at the same time, the type obtained by the digital type 0 needs to match the type obtained by the string type '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"]

Object increase attribute error solution

Problem Description
Commonly used in JavaScript, first declare an empty object, and then add properties and assign values to the empty object. But when this operation is placed in TypeScript, an error will occur.

let a = {
    
    };

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

Reason: TypeScript does not allow adding undeclared properties.

Method 1: Add attribute definition to the object

Applicable to situations where it is clear which attributes

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

Source code related to undefined expression will be compiled into void 0

Method 2: Add a type definition to the object

If you are not sure about the property name in the object

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

a.a = 1;

If you determine part of the attribute name, you can combine optional attributes and mandatory attributes to specify the parameters passed in

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

Method 3: Add global any to the object (not recommended/emergency available)

let a: any = {
    
    };

Object attribute assignment problem todo

Todo
reference article: https://juejin.cn/post/6844903973330092045, the article I saw suddenly, I haven't encountered the usage scenario yet, and I will study it when I have time.

TypeScript object type | Empty object adds attribute error solution - dynamically assign value to object in TypeScript