Como passar em uma entrevista de TypeScript: principais perguntas de nível avançado

Entrevista avançada de TypeScript: como impressionar o empregador

O TypeScript há muito deixou de ser apenas um "superset" do JavaScript. Em entrevistas modernas para cargos Sênior, testam não apenas o conhecimento de tipos, mas também a capacidade de trabalhar com tipos condicionais, mapeamento, decoradores e o sistema de inferência de tipos. Neste artigo, abordaremos 4 tópicos-chave que ajudarão você a passar com confiança em uma entrevista técnica de TypeScript em nível avançado.

1. Tipos Condicionais (Conditional Types) e a palavra-chave infer

Tipos condicionais permitem selecionar um de dois tipos com base em uma condição. Eles são construídos com base no princípio do operador ternário: T extends U ? X : Y. Na entrevista, podem pedir para você escrever um tipo que extrai o tipo de retorno de uma função.

// Exemplo: extração do tipo de retorno de uma funçãotype ReturnTypeExtract<T> = T extends (...args: any[]) => infer R ? R : never;

function greet(name: string): string {  return "Hello, " + name;}

type GreetReturn = ReturnTypeExtract<typeof greet>; // string

A palavra-chave infer é usada dentro de tipos condicionais para declarar uma nova variável de tipo. Ela permite "extrair" uma parte do tipo de uma estrutura complexa. Frequentemente perguntam: "O que é infer e onde ele é aplicado?". Resposta: para extrair tipos de promessas, funções, tuplas.

// Extração do tipo do elemento de uma Promisetype UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

type Result = UnwrapPromise<Promise<number>>; // numbertype Result2 = UnwrapPromise<string>; // string

2. Tipos Mapeados (Mapped Types) e modificadores readonly/optional

Tipos mapeados permitem criar novos tipos iterando sobre as propriedades de um tipo existente. Esta é uma ferramenta poderosa para criar tipos utilitários como Partial<T> ou Readonly<T>. Na entrevista, podem pedir para implementar seu próprio análogo de Pick<T, K>.

// Implementação própria do Picktype MyPick<T, K extends keyof T> = {  [P in K]: T[P];};

interface User {  id: number;  name: string;  email: string;}

type UserBasic = MyPick<User, 'id' | 'name'>;// { id: number; name: string }

Observe o keyof T — é um operador que retorna a união das chaves de um objeto. Em combinação com o mapeamento, ele permite transformar tipos de forma flexível. Também perguntam frequentemente sobre os modificadores readonly e ? (optional). Eles podem ser adicionados ou removidos usando os prefixos + e -:

// Removendo readonly de todas as propriedadestype Mutable<T> = {  -readonly [P in keyof T]: T[P];};

type ImmutableUser = Readonly<User>;type MutableUser = Mutable<ImmutableUser>; // todos os campos são novamente mutáveis

3. Decoradores e sua tipagem

Decoradores são um recurso experimental do TypeScript, amplamente utilizado em Angular e NestJS. Na entrevista, podem perguntar como tipar um decorador de classe ou método. É importante entender que um decorador é simplesmente uma função que recebe o objeto alvo e o retorna (ou um novo).

// Decorador de classe com tipagemfunction Logger<T extends { new (...args: any[]): {} }>(constructor: T) {  console.log(`Class ${constructor.name} created`);  return class extends constructor {    constructor(...args: any[]) {      super(...args);      console.log('Instance created');    }  };}

@Loggerclass MyService {  constructor(public name: string) {}}

const service = new MyService('Test'); // No console: "Class MyService created", depois "Instance created"

Em perguntas avançadas, podem pedir para implementar um decorador que adiciona metadados ou validação. Observe o uso de genéricos — <T extends { n