Consejos de Mecanografía TypeScript: Domina la Sintaxis para Codificar Más Rápido
Aprende consejos esenciales para escribir código TypeScript más rápido. Desde anotaciones de tipo, genéricos e interfaces hasta tipos de utilidad y patrones avanzados, mejora tu velocidad y precisión de mecanografía en TypeScript.
TypeScript se ha convertido en el estándar para construir aplicaciones JavaScript escalables. Su potente sistema de tipos detecta errores en tiempo de compilación, pero escribir código TypeScript eficientemente requiere dominar sus patrones de sintaxis únicos. Esta guía completa te ayudará a escribir TypeScript más rápido y con menos errores.
Por Qué Importan las Habilidades de Mecanografía en TypeScript
TypeScript añade anotaciones de tipo sobre JavaScript, lo que significa más caracteres para escribir. Sin embargo, las ganancias de productividad al detectar errores temprano superan con creces las pulsaciones adicionales. Los desarrolladores que pueden escribir TypeScript con fluidez pasan menos tiempo depurando y más tiempo construyendo funcionalidades.
Símbolos Esenciales de TypeScript para Dominar
Dos puntos (:)
Usado para anotaciones de tipo después de variables, parámetros y tipos de retorno.
Corchetes angulares (<>)
Esenciales para genéricos, aserciones de tipo y elementos JSX.
Barra vertical (|)
Tipos de unión que combinan múltiples tipos.
Ampersand (&)
Tipos de intersección que combinan múltiples tipos.
Signo de interrogación (?)
Propiedades opcionales y encadenamiento opcional.
Patrones Básicos de Anotación de Tipos
Las anotaciones de tipo son la base de TypeScript. Practica hasta que sean 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,
};Patrones de Tipos de Función
Las funciones en TypeScript requieren anotaciones de parámetros y 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());
}Patrones de Interface
Las interfaces definen la forma de los objetos y son fundamentales en 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;
}Patrones de Alias de Tipo
Los alias de tipo crean nombres 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;Patrones de Genéricos
Los genéricos permiten código reutilizable y seguro en tipos:
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ón e Intersección
Combina tipos para mayor flexibilidad:
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());
}
}Patrones de Tipos de Utilidad
TypeScript proporciona tipos de utilidad incorporados:
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'>;Patrones de Clase
Las clases de TypeScript soportan modificadores de acceso 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>;
}Patrones de Type Guard
Los type guards estrechan tipos en tiempo de ejecución:
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());
}Patrones Asíncronos
Tipando correctamente código así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) };
}
};Patrones de React con TypeScript
Patrones comunes para aplicaciones 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);
};Patrones de Módulos e Importación
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 };Consejos de Práctica para TypeScript
Enfócate en los corchetes angulares <> - aparecen constantemente en genéricos
Practica la colocación del dos puntos : después del nombre de variable y antes del tipo
Domina la barra vertical | para tipos de unión y el ampersand & para intersecciones
Familiarízate con la palabra clave extends para restricciones genéricas
Practica keyof, typeof y tipos de acceso indexado
Put these tips into practice!
Use DevType to type real code and improve your typing skills.
Start Practicing