Using TypeScript Effectively for Business Code with OpenAPI Code Generation

The author addresses the common misconception that TypeScript is unsuitable for business code, arguing that proper use of TypeScript greatly improves robustness and maintainability of front‑end applications.

Using a typical Form/Table page as an example, the article shows how query parameters such as page , size , and filter affect table data, and how placing these parameters in a deps object can automatically trigger data fetching via useEffect or request libraries like swr and react‑query .

Below is a concrete example of fetching a list with swr :

import useSWR from 'swr';

// swr receives generic types; axios I/O can be omitted for clarity
// Replace axios with your own request function if needed
const fetcher = ([url, params]: [url: string, params: ListParams]) => {
  return req_get
(url, params).then(res => res.data);
};

function useList(params: ListParams) {
  const { data, isLoading } = useSWR
(['/api/list', params], fetcher);
  return {
    data: data?.list,
    count: data?.count,
    isLoading,
  };
}

The only extra work compared with plain JavaScript is defining the input type ListParams and the response type ListOutput , which enables TypeScript to perform compile‑time type checking and provide IDE hints, preventing parameter mismatches and null‑reference errors.

The article also notes that many developers avoid TypeScript because they find defining complex types cumbersome, but tools like tRPC, graphql‑codegen , and especially OpenAPI can reuse server‑side type definitions on the front end.

OpenAPI (formerly Swagger) is a machine‑readable specification for describing web services. When a backend follows the OpenAPI spec, it can produce a Swagger document that can be fed into code generators to produce TypeScript type definitions automatically.

To generate types, the author uses the openapi‑typescript tool. After installing it with yarn add -D [email protected] , a script is added to package.json :

{
  "scripts": {
    "codegen": "npx openapi-typescript
--c .prettierrc.js --make-paths‑enum --output ./src/ApiInterface.ts"
  }
}

Running yarn codegen generates ApiInterface.ts , which contains path enums and schema types under the components.schemas namespace. An example of importing and re‑exporting these types is:

import { type components } from '@/ApiInterface';

export type ApiInterface = components['schemas'];

This approach eliminates manual type definitions, allowing developers to rely on generated types and receive immediate editor feedback when the backend changes. Although it is not as seamless as tRPC’s direct type sharing, it works well with projects that expose an OpenAPI contract and avoids the high migration cost of adopting tRPC.

In summary, by leveraging TypeScript together with OpenAPI‑driven code generation, front‑end developers can write business logic with strong type safety, reduce runtime bugs, and keep the codebase maintainable even when backend APIs evolve.