Conseils de Frappe TypeScript: Maîtrisez la Syntaxe pour Coder Plus Vite
Apprenez les conseils essentiels pour taper du code TypeScript plus rapidement. Des annotations de type, génériques et interfaces aux types utilitaires et modèles avancés, améliorez votre vitesse et précision de frappe TypeScript.
TypeScript est devenu le standard pour construire des applications JavaScript évolutives. Son puissant système de types détecte les erreurs à la compilation, mais taper du code TypeScript efficacement nécessite de maîtriser ses modèles de syntaxe uniques. Ce guide complet vous aidera à taper du TypeScript plus rapidement et avec moins d'erreurs.
Pourquoi les Compétences de Frappe TypeScript Comptent
TypeScript ajoute des annotations de type sur JavaScript, ce qui signifie plus de caractères à taper. Cependant, les gains de productivité en détectant les erreurs tôt dépassent largement les frappes supplémentaires. Les développeurs qui peuvent taper TypeScript couramment passent moins de temps à déboguer et plus de temps à construire des fonctionnalités.
Symboles TypeScript Essentiels à Maîtriser
Deux-points (:)
Utilisé pour les annotations de type après les variables, paramètres et types de retour.
Chevrons (<>)
Essentiels pour les génériques, assertions de type et éléments JSX.
Barre verticale (|)
Types d'union combinant plusieurs types.
Esperluette (&)
Types d'intersection combinant plusieurs types.
Point d'interrogation (?)
Propriétés optionnelles et chaînage optionnel.
Modèles de Base d'Annotation de Type
Les annotations de type sont la base de TypeScript. Pratiquez jusqu'à ce qu'elles deviennent automatiques:
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,
};Modèles de Type de Fonction
Les fonctions en TypeScript nécessitent des annotations de paramètres et de type de retour:
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());
}Modèles d'Interface
Les interfaces définissent la forme des objets et sont fondamentales 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;
}Modèles d'Alias de Type
Les alias de type créent des noms de type personnalisés:
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;Modèles de Génériques
Les génériques permettent du code réutilisable et 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;
}Types d'Union et d'Intersection
Combinez les types pour plus de flexibilité:
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());
}
}Modèles de Types Utilitaires
TypeScript fournit des types utilitaires intégrés:
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'>;Modèles de Classe
Les classes TypeScript supportent les modificateurs d'accès et les 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>;
}Modèles de Type Guard
Les type guards réduisent les types à l'exécution:
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());
}Modèles Asynchrones
Typer correctement le code asynchrone:
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) };
}
};Modèles React avec TypeScript
Modèles courants pour les applications 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);
};Modèles de Modules et Import
Organiser le code 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 };Conseils de Pratique pour TypeScript
Concentrez-vous sur les chevrons <> - ils apparaissent constamment avec les génériques
Pratiquez le placement des deux-points : après le nom de variable et avant le type
Maîtrisez la barre verticale | pour les types d'union et l'esperluette & pour les intersections
Familiarisez-vous avec le mot-clé extends pour les contraintes génériques
Pratiquez keyof, typeof et les types d'accès indexé
Put these tips into practice!
Use DevType to type real code and improve your typing skills.
Start Practicing