Consigli di Digitazione TypeScript: Padroneggia la Sintassi per Codificare Più Velocemente
Impara i consigli essenziali per digitare codice TypeScript più velocemente. Dalle annotazioni di tipo, generics e interfacce ai tipi di utilità e pattern avanzati, migliora la velocità e precisione di digitazione in TypeScript.
TypeScript è diventato lo standard per costruire applicazioni JavaScript scalabili. Il suo potente sistema di tipi cattura gli errori al momento della compilazione, ma digitare codice TypeScript in modo efficiente richiede la padronanza dei suoi pattern di sintassi unici. Questa guida completa ti aiuterà a digitare TypeScript più velocemente e con meno errori.
Perché le Competenze di Digitazione TypeScript Contano
TypeScript aggiunge annotazioni di tipo sopra JavaScript, il che significa più caratteri da digitare. Tuttavia, i guadagni di produttività nel rilevare errori in anticipo superano di gran lunga le digitazioni extra. Gli sviluppatori che possono digitare TypeScript fluentemente passano meno tempo a fare debug e più tempo a costruire funzionalità.
Simboli TypeScript Essenziali da Padroneggiare
Due punti (:)
Usato per annotazioni di tipo dopo variabili, parametri e tipi di ritorno.
Parentesi angolari (<>)
Essenziali per generics, type assertion ed elementi JSX.
Barra verticale (|)
Tipi union che combinano più tipi.
E commerciale (&)
Tipi intersection che combinano più tipi.
Punto interrogativo (?)
Proprietà opzionali e optional chaining.
Pattern Base di Annotazione dei Tipi
Le annotazioni di tipo sono la base di TypeScript. Pratica finché non diventano automatiche:
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,
};Pattern dei Tipi di Funzione
Le funzioni in TypeScript richiedono annotazioni di parametri e tipo di ritorno:
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());
}Pattern delle Interfacce
Le interfacce definiscono la forma degli oggetti e sono fondamentali in 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;
}Pattern degli Alias di Tipo
Gli alias di tipo creano nomi di tipo personalizzati:
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;Pattern dei Generics
I generics permettono codice riutilizzabile 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;
}Tipi Union e Intersection
Combina i tipi per flessibilità:
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());
}
}Pattern dei Tipi di Utilità
TypeScript fornisce tipi di utilità incorporati:
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'>;Pattern delle Classi
Le classi TypeScript supportano modificatori di accesso e interfacce:
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>;
}Pattern dei Type Guard
I type guard restringono i tipi a runtime:
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());
}Pattern Asincroni
Tipizzare correttamente il codice asincrono:
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) };
}
};Pattern React con TypeScript
Pattern comuni per applicazioni 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);
};Pattern di Moduli e Import
Organizzare il codice 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 };Consigli di Pratica per TypeScript
Concentrati sulle parentesi angolari <> - appaiono costantemente nei generics
Pratica il posizionamento dei due punti : dopo il nome della variabile e prima del tipo
Padroneggia la barra verticale | per i tipi union e la e commerciale & per le intersection
Familiarizza con la parola chiave extends per i vincoli generics
Pratica keyof, typeof e i tipi di accesso indicizzato
Put these tips into practice!
Use DevType to type real code and improve your typing skills.
Start Practicing