DOCSEARCHbyAlgolia
Submit Docs

TypeScript Book

website·Indexed 34 days ago

https://typescriptbook.jp/

A comprehensive guide to TypeScript and JavaScript, featuring detailed reference material on classes, generics, intersection types, and control flow analysis. The documentation includes practical tutorials for building applications with React and Next.js, automating code formatting with Prettier, and deploying to Vercel, as well as testing with Vitest.

Tokens
137.2K
Snippets
871
Records
1.1K
Agent score
68%

What's inside TypeScript Book

  1. Overview of TypeScript Project References

    Project References (introduced in TypeScript 3.0) allow developers to split a large TypeScript codebase into smaller, logically separated projects with explicit dependencies. This prevents the need for a single monolithic project, enabling independent builds and faster type-checking. Key benefits include significantly reduced build times, improved memory efficiency in editors, and better logical separation of components (e.g., separating UI, Logic, API, and Database layers).

  2. Overview of Survival TypeScript learning path

    Survival TypeScript is designed to get developers productive in professional environments quickly. Instead of being a comprehensive reference, it focuses on the most frequently used features necessary for 'survival' in a real-world codebase. The learning path includes:

    • TypeScript Fundamentals: Overview of the language, its philosophy, and its relationship with JavaScript.
    • Practical Application: A workshop-style approach building applications using TypeScript alongside React, Next.js, Vitest, Prettier, ESLint, and Vercel.
    • Language Features: Detailed explanations of essential TypeScript and JavaScript features used in daily development.
    • Coding Tips: Common techniques and patterns for JavaScript and TypeScript.

  3. Overview of TypeScript access modifiers

    TypeScript provides access modifiers to control the visibility of class members (fields, constructors, and methods). If no modifier is specified, the member defaults to public.

    ModifierDescription
    (none)Equivalent to public
    publicAccessible from anywhere
    protectedAccessible only within the class and its subclasses
    privateAccessible only within the class itself

  4. Understand the TypeScript never type

    The never type represents values that will never occur. It is a special type used to indicate that a value cannot exist, such as the return type of a function that always throws an error or one that contains an infinite loop. Additionally, an intersection of two incompatible types (e.g., number & string) results in never because no value can satisfy both.
    // Function that always throws
function throwError(): never {
  throw new Error();
}

// Function with an infinite loop
function forever(): never {
  while (true) {}
}

// Intersection of incompatible types
type NumberString = number & string; // Result is never

  5. Choose a Node.js package manager

    Package managers automate the installation, updating, and removal of dependencies. While multiple tools can use the same packages, it is critical to unify the choice of manager within a development team to avoid consistency issues. Common options include:

    • npm: The most widely used manager, bundled with Node.js.
    • pnpm: Focused on disk space efficiency and strict dependency management.
    • Bun: Optimized for high speed.
    • Yarn: Another popular alternative for dependency management.

  6. Understand the role of JavaScript engines in browsers

    Browsers use a JavaScript engine to implement the ECMAScript specification. Common engines include V8, SpiderMonkey, and JavaScriptCore. These engines are embedded within a larger Rendering Engine (such as Blink, Gecko, or WebKit) which handles HTML/CSS parsing and screen rendering. For example, the Blink rendering engine utilizes the V8 JavaScript engine.

  7. Understand and mitigate supply chain attacks in npm packages

    Supply chain attacks target the software delivery pipeline by injecting malicious code into packages. Common attack vectors include:

    • Typosquatting: Attackers register packages with names similar to popular ones (e.g., exprss instead of express) to trick developers into installing them via typos.
    • Dependency Confusion: Attackers publish a public package with the same name as an organization's internal private package, tricking the package manager into installing the public malicious version.
    • Maintainer Account Compromise: Attackers gain access to a legitimate maintainer's account (e.g., via phishing) to push malicious updates to a trusted package.
    • Slopsquatting: A modern variant where attackers register fake packages that AI coding assistants are likely to 'hallucinate' and recommend to developers.

  8. TypeScript introduction for JavaScript developers

    For developers already experienced with JavaScript, 'TypeScript for JavaScript Programmers' is the most efficient starting point. It quickly covers core TypeScript concepts including:

    • Type Inference
    • Type Definitions
    • Type Composition (Union Types and Generics)
    • Structural Type System

  9. Understand React's core architectural features

    React is a package developed by Facebook for building interactive web application UIs. It simplifies the management of complex UI states through three primary features:

    1. Virtual DOM: A proxy for the real DOM that optimizes rendering performance and reduces bugs associated with manual DOM manipulation. Developers manipulate the Virtual DOM, and React handles the updates to the real DOM.
    2. Declarative UI: Instead of writing imperative code (step-by-step instructions on how to change the UI), React allows developers to describe what the UI should look like. This separates the desired end state from the underlying implementation details.
    3. Component-Based Architecture: UI is broken down into reusable pieces called components (e.g., buttons, inputs, forms). Small components are composed to build larger applications, improving development efficiency and code reuse.

  10. Use the satisfies operator to validate types while preserving inference

    The satisfies operator validates that a value matches a specific type but, unlike a type annotation, it does not 'widen' the type to that annotation. This allows the developer to ensure type safety while keeping the most specific inferred type of the value, which is useful for accessing properties that might be optional or union-based in the general type but are concrete in the specific instance.
    type Config = { textSize: "small" | "medium" | "large" | number };

// Validates that the object matches Config, but preserves the specific value 10
const config = { textSize: 10 } satisfies Config;

// Because the type is inferred as { textSize: 10 } rather than Config,
// arithmetic operations on textSize are permitted.
const configForMobile = {
  textSize: config.textSize * 1.1,
};

  11. Use numeric literals in TypeScript

    TypeScript uses the number type to represent both integers and floating-point values. There is no separate type for integers (like int) or floats (like double).
    const integer = 123;
const negativeInteger = -123;
const float = 20.315;
const shorthandFloat = .1; // Equivalent to 0.1

  12. Understand the unknown type in TypeScript

    The unknown type is used when the type of a value is not known beforehand. Any value can be assigned to a variable of type unknown. However, unlike any, you cannot assign a value of type unknown to a variable of a more specific type (e.g., number or string), nor can you access properties or call methods on an unknown value without first narrowing its type.
    let value: unknown;
value = 1; // OK
value = "string"; // OK
value = { name: "object" }; // OK

// The following will cause errors:
// const int: number = value; // Error: Type 'unknown' is not assignable to type 'number'.
// value.toFixed(); // Error: 'value' is of type 'unknown'.