是否可以基於某些 model 創建動態 Typescript 類型？

Question

考慮我有一個Address接口 model：

interface AddressModel {
  street: string | null;
  streetNumber: string | null;
  postalCode: string | null;
  city: string | null;
  country: string | null;
  latitude: number | null;
  longitude: number | null;
}

隨着 Angular 14 發布，我想創建一個基於AddressModel的類型化表單組，其中鍵是表單控件的名稱，值是表單控件本身，帶有鍵的透視值，因此結果 model 將是：

interface AddressFormGroup {
  street: FormControl<string | null>;
  streetNumber: FormControl<string | null>;
  postalCode: FormControl<string | null>;
  city: FormControl<string | null>;
  country: FormControl<string | null>;
  latitude: FormControl<number | null>;
  longitude: FormControl<number | null>;
}

我知道這可以手動創建 model 但也許 Typescript 具有自動化此過程的功能？

Answer 1

一個簡單的映射類型將為您執行此操作。

type ToFormControl<T> = {
    [K in keyof T]: FormControl<T[K]>
}

type AddressFormGroup = ToFormControl<AddressModel>

// type AddressFormGroup = {
//     street: FormControl<string | null>;
//     streetNumber: FormControl<string | null>;
//     postalCode: FormControl<string | null>;
//     city: FormControl<string | null>;
//     country: FormControl<...>;
//     latitude: FormControl<...>;
//     longitude: FormControl<...>;
// }

---

操場