在 TypeScript 中声明动态添加的类属性 [英] Declare dynamically added class properties in TypeScript

问题描述

我想在不知道 TypeScript 中的属性名称、值和值类型的情况下为类的实例分配属性.假设我们有以下 example.ts 脚本:

I want to assign properties to the instance of a class without knowing the property names, values and types of values in TypeScript. Lets assume we have the following example.ts script:

// This could be a server response and could look totally diffent another time...
const someJson:string = '{ "foo": "bar", "bar": "baz" }'

class MyClass {
  someProperty:boolean

  constructor( json:string ) {
    const parsedJson:any = JSON.parse( json )

    Object.keys( parsedJson ).forEach(
      ( key:string ) => {
        this[ key ] = parsedJson[ key ]
      }
    )

    this['someProperty'] = true
  }
}

const myInstance = new MyClass( someJson )

// Works fine, logs `true`.
console.log( myInstance.someProperty )

// Error: Property 'foo' does not exist on type 'MyClass'.
console.log( myInstance.foo )

// Error: Property 'bar' does not exist on type 'MyClass'.
console.log( myInstance.bar )

我如何确保 TypeScript 编译器不会抱怨动态添加的属性，而是将它们作为任何类型的 "key": value 对处理.我仍然希望 tsc 确保 myInstance.someProperty 必须是 boolean 类型，但我希望能够获得 myInstance.whatever 即使没有定义它也不会遇到编译器错误.

How can I make sure that the TypeScript compiler does not complain of the dynamically added properties but instead handle them as "key": value pairs of any type. I still want tsc to make sure that myInstance.someProperty has to be of type boolean but I want to be able to get myInstance.whatever even if it is not defined without running into compiler errors.

我没有找到任何让我清楚这一点的文档.也许是因为我的母语不是英语.所以请保持简单的答案.

I did not find any documentation that makes this clear to me. Maybe because I'm not a native english speaker. So please keep the answers simple.

我记得有类似下面的东西，但我从来没有让它起作用:

I remember that there was something like the following but I never got that to work:

interface IMyClass {
  [name:string]: any
}

推荐答案

问题是您在运行时添加了新属性，而编译器无法知道这一点.

The problem is that you're adding the new properties at runtime and the compiler has no way of knowing that.

如果你事先知道属性名称，那么你可以这样做:

If you know the property names in advance then you can do this:

type Json = {
    foo: string;
    bar: string;
}

...

const myInstance = new MyClass(someJson) as MyClass & Json;
console.log(myInstance.foo) // no error

<小时>

编辑

如果你事先不知道属性，那么你不能这样做:

---

Edit

If you do not know the properties in advance then you can't do this:

console.log(myInstance.foo);

因为你知道 foo 是接收到的 json 的一部分，你可能会得到类似的东西:

Because then you know that foo is part of the received json, you'll probably have something like:

let key = getKeySomehow();
console.log(myInstance[key]);

这应该可以在编译器没有错误的情况下工作，唯一的问题是编译器不知道返回值的类型，它将是 any.

And this should work without an error from the compiler, the only problem with that is that the compiler doesn't know the type for the returned value, and it will be any.

所以你可以这样做:

const myInstance = new MyClass(someJson) as MyClass & { [key: string]: string };
let foo = myInstance["foo"]; // type of foo is string
let someProperty = myInstance["someProperty"]; // type of someProperty is boolean

<小时>

第二次编辑

因为你知道道具，但在课堂上不知道，你可以这样做:

---

2nd edit

As you do know the props, but not in the class, you can do:

type ExtendedProperties<T> = { [P in keyof T]: T[P] };
function MyClassFactory<T>(json: string): MyClass & ExtendedProperties<T> {
    return new MyClass(json) as MyClass & ExtendedProperties<T>;
}

然后您只需像这样使用它:

Then you simply use it like so:

type Json = {
    foo: string;
    bar: string;
};
const myInstance = MyClassFactory<Json>(someJson);

请注意，这仅适用于 typescript 2.1 及更高版本.

Note that this will work only on typescript 2.1 and above.

这篇关于在 TypeScript 中声明动态添加的类属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！