Typescript 如何为对象动态分配属性？

在TypeScript中，动态地为对象分配属性可以通过几种方式来实现，包括索引签名、使用Object.assign方法，或者使用扩展操作符。下面我将分别解释每种方法，并提供示例。

1. 索引签名

如果你想要一个对象能够接受任意数量的属性，你可以在TypeScript中使用索引签名(index signature)。索引签名的写法就是在接口中使用[key: T]: U的形式，其中T通常是string或number，U则是任何类型，表示对象的属性值的类型。

typescript
interface DynamicObject {
  [key: string]: any;
}

const obj: DynamicObject = {};
obj.dynamicProperty = 'value';

在这个例子中，DynamicObject接口允许你给obj对象分配任何字符串属性，其值可以是任何类型。

2. 使用Object.assign

Object.assign方法可以用来将所有可枚举的属性从一个或多个源对象复制到目标对象，并返回目标对象。

typescript
const obj: { [key: string]: any } = {};

Object.assign(obj, {
  dynamicProperty: 'value',
  anotherProperty: 123,
});

在这个例子中，Object.assign用于向obj添加dynamicProperty和anotherProperty属性。

3. 使用扩展操作符（Spread Operator）

扩展操作符可以用于复制对象的属性。这通常用在对象字面量中，当你想要在创建新对象时添加额外属性。

typescript
let obj: { [key: string]: any } = {};

obj = {
  ...obj,
  dynamicProperty: 'value',
};

在这个例子中，我们创建了一个新对象，它具有obj原来的所有属性，并添加了一个名为dynamicProperty的新属性。

动态属性名

除了上述几种方法之外，如果你想动态地定义属性的名字，你可以使用计算属性名(computed property names)。

typescript
const propName = 'dynamicProperty';
const obj: { [key: string]: any } = {};

obj[propName] = 'value';

在这个例子中，propName变量的值被用作对象obj的属性名。

以上就是在TypeScript中为对象动态分配属性的几种方式，每种方法都可以根据不同的场景选择使用。### 4. 类型断言 在某些情况下，你可能需要对现有的对象进行操作，为其添加属性。在TypeScript中，如果你非常确信这样做不会导致运行时错误，可以使用类型断言(temporary type assertion)来绕过类型检查。

typescript
interface BaseObject {
  baseProperty: string;
}

const obj = {} as BaseObject;
obj.baseProperty = 'base';
obj['dynamicProperty'] = 'dynamic value';

在这个例子中，我们首先声明了一个接口BaseObject，然后我们创建了一个空对象并断言它为BaseObject类型，然后我们为其添加了一个动态属性。这种方法应该慎用，因为它会绕过编译器的类型检查。

5. 映射类型

映射类型(Map Types)在TypeScript中也是一种强大的方式，可以用来动态地创建带有属性的对象类型。

typescript
type DynamicKeys<T> = {
  [P in keyof T]: T[P];
};

interface KnownProps {
  fixedProperty: string;
}

type ExtendedObject = DynamicKeys<KnownProps & { [key: string]: any }>;

const obj: ExtendedObject = { fixedProperty: 'fixed' };
obj.dynamicProperty = 'dynamic value';

在这个例子中，我们定义了一个DynamicKeys映射类型，它将传入的类型T的每个属性映射到相同的类型。然后我们定义了一个KnownProps接口，最后我们创建了一个ExtendedObject类型，它结合了KnownProps和一个索引签名来允许动态属性。这样我们就可以在保留原有属性类型的同时，为对象添加任意的新属性。

6. 使用类型守卫

有时，你可能在一个已经定义好的对象类型上临时添加属性。为了保持类型安全，你可以使用类型守卫来检查属性是否存在，并在添加属性之前进行断言。

typescript
interface BaseObject {
  baseProperty?: string;
}

const obj: BaseObject = {};

// 假设我们想要添加一个不确定是否已经存在的属性
if (!('dynamicProperty' in obj)) {
  // obj 现在被视为具有 dynamicProperty 属性的类型
  (obj as any).dynamicProperty = 'dynamic value'; // 使用 'any' 断言绕过类型系统
}

在这里，我们使用in操作符作为类型守卫，以确保我们不会覆盖对象上已经存在的属性。

小结

在实际应用中，你应该根据具体的需求和场景选择合适的方法。动态属性的引入可能会使得类型检查变得复杂，因此请务必在确保类型安全的前提下使用这些技术，并尽可能利用TypeScript的类型系统来维护良好的代码健壮性。

Index signatures

It is possible to denote obj as any, but that defeats the whole purpose of using typescript. obj = {} implies obj is an Object. Marking it as any makes no sense. To accomplish the desired consistency an interface could be defined as follows, using an index signature

shell
interface LooseObject {
    [key: string]: any
}

var obj: LooseObject = {};

OR to make it compact:

shell
var obj: {[k: string]: any} = {};

LooseObject can accept fields with any string as key and any type as value.

shell
obj.prop = "value";
obj.prop2 = 88;

The real elegance of this solution is that you can include typesafe fields in the interface.

shell
interface MyType {
    typesafeProp1?: number,
    requiredProp1: string,
    [key: string]: any
}

var obj: MyType ;
obj = { requiredProp1: "foo"}; // valid
obj = {} // error. 'requiredProp1' is missing
obj.typesafeProp1 = "bar" // error. typesafeProp1 should be a number

obj.prop = "value";
obj.prop2 = 88;

Record<Keys,Type> utility type

Update (August 2020): @transang brought up the Record<Keys,Type> utility type in comments

Record<Keys,Type> is a Utility type in typescript. It is a much cleaner alternative for key-value pairs where property-names are not known. It's worth noting that Record<Keys,Type> is a named alias to {[k: Keys]: Type} where Keys and Type are generics. IMO, this makes it worth mentioning here

For comparison,

shell
var obj: {[k: string]: any} = {};

becomes

shell
var obj: Record<string,any> = {}

MyType can now be defined by extending Record type

shell
interface MyType extends Record<string,any> {
    typesafeProp1?: number,
    requiredProp1: string,
}

While this answers the Original question, the answer here by @GreeneCreations might give another perspective on how to approach the problem.

This solution is useful when your object has Specific Type. Like when obtaining the object to other source.

shell
let user: User = new User();
(user as any).otherProperty = 'hello';
//user did not lose its type here.

Or all in one go:

shell
  var obj:any = {}
  obj.prop = 5;

I tend to put any on the other side i.e. var foo:IFoo = <any>{}; So something like this is still typesafe:

shell
interface IFoo{
    bar:string;
    baz:string;
    boo:string;     
}

// How I tend to intialize 
var foo:IFoo = <any>{};

foo.bar = "asdf";
foo.baz = "boo";
foo.boo = "boo";

// the following is an error, 
// so you haven't lost type safety
foo.bar = 123; 

Alternatively you can mark these properties as optional:

shell
interface IFoo{
    bar?:string;
    baz?:string;
    boo?:string;    
}

// Now your simple initialization works
var foo:IFoo = {};

Try it online

Although the compiler complains it should still output it as you require. However, this will work.

shell
const s = {};
s['prop'] = true;

如何在 TypeScript 中动态为对象分配属性？,在 TypeScript 中，你可以使用多种方法来动态地为对象分配属性。以下是几种不同的方法：

方法 1: 使用索引签名

如果你提前知道属性的类型，但不知道属性的名称，你可以使用索引签名来定义一个对象，这个对象可以接受任意名称的属性。

typescript
// 定义一个索引类型
interface DynamicObject {
  [key: string]: any; // 可以使用 string, number, symbol
}

// 创建一个动态对象
const obj: DynamicObject = {};

// 动态添加属性
obj['newProperty'] = 'New Value';
obj.dynamicField = 123;

console.log(obj);

方法 2: 使用泛型和 keyof

如果你有一个特定的对象类型，并且想要添加或修改这个类型的属性，你可以使用泛型和 keyof。

typescript
type KnownObject = {
  existingProperty: string;
};

function setProperty<T, K extends keyof any, V>(
  obj: T,
  key: K,
  value: V
): T & Record<K, V> {
  return {
    ...obj,
    [key]: value,
  };
}

const knownObj: KnownObject = { existingProperty: 'Hello' };

const updatedObj = setProperty(knownObj, 'dynamicProperty', 456);

console.log(updatedObj);

方法 3: 使用 Object.assign()

Object.assign() 方法可以用来复制一个或多个源对象的所有可枚举自有属性到目标对象，返回目标对象。

typescript
const obj: {[key: string]: any} = {};

Object.assign(obj, { dynamicProperty: 'Dynamic' });

console.log(obj);

方法 4: 使用扩展运算符（Spread Operator）

扩展运算符可以用来将现有对象的属性复制到新对象中，并添加新的属性。

typescript
const obj = {};

const newProperty = 'dynamic';
const newObj = {
  ...obj,
  [newProperty]: 'Value',
};

console.log(newObj);

总结

以上是在 TypeScript 中动态分配对象属性的几种方法。在实际使用时，需要根据你的具体需求来选择合适的方法。使用索引签名和 Object.assign() 通常更灵活，而使用泛型和 keyof 可以为类型安全提供更强的保障。

在TypeScript中，动态地为对象分配属性可以通过几种方式来实现，包括索引签名、使用Object.assign方法，或者使用扩展操作符。下面我将分别解释每种方法，并提供示例。

1. 索引签名

如果你想要一个对象能够接受任意数量的属性，你可以在TypeScript中使用索引签名(index signature)。索引签名的写法就是在接口中使用[key: T]: U的形式，其中T通常是string或number，U则是任何类型，表示对象的属性值的类型。

typescript
interface DynamicObject {
  [key: string]: any;
}

const obj: DynamicObject = {};
obj.dynamicProperty = 'value';

在这个例子中，DynamicObject接口允许你给obj对象分配任何字符串属性，其值可以是任何类型。

2. 使用Object.assign

Object.assign方法可以用来将所有可枚举的属性从一个或多个源对象复制到目标对象，并返回目标对象。

typescript
const obj: { [key: string]: any } = {};

Object.assign(obj, {
  dynamicProperty: 'value',
  anotherProperty: 123,
});

在这个例子中，Object.assign用于向obj添加dynamicProperty和anotherProperty属性。

3. 使用扩展操作符（Spread Operator）

扩展操作符可以用于复制对象的属性。这通常用在对象字面量中，当你想要在创建新对象时添加额外属性。

typescript
let obj: { [key: string]: any } = {};

obj = {
  ...obj,
  dynamicProperty: 'value',
};

在这个例子中，我们创建了一个新对象，它具有obj原来的所有属性，并添加了一个名为dynamicProperty的新属性。

动态属性名

除了上述几种方法之外，如果你想动态地定义属性的名字，你可以使用计算属性名(computed property names)。

typescript
const propName = 'dynamicProperty';
const obj: { [key: string]: any } = {};

obj[propName] = 'value';

在这个例子中，propName变量的值被用作对象obj的属性名。

以上就是在TypeScript中为对象动态分配属性的几种方式，每种方法都可以根据不同的场景选择使用。

4. 类型断言

在某些情况下，你可能需要对现有的对象进行操作，为其添加属性。在TypeScript中，如果你非常确信这样做不会导致运行时错误，可以使用类型断言(temporary type assertion)来绕过类型检查。

typescript
interface BaseObject {
  baseProperty: string;
}

const obj = {} as BaseObject;
obj.baseProperty = 'base';
obj['dynamicProperty'] = 'dynamic value';

在这个例子中，我们首先声明了一个接口BaseObject，然后我们创建了一个空对象并断言它为BaseObject类型，然后我们为其添加了一个动态属性。这种方法应该慎用，因为它会绕过编译器的类型检查。

5. 映射类型

映射类型(Map Types)在TypeScript中也是一种强大的方式，可以用来动态地创建带有属性的对象类型。

typescript
type DynamicKeys<T> = {
  [P in keyof T]: T[P];
};

interface KnownProps {
  fixedProperty: string;
}

type ExtendedObject = DynamicKeys<KnownProps & { [key: string]: any }>;

const obj: ExtendedObject = { fixedProperty: 'fixed' };
obj.dynamicProperty = 'dynamic value';

在这个例子中，我们定义了一个DynamicKeys映射类型，它将传入的类型T的每个属性映射到相同的类型。然后我们定义了一个KnownProps接口，最后我们创建了一个ExtendedObject类型，它结合了KnownProps和一个索引签名来允许动态属性。这样我们就可以在保留原有属性类型的同时，为对象添加任意的新属性。

6. 使用类型守卫

有时，你可能在一个已经定义好的对象类型上临时添加属性。为了保持类型安全，你可以使用类型守卫来检查属性是否存在，并在添加属性之前进行断言。

typescript
interface BaseObject {
  baseProperty?: string;
}

const obj: BaseObject = {};

// 假设我们想要添加一个不确定是否已经存在的属性
if (!('dynamicProperty' in obj)) {
  // obj 现在被视为具有 dynamicProperty 属性的类型
  (obj as any).dynamicProperty = 'dynamic value'; // 使用 'any' 断言绕过类型系统
}

在这里，我们使用in操作符作为类型守卫，以确保我们不会覆盖对象上已经存在的属性。

小结

在实际应用中，你应该根据具体的需求和场景选择合适的方法。动态属性的引入可能会使得类型检查变得复杂，因此请务必在确保类型安全的前提下使用这些技术，并尽可能利用TypeScript的类型系统来维护良好的代码健壮性。