Skip to content

Latest commit

 

History

History
27 lines (25 loc) · 2.54 KB

typescript.md

File metadata and controls

27 lines (25 loc) · 2.54 KB

TypeScript

  1. TypeScript Compatibility
  2. TypeScript Code Convention

TypeScript Compatibility

Application is fully TypeScript compatible. JavaScript usage is supported and acceptable in edge cases. Application's source (/src) is fully TypeScript supported. Application's config (/config) is TypeScript compatible.

TypeScript Code Convention

  • for Interfaces ALWAYS use "I" prefix (e.g. Entity interface should be named IEntity);
    • for exported external library interfaces - export them with "I" prefix (e.g. import { Store as IStore } from 'redux';);
  • for Generics Type Parameters use "T" prefix with descriptive name, e.g. <TPokemon>(value: TPokemon): TPokemon;
  • AVOID using Types over Interfaces for object typing (reason: interfaces can be implemented, extended and merged);
  • custom defined types COULD be considered to move to separate [name].types.{ts|tsx}, but should be AVOIDED for Component Props and Redux Slices;
  • imported/re-exported types MUST be prefixed with type keyword to allow a non-TypeScript transpiler (Babel) to know what imports can be safely removed;
  • avoid Any type (prohibited by TSConfig);
  • declare Global variables in declarations.d.ts
  • when typing Functions it is recommended to not create separate Type/Interface for the <= 2 parameters cases (or <=2 fields of options-based single parameter);
  • using @ts-ignore is prohibited in favour of @ts-expect-error with reason comment;
  • for React component:
    • React Props Interface should follow pattern: I[ComponentName]Props;
    • use generic type React.FC(React.FunctionComponent) for function component;
    • use generic type React.Component<Props, State> for class component;
    • use React.ComponentType<Props> if some union Component type need (e.g. in HOCs);
    • use React.ReactEventHandler<HTML{input_type}Element> ONLY for generic event handler;
    • use React.{event_type}Event<HTML{input_type}Element> for specific event handler;