TypeScript Project-level Best Practices

Overview

• Structural Best Practices
• Architectural Best Practices
• Configuration Best Practices
• Tooling Best Practices

---

Structural Best Practices

• file and folder structure will likely change based on nature of project, frameworks, personal preference, etc.
• however, adhering to the LIFT principle is a good rule of thumb
  • Locatable
    • code should be easy to find
    • name files and folders to promote findability
  • Identifiable
    • should be easy to identify which files contain which code and which folder contain which files
  • Flat
    • keep folder structure as flat as possible, with only as much nesting as is required
  • T-DRY (Try to be DRY)
    • avoid duplicating files of same purpose and scope in multiple places

Architectural Best Practices

1. favor modular design

• discreet modules are easier to reuse through app
• modules should ahere to single responsibility rule

2. favor layered design
   • divide app into distinct layers, each responsible for a different thing
   • minimize dependencies between layers
   • example:
     • presentation layer (UI components, framework)
     • domain layer (entities, business logic, use-cases(?))
     • data layer (storing/retrieving data)
     • repository (bridge between domain/data layers)

• dependency rule (dependencies should always point inwards and only be one level deep)

3. Domain Driven Development (DDD)

Configuration Best Practices

• TypeScript apps configured using one or more tsconfig.json (including namespaced files like tsconfig.dev.json, tsconfig.prod.json, etc.)
• starting project with maximum strictness/cleanliness options enabled gives solid and safe foundation
• strict mode is umbrella for
  • alwaysStrict
  • strictNullChecks
  • strictBindCallApply
  • strictFunctionTypes
  • strictPropertyInitialization
  • noImplicitAny
  • noImplicitThis
  • useUnknownInCatchVariables
• additional type-checking options
  • noImplicitOverride
  • noImplicitReturns
  • noPropertyAccessFromIndexSignature
  • noUncheckedIndexedAccess
  • noFallThroughCasesInSwitch
  • noUnusedLocals
  • noUnusedParameters
  • exactOptionalPropertyTypes
• disable allowUnreachableCode setting
• enable noEmitOnError setting
• always configure outDir setting
  • by default, tsc command emits compiled files next to original source files

Watching Files and Directories

• 2 primary settings in tsconfig
  • watchFile
  • watchDirectory
• watch options:
  • Priority Polling Interval
  • Dynamic Priority Polling
  • File System Events (FS Events)
  • FS Events on Parent Directory
  • FS Events with Dynamic Priority Polling
• can also use environment variables
  • TSC_WATCHFILE
  • TSC_WATCHDIRECTORY

Tooling Best Practices

• linter (typescript-eslint)
• formatter (prettier)
• automate linting/formatting tasks
  • editor integration
  • git hooks (husky)