Command Palette

Search for a command to run...

Hectal
Phase 15Intermediate16 of 18 in TypeScript

TypeScript in Real Projects

Vite, Next.js and Node, linting with typescript-eslint, tests and type tests, migrating a JavaScript codebase, sharing types with a back end, and monorepos.

Until now you wrote TypeScript in a single file. A real project has hundreds of files, a build tool, a linter, tests, a server and often several packages that share code. This phase shows how TypeScript fits into each of those, and which tool does which job.

The tools in this phase (Vite, Next.js, ESLint, Vitest, npm workspaces) can't run inside a single-file browser editor. So every topic has two kinds of examples: live ones that run the TypeScript idea behind the tool in one file, and terminal blocks with real output. Every terminal block was produced by running the tool on a small scratch project, with the versions named in the text. Versions move quickly: check them with npm view <package> version before you copy a command.

The thread through the phase is one rule: TypeScript checks, other tools build, lint and test, and each of them has to be told about TypeScript. Once you see which tool is responsible for what, a broken setup stops being mysterious.

0/6 · 0%
6 topics ~3 h 23 code blocks & diagrams
Start with the first topic
1
15.1

TypeScript with Vite, Next.js and Node

A build tool turns your files into something a browser can run, and it usually does not check types. Type checking (tsc --noEmit) is a separate job that you must run yourself, and each framework wires it up in its own way.

31 min 1 diagram 4 code practice

2
15.2

Linting with typescript-eslint

A linter reads your code for risky habits that the compiler allows. typescript-eslint can ask the type checker what each value really is, so it catches forgotten promises and leaked any values that tsc stays silent about.

23 min 4 code practice

3
15.3

Testing TypeScript Code

Tests run your code and compare results; type tests ask the compiler whether a type is exactly what you meant. TypeScript lets you test both, and keeps your mocks honest so they cannot drift away from the real thing.

25 min 3 code practice

4
15.4

Migrating a JavaScript Codebase

You don't rewrite a JavaScript project in one go. You let TypeScript read the JavaScript, rename files one at a time, and turn the strict checks on one by one, so the project keeps working and the error count only goes down.

25 min 4 code practice

5
15.5

Sharing Types Across Front End and Back End

The front end and the back end must agree on what a request and a response look like. You can share one written contract, generate types from an OpenAPI or GraphQL schema, or derive client types from server code, and you must still check data at the boundary because types vanish at runtime.

28 min 3 code practice

6
15.6

TypeScript in Monorepos

A monorepo holds several packages in one repository. TypeScript needs to know which package depends on which, build them in order, and read each package's .d.ts files, which is what workspaces, project references and package.json exports provide.

25 min 4 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Read a port from the environment

Environment variables are text or missing. Write readPort(env: Env): number that reads env["PORT"], throws an Error if it is missing, throws if it is not a whole number, and otherwise returns the number.

Beginner
2

Typed routes

Write a type Route for a shop: the pages /, /cart and /checkout, and any product page /products/<something>. Then goTo(route: Route) that logs going to <route>.

Beginner
3

Make the type tests pass

The file has Equal, Expect and three type tests for a helper type IsString<T>. The helper is a stub that always says false, so two tests fail.

Intermediate
4

A client typed by the contract

A Contract lists two routes with their request and response types, and handlers implements them. Write call<R extends Route>(route: R, request: Contract[R]["request"]) that returns Contract[R]["response"] by running the matching handler.

Intermediate
5

Validate data at the boundary

JSON.parse gives any. Write parseUser(text: string): User | undefined that returns the user only if the data really is an object with a string name and a number age, without any as User cast and without any.

Intermediate
6

Migrate a file from JavaScript

This file was renamed from .js to .ts and now has implicit-any errors under the default strict options. Add real types to every parameter and return value, without using any.

Intermediate