2 Using modern JavaScript tools
Modern JavaScript development is shaped by tools that add guardrails the language itself historically lacked. The chapter opens by contrasting JavaScript’s early reputation as an unreliable “toy” language with its current status as a robust platform, emphasizing that the biggest change has been not just the language’s evolution, but the ecosystem of tools around it. TypeScript brings compile-time type checking and better editor support, ESLint catches mistakes and enforces project-specific rules, and Prettier removes style debates by formatting code automatically.
TypeScript is presented as a practical layer on top of JavaScript rather than a replacement for it. The chapter shows how type checking catches errors like swapped function arguments, explains the difference between dynamic and static typing, and demonstrates how annotations and reusable type declarations help the checker reason about code. It also introduces type narrowing, union types, predicates, and escape hatches like as, while noting limitations where developers may need to guide the checker. The setup examples reinforce that TypeScript can be used both as a compiler and, increasingly, as a direct execution format in modern runtimes, though runtime type stripping does not replace proper type checking.
ESLint and Prettier extend this safety and consistency by tackling broader code quality and formatting concerns. ESLint is shown as a configurable static analysis tool that can prevent bugs, flag unnecessary conditions, and enforce style decisions such as avoiding shadowed variables or discouraging non-null assertions unless justified. Prettier, by contrast, is framed as a low-friction formatter with minimal configuration that standardizes code appearance and ends format disputes. The chapter closes by showing how Husky can automate formatting and checks on commit, while warning that heavy pre-commit workflows can slow contributors and are often better split between lightweight local automation and CI-based validation.
Summary
- Modern JavaScript tools have transformed the experience of writing JavaScript by detecting potential bugs, providing useful annotations in editors like VS Code, and automatically formatting your code.
- TypeScript adds types to JavaScript, allowing many of the most common coding mistakes to be caught early.
- ESLint lets you enforce a wide range of customizable coding rules in your project, ranging from error-catchers to stylistic standards.
- The typescript-eslint plugin provides TypeScript’s type information to ESLint, opening up many more possible rules at the expense of linting speed.
- Prettier automates code formatting, neatly breaking up long lines and applying consistent indentation levels.
- Husky can run tools like TypeScript, ESLint, and Prettier automatically on every commit.
FAQ
What are the three major modern tools highlighted in this chapter?
TypeScript, ESLint, and Prettier are the three tools emphasized in this chapter. TypeScript adds compile-time type checking, ESLint enforces code rules and catches mistakes, and Prettier automatically formats code to keep style consistent.Why did modern JavaScript tooling become so important?
JavaScript originally lacked many of the guardrails found in statically typed languages, so many bugs were only discovered at runtime. Modern tools add static analysis, type checking, linting, and formatting, which makes code more reliable, readable, and easier to maintain.What is TypeScript, and how is it related to JavaScript?
TypeScript is a superset of JavaScript. That means all valid JavaScript is also valid TypeScript, but TypeScript adds types that can be checked at compile time to catch errors earlier.What is the purpose of the tsconfig.json file?
tsconfig.json tells the TypeScript compiler which files to compile, which types to include, how strict type checking should be, and whether compiled JavaScript should be emitted and for which ECMAScript target.Why does TypeScript complain about implicitly inferred any types?
An implicit any means TypeScript could not determine a safe type for a value, so type checking effectively stops for that variable. In strict mode, TypeScript reports this as an error because relying on any can hide bugs.What is type narrowing in TypeScript?
Type narrowing is when TypeScript reduces a variable’s possible types based on checks in the code, such astypeof, in, or Array.isArray. This lets the compiler understand what operations are safe at a given point.Why can’t TypeScript use instanceof with interfaces?
Interfaces exist only at compile time and do not exist in the generated JavaScript. Because of that, instanceof cannot check an interface at runtime; it works with classes, not type-only declarations.
Secrets of the JavaScript Ninja, Third Edition ebook for free
