Introduction
About this guide
This guide provides practical knowledge for writing clean, maintainable code in TypeScript. It is not just a collection of rules: it is structured so you can understand step by step why each rule matters and how to apply it.
What is clean code
Clean code is code with the following characteristics:
- Easy to read (the intent is clear)
- Easy to understand (complexity is minimal)
- Easy to change (high maintainability)
- Easy to test (loosely coupled, highly cohesive)
- Fewer bugs (predictable behavior)
Why write clean code in TypeScript
TypeScript is a statically typed superset of JavaScript. The type system helps reduce bugs, but it cannot reach its full potential without good code design.
A perspective: documenting your standards
This guide is a concrete set of standards for "writing cleanly in TypeScript," but if you are interested in the idea of documenting standards and building them into your workflow, also take a look at the blog post Introduction to Harness Engineering. It lays out a perspective on bundling rules / hooks / lint as a harness in the age of AI agents.
How the learning guides fit together
Here is how this site's structured learning guides fit together. This guide focuses on best practices for design standards; it is a reference for people who can already write code and want to improve its quality.
| Guide | Focus | Level | Prerequisite | Example |
|---|---|---|---|---|
| JavaScript Guide | Language spec (JS) | Beginner | None | "Arrow functions and this behavior" |
| TypeScript Guide | Language spec | Beginner to intermediate | JS basics | "How to use mapped types" |
| Introduction to React | Framework | Beginner to intermediate | TS + JS | "The dependency array of useEffect" |
| Tailwind CSS Guide | CSS styling | Beginner to intermediate | HTML/CSS basics | "Adding colors with @theme" |
| Introduction to Clean Code (this guide) | Design standards | Intermediate and up | Any language | "Replace any with unknown + type guards" |
| TypeScript Design Patterns | Design catalog | Intermediate and up | TS + OOP basics | "Is a function enough for Strategy?" |
The guides are complementary. Build your language foundation with the JavaScript Guide and learn the language spec with the TypeScript Guide. On top of that, assemble your UI with Introduction to React and polish your styling with the Tailwind CSS Guide. Raise your code quality with Introduction to Clean Code, then widen your design options with TypeScript Design Patterns. That is the intended learning path.