Power Features›Core· 35 min read

Modules & tsconfig.json

Split code across files with import/export, and control the compiler with a tsconfig.json.

What you will learn

Export and import across files
Create and read a tsconfig.json
Know the most useful compiler options

Split code into modules

Real projects span many files. TypeScript uses the same import/export as modern JavaScript. Export what other files need, and import it where you use it.

math.ts exports a function and a constant

// math.ts — export functions for other files
export function add(a: number, b: number): number {
  return a + b;
}

export const PI = 3.14159;

Note: Output: (No output on its own — math.ts just defines and exports things for other files. The export keyword in front of add and PI is what makes them visible elsewhere. Another file imports them next.)

app.ts imports and uses them

// app.ts — import from math.ts
import { add, PI } from './math';

console.log(add(2, 3));
console.log(PI);

Note: Output: 5 3.14159 export makes add and PI available; import { add, PI } from './math' pulls them in. Types travel across files automatically, so add stays fully checked.

tsconfig.json — settings for the compiler

A tsconfig.json file tells tsc how to compile your whole project — no need to list files by hand. The .json ending means JSON (JavaScript Object Notation — a simple text format for settings and data, written as "key": value pairs inside curly braces). Create one instantly:

Generate a tsconfig.json

npx tsc --init    # creates tsconfig.json

Note: Output: Created a new tsconfig.json with: target: es2016 module: commonjs strict: true ... and more (commented out) tsc --init drops a fully commented tsconfig.json into your folder. Most lines are commented out so you can turn options on as you need them. Let us trim it down to the essentials.

A small, sensible tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "outDir": "dist",
    "strict": true
  }
}

Note: Output: (No console output — this is a settings file.) Now just run npx tsc with no filename: it reads tsconfig.json, compiles every .ts file, and puts the .js output in the dist folder.

The options you will actually touch

Option	What it controls
`target`	Which JavaScript version to output (e.g. ES2020)
`outDir`	Folder for the compiled .js files
`strict`	Turns on all the strong safety checks
`rootDir`	Where your source .ts files live

Tip: Keep "strict": true on. It enables the checks that make TypeScript worth using — like catching values that might be null. New projects from tsc --init turn it on by default.

The whole multi-file build, in order

Putting it together, here is how a real multi-file project goes from source to running, step by step:

Write your code across several .ts files (for example math.ts and app.ts).
In the file that owns something, export it (e.g. export function add).
In the file that needs it, import it with a ./ path (e.g. import { add } from './math').
Create a tsconfig.json once with npx tsc --init, then set outDir and keep strict on.
Compile the whole project by running npx tsc with no filename — it reads tsconfig.json and finds every file.
Find the compiled .js files in your outDir folder (e.g. dist) and run the entry file with node dist/app.js.

Watch out: Module paths to your own files start with ./ (e.g. ./math). Forgetting the ./ makes TypeScript look for an installed package instead and fail to find your file.

Q. What is the job of tsconfig.json?

Answer: tsconfig.json holds compiler options (target, outDir, strict and more) so running tsc compiles the whole project consistently.

✍️ Practice

Create a utils.ts that exports a function, then import and call it from main.ts.
Run npx tsc --init, set outDir to "dist", and compile a small project.

🏠 Homework

Set up a two-file project (one exports, one imports), add a tsconfig.json with strict mode, compile it, and note where the output landed.