如何在 TypeScript 中動態設定物件的屬性 (How to Set Dynamic Property Keys with TypeScript)

前言

在 JS ES6 中要動態設定物件的屬性，可以透過 Bracket notation 的方式來設定(myobj[key] = "google";)，
但如果在 TypeScript 的物件這樣寫就會出現 TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 的編譯錯誤，如下，

問題與解法

一開始的問題是看到 React-TypeScript Lab5-Data 中，
Project物件的constructor會接受一個 any 物件，再判斷該物件是否有對應的屬性值來設定 Project物件，

export class Project {
  id: number | undefined;
  name: string = "";
  description: string = "";
  imageUrl: string = "";
  contractTypeId: number | undefined;
  contractSignedOn: Date = new Date();
  budget: number = 0;
  isActive: boolean = false;
  get isNew(): boolean {
    return this.id === undefined;
  }

  constructor(initializer?: any) {
    if (!initializer) return;
    if (initializer.id) this.id = initializer.id;
    if (initializer.name) this.name = initializer.name;
    if (initializer.description) this.description = initializer.description;
    if (initializer.imageUrl) this.imageUrl = initializer.imageUrl;
    if (initializer.contractTypeId)
      this.contractTypeId = initializer.contractTypeId;
    if (initializer.contractSignedOn)
      this.contractSignedOn = new Date(initializer.contractSignedOn);
    if (initializer.budget) this.budget = initializer.budget;
    if (initializer.isActive) this.isActive = initializer.isActive;
  }
}

new Project 的程式碼如下，

import { Project } from "./Project";

export const MOCK_PROJECTS = [
  new Project({
    id: 1,
    name: "Johnson - Kutch",
    description:
      "Fully-configurable intermediate framework. Ullam occaecati libero laudantium nihil voluptas omnis.",
    imageUrl: "/assets/placeimg_500_300_arch4.jpg",
    contractTypeId: 3,
    contractSignedOn: "2013-08-04T22:39:41.473Z",
    budget: 54637,
    isActive: false,
  }),
];

只是看到一堆的 if (initializer.屬性) this.屬性 = initializer.屬性;，
覺得應該是可以動態來設定將這些值。
所以就將程式改用 this[v] = initializer[v] 的方式，
結果立馬就出現 TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 的錯誤。

export class Project {
  id: number | undefined;
  name: string = "";
  description: string = "";
  imageUrl: string = "";
  contractTypeId: number | undefined;
  contractSignedOn: Date = new Date();
  budget: number = 0;
  isActive: boolean = false;
  get isNew(): boolean {
    return this.id === undefined;
  }
  constructor(initializer?: any) {
    //debug only
    console.log("before assign:", this);
    if (!initializer) return;
    Object.keys(this).forEach((v) => {
      if (initializer[v]) this[v] = initializer[v];
    });
    // if(initializer.id) this.id = initializer.id;
    // if(initializer.name) this.name = initializer.name;
    // if(initializer.description) this.description = initializer.description;
    // if(initializer.imageUrl) this.imageUrl = initializer.imageUrl;
    // if(initializer.contractTypeId) this.contractTypeId = initializer.contractTypeId;
    // if(initializer.contractSignedOn) this.contractSignedOn = new Date(initializer.contractSignedOn);
    // if(initializer.budget) this.budget = initializer.budget;
    // if(initializer.isActive) this.isActive = initializer.isActive;
    //debug only
    console.log(this);
  }
}

那要怎麼辦呢?
可以參考 Typescript: bracket notation property access 的方式，
在 Project物件中加入 [key: string]: any; 來讓 TypeScript 物件 Support bracket-notation 的方式，如下，

export class Project {
  //Support bracket-notation
  [key: string]: any;
  id: number | undefined;
  name: string = "";
  description: string = "";
  imageUrl: string = "";
  contractTypeId: number | undefined;
  contractSignedOn: Date = new Date();
  budget: number = 0;
  isActive: boolean = false;
  get isNew(): boolean {
    return this.id === undefined;
  }
  constructor(initializer?: any) {
    //debug only
    console.log("before assign:", this);
    if (!initializer) return;
    Object.keys(this).forEach((v) => {
      if (initializer[v]) this[v] = initializer[v];
    });
    //debug only
    console.log(this);
  }
}

這樣就可以透過動態的方式設定屬性值，但是其中日期型態的contractSignedOn卻被改成了字串型態，如下，

所以我們可以再補上針對不是字串型態的屬性來設定，如下，

export class Project {
  //Support bracket-notation
  [key: string]: any;
  id: number | undefined;
  name: string = "";
  description: string = "";
  imageUrl: string = "";
  contractTypeId: number | undefined;
  contractSignedOn: Date = new Date();
  budget: number = 0;
  isActive: boolean = false;
  get isNew(): boolean {
    return this.id === undefined;
  }
  constructor(initializer?: any) {
    //debug only
    console.log("before assign:", this);
    if (!initializer) return;
    Object.keys(this).forEach((v) => {
      if (initializer[v]) this[v] = initializer[v];
    });
    //針對非字串欄位來設定
    if (initializer.contractSignedOn)
      this.contractSignedOn = new Date(initializer.contractSignedOn);
    //debug only
    console.log(this);
  }
}

如果不想覆蓋掉非字串型態的屬性，可以建立一個不自動指定的屬性陣列，不在該陣列中的屬性才自動 Assign，如下，

export class Project {
  //Support bracket-notation
  [key: string]: any;
  id: number | undefined;
  name: string = "";
  description: string = "";
  imageUrl: string = "";
  contractTypeId: number | undefined;
  contractSignedOn: Date = new Date();
  budget: number = 0;
  isActive: boolean = false;
  get isNew(): boolean {
    return this.id === undefined;
  }
  constructor(initializer?: any) {
    //debug only
    console.log("before assign:", this);
    if (!initializer) return;
    const manualProps = ["contractSignedOn"];
    Object.keys(this)
      .filter((v) => manualProps.includes(v) === false && initializer[v])
      .forEach((v) => {
        this[v] = initializer[v];
      });
    //針對非字串欄位來設定
    if (initializer.contractSignedOn)
      this.contractSignedOn = new Date(initializer.contractSignedOn);
    //debug only
    console.log(this);
  }
}

參考資源

How to Set Dynamic Property Keys with ES6
Typescript: bracket notation property access