أفضل ممارسات TypeScript: أمان الأنواع وجودة الكود

لماذا استخدام TypeScript؟

TypeScript هو superconjunto de JavaScript. todo código JavaScript es código TypeScript válido. يضيف static type checking.

Type safety: detecta errores de tipo en tiempo de compilación. reduce errores de runtime (undefined is not a function).

Developer experience: las funcionalidades de autocompletado de IDE، refactoring y go-to-definition funcionan con información de tipos.

Proyectos grandes: a medida que crece la base de código، la verificación de tipos facilita el mantenimiento y el refactoring. mejora la colaboración en equipo.

أفضل ممارسات تعريف الأنواع

interface vs type: استخدم interface لـ formas de objetos. استخدم type لـ tipos union/intersection. interface puede extenderse con extends.

Avoid any: any desactiva la verificación de tipos. استخدم unknown y realice verificación de tipos: if (typeof x === 'string') { ... }.

Modo strict: establezca strict: true en tsconfig.json. esto habilita controles como noImplicitAny، strictNullChecks، strictFunctionTypes.

Inferencia de tipos: استخدم la inferencia de tipos de TypeScript en lugar de anotación de tipo explícita. const name = 'John' (inferido como string).

Tipos literales: استخدم valores específicos en lugar de string o number: type Status = 'active' | 'inactive' | 'pending'.

تقنيات الأنواع المتقدمة

Tipos genéricos: cree funciones y clases reutilizables y seguras en tipos: function identity<T>(arg: T): T { return arg; }.

Tipos condicionales: retorne diferentes tipos basados en condiciones de tipo: type IsString<T> = T extends string ? true : false.

Tipos mapeados: transforme tipos existentes: type Readonly<T> = { readonly [P in keyof T]: T[P]; }.

Tipos de utilidad: استخدم los tipos de utilidad integrados de TypeScript: Partial، Required، Pick، Omit، Record، Exclude، Extract.

Tipos de plantilla literal: cree strings seguros en tipos con manipulación de strings: type EventName = `on${Capitalize<string>}`.

TypeScript مع React

Definición de props: interface Props { name: string; age?: number; onClick: () => void; }. استخدم ? لـ props opcionales.

useState: const [count, setCount] = useState<number>(0);. la inferencia de tipos suele ser suficiente: useState(0) (inferido como number).

useRef: const inputRef = useRef<HTMLInputElement>(null);. استخدم el tipo correcto para referencias de elementos DOM.

Manejadores de eventos: استخدم tipos de eventos de React como React.ChangeEvent<HTMLInputElement>، React.FormEvent<HTMLFormElement>.

Children: استخدم React.ReactNode (general) o React.ReactElement (solo elemento). agregue prop children con PropsWithChildren.

معالجة الأخطاء والتصحيح

Aserciones de tipo: convierta tipos con la palabra clave as: const value = input as string. prefiera type guards cuando sea posible.

Type guards: realice verificación de tipo en tiempo de ejecución con typeof، instanceof، operador in y funciones de type guard personalizadas.

Non-null assertion: especifique que el valor no es null/undefined con el operador !: element!.value. use solo cuando esté seguro.

tsconfig strictNullChecks: maneje null y undefined explícitamente. use optional chaining (?.) y nullish coalescing (??).

ESLint + TypeScript: agregue reglas adicionales con el plugin @typescript-eslint. habilite reglas como no-unused-vars، no-explicit-any.

تكوين المشروع

tsconfig.json: establezca strict: true، target: 'ES2020'، module: 'ESNext'، moduleResolution: 'bundler'، esModuleInterop: true.

Path aliases: acorte las rutas de importación con baseUrl y paths: "@/*": ["src/*"]. import { Button } from '@/components/Button'.

Project references: use project references para builds incrementales en proyectos grandes. use el array references en tsconfig.json.

Monorepo: configure monorepo de TypeScript con Turborepo o Nx. cree paquetes compartidos para tipos y utilidades.

Declaration files: agregue definiciones de tipo a bibliotecas JavaScript con archivos .d.ts. use paquetes @types/*.