Falamos bastante sobre algumas coisas basicas do Typescript no . 어떻게 해야 합니까?

제네릭

이 문제에 대해 관심이 있는 사람은 어떤 문제가 발생했는지 확인하고 문제를 해결할 수 있는 방법이 무엇인지 알고 있습니다. Lembram dos util 유형? No caso do Pick, por exemplo, vc faz uso de dois generics um para o tipo base que vc quer manipular eo outro para as key desse tipo. A sintaxe de pick é: Pick<Type, Keys>

Ah mas como eu sei quando usar isso?

기본 기능에는 일반, 고유 유형, 조건부 유형 등이 있습니다.

예시

const foo = <MeuTipo>(value: MeuTipo): MeuTipo => value;

/* caso vc queira usar via type inferrence (ts consegue analisar o seu codigo e definir o tipo)*/
foo(1); // logo value será um number

/* caso vc queira assumir que será um tipo específico */
foo<number>(1); // se vc colocar uma string o ts vai acusar um erro

/* caso vc queira assumir mais de um tipo possível */
foo<string | number>('a'); // a função vai aceitar number ou strings

맞춤 유틸리티 유형

Para criar o seu próprio util type vc deve ter em mente que ele deve ser simples(pq senão vira um monstrinho) e o que ele deve fazer.

Vc vai precisar usar generics (provavelmente) 및 vários utils do ts. Bom... vamos aos exemplos.

WithPrefix(버전 1)

Basicamente vamos adicionar um prefixo para as keys de um Type definido, logo precisaremos de 2 generics (Type e Prefix)

type WithPrefix<Type, Prefix extends string> = {
    [Key in keyof Type as Key extends string ? `${Prefix}${Capitalize<Key>}` : Key]: Type[Key];
}

type Person = {
    name: string;
    age: number;
};

type PersonWithPrefix = WithPrefix<Person, 'person'>;

Isso funciona와 같은 분석 도구:

Criamos o type WithPrefix recebendo o tipo base eo prefixo (definindo que semper será uma string. Essa é a função daquele extends string )

Percorremos todas as key de Type criando um variável Key que receberá o valor de cada key num loop (por isso aquele in keyof).

Usamos a expressão as para definir uma nova key

como existem diversos tipos possíveis na expressão in keyof Type tivemos que verificar se a nossa Key é uma string usando a expressão Key extends string

Utilizamos um ternário para quando a Key for uma string adicionar o prefixo via string interpolation (a mesma que a gente usa no js/ts do dia a dia). Caso não seja uma string, usará a própria Key

Por fim, mas não menos importante demos o valor reference a Key atual do loop para a nossa nova key usando Type[Key]

O retorno disso (se vc passar o mouse em cima no seu vscode) será:

type PersonWithPrefix = {
    personName: string;
    personAge: number;
}

맨 위!

Mas e se vc quiser somente para algumas key???
Bom... aí vamos para a versão 2

WithPrefix(버전 2)

Agora nós queremos usar o prefixo somente para algumas keys, podemos usar um Pick no nosso Type ou fazer um novo generic.

Passando um Pick

type PersonWithPrefix = WithPrefix<Pick<Person, 'name'>, 'person'>;
/* o retorno será:
type PersonWithPrefix = {
    personName: string;
}
*/

우산도 마이스 음 제네릭

type WithPrefix<Type, Prefix extends string, Keys extends keyof Type = keyof Type> = {
    [Key in Keys as Key extends string ? `${Prefix}${Capitalize<Key>}` : Key]: Type[Key];
}

type Person = {
    name: string;
    age: number;
};

type PersonWithPrefix = WithPrefix<Person, 'person'>;

type JustPersonNameWithPrefix = WithPrefix<Person, 'person', 'name'>;

O que mudamos:

adicionar um generic Keys que é semper uma key de Type (por isso o extends keyof Type )

demos um valor default para o novo generic. Quando não passamos valor algum isso irá assumir todas as keys de Type(표현식= keyof Type )

Por fim passamos a percorrer nosso loop usando Keys e o fluxo segue o mesmo

O retorno disso (se vc passar o mouse em cima dos dois ultimos types que criamos no seu vscode):

type PersonWithPrefix = {
    personName: string;
    personAge: number;
}

type JustPersonNameWithPrefix = {
    personName: string;
}

결론

Com isso pudemos ver mais sobre generics, como criar nosso próprio util type, como passar um default para um generic e como percorrer keys de um type, além de dar um novo "nomezinho"pra essa key.
Lembre-se de usar com cuidado e semper prezando pela simplicidade no seu código.

최종 vc는 vc mesmo에 대한 coda somente, mas sim para toda a sua equipment.