Next Friday Types

Rules for TypeScript type definitions and annotations.

React Props

Props Suffix

Interfaces in component files must end with Props.

// Bad: Card.tsx
interface Card {}

// Good: Card.tsx
interface CardProps {}

Readonly Props

Component props must be wrapped with Readonly<>.

// Bad:
const Card = (props: CardProps) => ...

// Good:
const Card = (props: Readonly<CardProps>) => ...

No Inline Types

Use interface declarations, not inline types.

// Bad:
const Card = (props: { title: string; onClick: () => void }) => ...

// Good:
interface CardProps {
  title: string;
  onClick: () => void;
}

const Card = (props: Readonly<CardProps>) => ...

Function Parameters

Named Param Types

Extract inline object types to named interfaces.

// Bad:
function processData({ id, name }: { id: string; name: string }) {}

// Good:
interface ProcessDataParams {
  id: string;
  name: string;
}

function processData(params: ProcessDataParams) {}

Destructuring Params

Use object destructuring for multiple parameters.

// Bad:
function createItem(id: string, name: string, price: number, category: string) {}

// Good:
interface CreateItemParams {
  id: string;
  name: string;
  price: number;
  category: string;
}

function createItem(params: CreateItemParams) {}

Return Types

Explicit Return Types

Always specify return types on functions.

// Bad:
function formatValue(value: number) {
  return value.toFixed(2);
}

// Good:
function formatValue(value: number): string {
  return value.toFixed(2);
}

Quick Reference