Typescript Naming

Naming

Apply the TypeScript Style Guide's naming conventions in the context of the current task.

Workflow

1. Inspect the consuming repository's conventions and configuration.
2. Let explicit repository conventions take precedence over this opinionated guidance.
3. Apply, review, or explain only the guidance relevant to the task.
4. State important tradeoffs when the appropriate name or documentation depends on context or judgment.

Boundaries

• Keep ESLint and other tooling responsible for checks they can enforce automatically.
• Do not introduce unrelated TypeScript Style Guide conventions merely because this skill is active.

Related Guidance

Type-Safe Constants With Satisfies

For detailed guidance on validating constants against existing types, use typescript-types when it is available.

Naming

Strive to keep naming conventions consistent and readable, with important context provided, because another person will maintain the code you have written.

Named Export

<Rule prefix="Named exports must be used to ensure that all imports follow a uniform pattern" href="https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-default-export.md"

{export default [ { rules: { 'import/no-default-export': 'error' }, }, // In case of exceptions disable the rule { files: ['src/pages/**/*'], rules: { 'import/no-default-export': 'off' }, }, ]; }

This keeps variable and function names consistent across the entire codebase. Named exports have the benefit of erroring when import statements try to import something that hasn't been declared.

Naming Conventions

While it's often hard to find the best name, aim to optimize code for consistency and future readers by following these conventions:

Variables {#variables-1}

• Locals
  Camel case
  products, productsFiltered

• Booleans
  Prefixed with is, has etc.
  isDisabled, hasProduct

• Constants
  Capitalized

  const FEATURED_PRODUCT_ID = '8f47d2a1-b13e-4d5a-a7d8-6ef1234';
  

• Object & Array Constants

  Singular, capitalized with const assertion.

  const IDLE_ORDER = {
    pending: 'idle',
    fulfilled: true,
    error: 'Shipping Error',
  } as const;
  
  const DASHBOARD_ACCESS_ROLES = ['admin', 'editor', 'moderator'] as const;
  

  If a type exists, use Type-Safe Constants With Satisfies.

  // Type OrderStatus is predefined (e.g. generated from database schema, API)
  type OrderStatus = {
    pending: 'pending' | 'idle';
    fulfilled: boolean;
    error: string;
  };
  
  const IDLE_ORDER = {
    pending: 'idle',
    fulfilled: true,
    error: 'Shipping Error',
  } as const satisfies OrderStatus;
  
  // Type UserRole is predefined
  type UserRole = 'admin' | 'editor' | 'moderator' | 'viewer' | 'guest';
  
  const DASHBOARD_ACCESS_ROLES = ['admin', 'editor', 'moderator'] as const satisfies ReadonlyArray<UserRole>;
  

Functions {#functions-1}

Camel case
filterProductsByType, formatCurrency

Types {#types-1}

Pascal case
OrderStatus, ProductItem

Generics

A generic type parameter must start with the capital letter T followed by a descriptive name TRequest, TFooBar.

Key reasons and benefits:

• Complex types often involve generics, for which clear naming improves readability and maintainability.
• Single-letter generics like T, K, and U are disallowed. The more parameters we introduce, the easier it is to mistake them.
• Prefixing with T makes it immediately obvious that it's a generic type parameter, not a regular type.
• A common scenario is when a generic parameter shadows an existing type because it has the same name, e.g. <Request extends Request>.

// ❌ Avoid naming generic parameters with one letter
const createPair = <T, K extends string>(first: T, second: K): [T, K] => {
  return [first, second];
};
const pair = createPair(1, 'a');

// ✅ Use descriptive names starting with capital T
const createPair = <TFirst, TSecond extends string>(first: TFirst, second: TSecond): [TFirst, TSecond] => {
  return [first, second];
};
const pair = createPair(1, 'a');

// ❌ Avoid naming generic parameters without a prefix - which 'Request' is which?
const handle = <Request extends Request>(req: Request): void => {...

// ✅ Prefix generic parameter with capital T
const handle = <TRequest extends Request>(req: TRequest): void => {...

Abbreviations & Acronyms

Treat acronyms as whole words, with capitalized first letter only.

// ❌ Avoid
const FAQList = ['qa-1', 'qa-2'];
const generateUserURL(params) => {...}

// ✅ Use
const FaqList = ['qa-1', 'qa-2'];
const generateUserUrl(params) => {...}

For readability, strive to avoid abbreviations, unless they are widely accepted and necessary.

// ❌ Avoid
const GetWin(params) => {...}

// ✅ Use
const GetWindow(params) => {...}

React Components

Pascal case
ProductItem, ProductsPage

Prop Types

React component name followed by the "Props" suffix
[ComponentName]Props - ProductItemProps, ProductsPageProps

Callback Props

Event handler (callback) props are prefixed with on* - e.g. onClick.
Event handler implementation functions are prefixed with handle* - e.g. handleClick.

{'react/jsx-handler-names': [ 'error', { eventHandlerPrefix: 'handle', eventHandlerPropPrefix: 'on', }, ]}

// ❌ Avoid inconsistent callback prop naming
<Button click={actionClick} />
<MyComponent userSelectedOccurred={triggerUser} />

// ✅ Use prop prefix 'on*' and handler prefix 'handle*'
<Button />
<MyComponent />

React Hooks

<Rule prefix="Camel case, prefixed as 'use'" href="https://github.com/facebook/react/tree/main/packages/eslint-plugin-react-hooks"

{'react-hooks/rules-of-hooks': 'error'} <Rule prefix="Symmetrical convention: [value, setValue] = useState()" href="https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/hook-use-state.md#rule-details" {'react/hook-use-state': 'error'}

// ❌ Avoid inconsistent useState hook naming
const [userName, setUser] = useState();
const [color, updateColor] = useState();
const [isActive, setActive] = useState();

// ✅ Use
const [name, setName] = useState();
const [color, setColor] = useState();
const [isActive, setIsActive] = useState();

A custom hook must always return an object.

// ❌ Avoid
const [products, errors] = useGetProducts();
const [fontSizes] = useTheme();

// ✅ Use
const { products, errors } = useGetProducts();
const { fontSizes } = useTheme();

Comments

Comments can quickly become outdated, leading to confusion rather than clarity.

Favor expressive code over comments by using meaningful names and clear logic. Comments should primarily explain "why," not "what" or "how."

Use comments when:

• The context or reasoning isn't obvious from the code alone (e.g. config files, workarounds)
• Referencing related issues, PRs, or planned improvements

// ❌ Avoid
// convert to minutes
const m = s * 60;
// avg users per minute
const myAvg = u / m;

// ✅ Use - Prefer expressive code by naming things what they are
const SECONDS_IN_MINUTE = 60;
const minutes = seconds * SECONDS_IN_MINUTE;
const averageUsersPerMinute = noOfUsers / minutes;

// ✅ Use - Reference planned improvements
// TODO: Move filtering to the backend once API v2 is released.
// Issue/PR - https://github.com/foo/repo/pulls/55124
const filteredUsers = frontendFiltering(selectedUsers);

// ✅ Use - Add context to explain why
// Use Fourier transformation to minimize information loss - https://github.com/dntj/jsfft#usage
const frequencies = signal.FFT();

TSDoc Comments

TSDoc standardizes TypeScript documentation comments so editors and documentation tools can interpret them consistently. This improves developer experience and supports generated API documentation.

Use TSDoc comments when documenting APIs, libraries, configurations, or reusable code.

/**
 * Configuration options for the Web3 SDK.
 */
export type Web3Config = {
  /** Ethereum network chain ID. */
  chainId: number;

  /**
   * Gas price strategy for transactions:
   * - `fast`: Higher fees, faster confirmation
   * - `standard`: Balanced
   * - `slow`: Lower fees, slower confirmation
   */
  gasPriceStrategy: 'fast' | 'standard' | 'slow';

  /** Maximum gas limit per transaction. */
  maxGasLimit?: number;

  /** Enables event listening for smart contract interactions. */
  enableEventListener?: boolean;
};