How to use TypeScript in Replit

The easiest way to use TypeScript on Replit is to create a new App and select the TypeScript or Node.js (TypeScript) template. This gives you a pre-configured project with TypeScript, tsconfig.json, and the correct .replit run command. If you already have a JavaScript project, you can add TypeScript by installing it via the Shell. The npm package includes the TypeScript compiler (tsc) and type definitions.

1# Add TypeScript to an existing JavaScript project
2npm install --save-dev typescript @types/node
3
4# Initialize a tsconfig.json with sensible defaults
5npx tsc --init
6
7# Verify installation
8npx tsc --version

The tsconfig.json file controls how TypeScript compiles your code. The default generated by tsc --init is very strict, which is good for catching errors but can be overwhelming for beginners. Adjust the settings to match your project's needs. Key settings include target (which JavaScript version to compile to), module (module system), outDir (where compiled files go), and strict (enable all strict type checks). For Replit projects using Vite or similar bundlers, the bundler handles compilation and you mainly use tsconfig.json for editor type checking.

1{
2  "compilerOptions": {
3    "target": "ES2020",
4    "module": "ESNext",
5    "moduleResolution": "bundler",
6    "strict": true,
7    "esModuleInterop": true,
8    "skipLibCheck": true,
9    "forceConsistentCasingInFileNames": true,
10    "outDir": "./dist",
11    "rootDir": "./src",
12    "resolveJsonModule": true,
13    "declaration": true
14  },
15  "include": ["src/**/*"],
16  "exclude": ["node_modules", "dist"]
17}

Start converting your JavaScript files to TypeScript by renaming them from .js to .ts (or .jsx to .tsx for React components). TypeScript is a superset of JavaScript, so all valid JavaScript is valid TypeScript. After renaming, the compiler may flag existing issues — that is the point. Add type annotations to function parameters, return types, and variables where TypeScript cannot infer the type automatically. Start with the strictest files (utility functions, data models) and work outward.

1// Before: JavaScript (utils.js)
2function calculateTotal(items) {
3  return items.reduce((sum, item) => sum + item.price * item.quantity, 0);
4}
5
6// After: TypeScript (utils.ts)
7interface CartItem {
8  name: string;
9  price: number;
10  quantity: number;
11}
12
13function calculateTotal(items: CartItem[]): number {
14  return items.reduce((sum, item) => sum + item.price * item.quantity, 0);
15}
16
17// Now TypeScript catches this error at compile time:
18// calculateTotal([{ name: "Widget", price: "10" }]);
19// Error: Type 'string' is not assignable to type 'number'

There are two main ways to run TypeScript in Replit. For simple scripts, use ts-node or tsx which compile and run in one step. For production apps, compile with tsc first, then run the JavaScript output with Node.js. If you are using a framework like Vite or Next.js, the framework handles TypeScript compilation automatically — you just write .ts/.tsx files and the build tool takes care of the rest. Update your .replit file's run command to match your approach.

1# Option 1: Run TypeScript directly with tsx (recommended for development)
2npm install --save-dev tsx
3# In .replit: run = "npx tsx src/index.ts"
4
5# Option 2: Compile first, then run JavaScript
6npx tsc
7node dist/index.js
8# In .replit: run = "npx tsc && node dist/index.js"
9
10# Option 3: For Vite/React projects (handled automatically)
11# In .replit: run = "npm run dev"

Many popular npm packages do not include TypeScript types by default. Install type definitions from the DefinitelyTyped repository using @types/ packages. For example, Express needs @types/express, and React needs @types/react. Without these, TypeScript treats the package as type 'any', which disables type checking for that package's API. Most modern packages include types bundled in the main package (look for a 'types' or 'typings' field in their package.json).

1# Install type definitions for common packages
2npm install --save-dev @types/node @types/express @types/react @types/react-dom
3
4# Check if a package includes its own types
5npm info axios types  # axios includes types, no @types/ needed
6
7# Some packages export types directly
8import type { Request, Response } from 'express';

Configure your .replit file so the Run button compiles and runs TypeScript correctly. Set the entrypoint to your main .ts file and update the run command. For deployment, add a build step that compiles TypeScript to JavaScript so the deployed app runs pure JavaScript without needing the TypeScript compiler at runtime.

1# .replit configuration for TypeScript
2entrypoint = "src/index.ts"
3run = "npx tsx src/index.ts"
4
5[deployment]
6build = "npx tsc"
7run = "node dist/index.js"
8
9[nix]
10channel = "stable-24_05"
11packages = ["nodejs_20"]