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 five learning guides fit together
This site has five structured learning guides. 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.
| Axis | Clean Code (this guide) | TypeScript Guide | JavaScript Guide | Introduction to React | Tailwind CSS Guide |
|---|---|---|---|---|---|
| Focus | Design standards | Language spec | Language spec (JS) | Framework | CSS styling |
| Level | Intermediate and up | Beginner to intermediate | Beginner | Beginner to intermediate | Beginner to intermediate |
| Prerequisite | Any language | JS basics | None | TS + JS | HTML/CSS basics |
| Example | "Replace any with unknown + type guards" | "How to use mapped types" | "Arrow functions and this behavior" | "The dependency array of useEffect" | "Adding colors with @theme" |
The five guides are complementary. Build your language foundation with the JavaScript Guide, then learn the language spec with the TypeScript Guide. On top of that, assemble your UI with Introduction to React, polish your styling with the Tailwind CSS Guide, and raise your code quality with this guide. That is the intended learning path.