[Typescript] Dynamic types: Use TypeScript's Mapped Types and Template Literal Types Together(代码

Posted Answer1215

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[Typescript] Dynamic types: Use TypeScript's Mapped Types and Template Literal Types Together(代码相关的知识,希望对你有一定的参考价值。

we\'re going to dive deep into a more complex example in which we combine mapped types, key remapping, template literal types, and indexed access types to statically type a highly dynamic javascript function in TypeScript.

Start with following code:

function createGetterObject(obj: any): any {
    const newObj: any = {};
    for (const key of Object.keys(obj)) {
        const cpK = key[0].toUpperCase() + key.substr(1);
        const getterKey = `get${cpK}`;
        newObj[getterKey] = () => obj[key];
    }
    return newObj;
}

const user = createGetterObject({
    name: "Wan",
    twitter: "zhentiw"
})

console.log(user)
console.log(user.getName())
console.log(user.getTwitter())

 

We want to get better typings support.

function createGetterObject<T>(obj: T): PropGetters<T> {
    const newObj: any = {};
    for (const key of Object.keys(obj)) {
        const cpK = key[0].toUpperCase() + key.substr(1);
        const getterKey = `get${cpK}`;
        newObj[getterKey] = () => obj[key];
    }
    return newObj;
}

type PropGetters<T> = {

}

Get an error:

This is because `T` can be any as well. We need to limit T type by telling that `T` can be only for Object:

function createGetterObject<T extends Record<string, any>>(obj: T): PropGetters<T> {

 

In `PropGetter`, we want to create similar to 

type PropGetters<T> = {
  getName: () => sting
  getTwitter: () => string
}

How to make those?

 

We can start from:

type PropGetters<T> = {
 [Key in keyof T]: () => T[Key]
}

keyof T: get all the keys of T, so we got `name` & `twitter`

T[Key]: as lookup type, `name` prop result in string `Wan`.

 

This is what we get as a result:

`name` & `twitter` are functions type which return string, not really what we want.

 

Template Literal Types

type PropGetters<T> = {
 [Key in keyof T as `get${Key}`]: () => T[Key]
}

Got error:

This is because Key can be string, number, boolean... , what we want is just string type, so we can do:

type PropGetters<T> = {
 [Key in string & keyof T as `get${Key}`]: () => T[Key]
}

Now, we got:

We actual want `getName` not as `getname`, to fix this, we can do:

type PropGetters<T> = {
 [Key in string & keyof T as `get${Capitalize<Key>}`]: () => T[Key]
}

 

Now the type should works. If we add another prop `id`:

Typescript can tell the return value is a number type.

 

Final piece to limit `T` in `PropGetters`:

type PropGetters<T extends Record<string, any>> = {
 [Key in string & keyof T as `get${Capitalize<Key>}`]: () => T[Key]
}

 

 

Read: https://egghead.io/lessons/typescript-use-typescript-s-mapped-types-and-template-literal-types-together

以上是关于[Typescript] Dynamic types: Use TypeScript's Mapped Types and Template Literal Types Together(代码的主要内容,如果未能解决你的问题,请参考以下文章

type '_InternalLinkedHashMap<String, dynamic>' 不是类型 'Iterable<dynamic>' 的子类型

type _InternalLinkedHashMap<String, dynamic> 不是 List<dynamic> 类型的子类型

dynamic_cast

Dynamic V Strongly Typed Views

_TypeError 在构建 FutureBuilder<dynamic>(dirty, state: _FutureBuilderState<dynamic> type 'N

使用 Json 错误是 * type 'List<dynamic>' is not a subtype of type 'String'*