Dicas de Digitação TypeScript: Domine a Sintaxe para Codificar Mais Rápido
Aprenda dicas essenciais para digitar código TypeScript mais rápido. De anotações de tipo, genéricos e interfaces a tipos utilitários e padrões avançados, melhore sua velocidade e precisão de digitação em TypeScript.
TypeScript tornou-se o padrão para construir aplicações JavaScript escaláveis. Seu poderoso sistema de tipos captura erros em tempo de compilação, mas digitar código TypeScript eficientemente requer dominar seus padrões de sintaxe únicos. Este guia abrangente ajudará você a digitar TypeScript mais rápido e com menos erros.
Por Que as Habilidades de Digitação em TypeScript Importam
TypeScript adiciona anotações de tipo sobre JavaScript, o que significa mais caracteres para digitar. No entanto, os ganhos de produtividade ao detectar erros cedo superam em muito as teclas extras. Desenvolvedores que conseguem digitar TypeScript fluentemente gastam menos tempo depurando e mais tempo construindo funcionalidades.
Símbolos Essenciais do TypeScript para Dominar
Dois pontos (:)
Usado para anotações de tipo após variáveis, parâmetros e tipos de retorno.
Colchetes angulares (<>)
Essenciais para genéricos, asserções de tipo e elementos JSX.
Barra vertical (|)
Tipos de união combinando múltiplos tipos.
E comercial (&)
Tipos de interseção combinando múltiplos tipos.
Ponto de interrogação (?)
Propriedades opcionais e encadeamento opcional.
Padrões Básicos de Anotação de Tipos
Anotações de tipo são a base do TypeScript. Pratique até que se tornem automáticas:
const name: string = 'Alice';
const age: number = 30;
const isActive: boolean = true;const items: string[] = ['a', 'b', 'c'];
const numbers: Array<number> = [1, 2, 3];const user: { name: string; age: number } = {
name: 'Bob',
age: 25,
};Padrões de Tipos de Função
Funções em TypeScript requerem anotações de parâmetros e tipo de retorno:
function greet(name: string): string {
return `Hello, ${name}!`;
}const add = (a: number, b: number): number => {
return a + b;
};function fetchUser(id: number): Promise<User> {
return api.get(`/users/${id}`);
}function process(data: string, callback: (result: string) => void): void {
callback(data.toUpperCase());
}Padrões de Interface
Interfaces definem a forma dos objetos e são fundamentais no TypeScript:
interface User {
id: number;
name: string;
email: string;
}interface Config {
readonly apiUrl: string;
timeout?: number;
retries: number;
}interface Repository<T> {
find(id: number): Promise<T>;
save(item: T): Promise<void>;
delete(id: number): Promise<boolean>;
}interface ApiResponse<T> {
data: T;
status: number;
message: string;
}Padrões de Alias de Tipo
Alias de tipo criam nomes de tipo personalizados:
type ID = string | number;type Status = 'pending' | 'active' | 'completed';type Point = {
x: number;
y: number;
};type Callback<T> = (data: T) => void;type Nullable<T> = T | null | undefined;Padrões de Genéricos
Genéricos permitem código reutilizável e type-safe:
function identity<T>(value: T): T {
return value;
}function map<T, U>(items: T[], fn: (item: T) => U): U[] {
return items.map(fn);
}class Container<T> {
constructor(private value: T) {}
getValue(): T {
return this.value;
}
}interface State<T> {
data: T;
loading: boolean;
error: Error | null;
}Tipos de União e Interseção
Combine tipos para flexibilidade:
type StringOrNumber = string | number;type Result<T> = { success: true; data: T } | { success: false; error: string };type Named = { name: string };
type Aged = { age: number };
type Person = Named & Aged;function handle(value: string | number | boolean): void {
if (typeof value === 'string') {
console.log(value.toUpperCase());
}
}Padrões de Tipos Utilitários
TypeScript fornece tipos utilitários embutidos:
type PartialUser = Partial<User>;type RequiredConfig = Required<Config>;type ReadonlyUser = Readonly<User>;type UserKeys = keyof User;type NameType = User['name'];type UserWithoutId = Omit<User, 'id'>;type UserIdAndName = Pick<User, 'id' | 'name'>;Padrões de Classe
Classes TypeScript suportam modificadores de acesso e interfaces:
class User {
constructor(
public name: string,
private age: number,
readonly id: string
) {}
}class Service implements IService {
private cache: Map<string, Data> = new Map();
async fetch(id: string): Promise<Data> {
return this.cache.get(id) ?? await this.load(id);
}
}abstract class BaseRepository<T> {
abstract find(id: number): Promise<T>;
abstract save(item: T): Promise<void>;
}Padrões de Type Guard
Type guards estreitam tipos em tempo de execução:
function isString(value: unknown): value is string {
return typeof value === 'string';
}function isUser(obj: unknown): obj is User {
return typeof obj === 'object' && obj !== null && 'name' in obj;
}if (value instanceof Date) {
console.log(value.toISOString());
}Padrões Assíncronos
Tipando corretamente código assíncrono:
async function fetchData(): Promise<Data[]> {
const response = await fetch(url);
return response.json();
}const getData = async (): Promise<Result<User>> => {
try {
const user = await api.getUser();
return { success: true, data: user };
} catch (error) {
return { success: false, error: String(error) };
}
};Padrões React com TypeScript
Padrões comuns para aplicações React:
interface Props {
title: string;
onClick: () => void;
children?: React.ReactNode;
}const Button: React.FC<Props> = ({ title, onClick }) => {
return <button onClick={onClick}>{title}</button>;
};const [count, setCount] = useState<number>(0);
const [user, setUser] = useState<User | null>(null);const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setValue(e.target.value);
};Padrões de Módulos e Importação
Organizando código TypeScript:
import type { User, Config } from './types';
import { fetchUser, saveUser } from './api';export interface ApiResponse<T> {
data: T;
status: number;
}export type { User, Config };
export { UserService, ConfigService };Dicas de Prática para TypeScript
Foque nos colchetes angulares <> - eles aparecem constantemente em genéricos
Pratique a colocação dos dois pontos : após o nome da variável e antes do tipo
Domine a barra vertical | para tipos de união e o e comercial & para interseções
Familiarize-se com a palavra-chave extends para restrições de genéricos
Pratique keyof, typeof e tipos de acesso indexado
Put these tips into practice!
Use DevType to type real code and improve your typing skills.
Start Practicing