DOCSEARCHbyAlgolia
Submit Docs

TypeScript Website

repository·v2·Indexed 25 days ago

https://github.com/microsoft/typescript-website

Repository managing the official TypeScript documentation, the TypeScript Playground, and supporting infrastructure. Includes the @typescript/ata package for automatic type acquisition of .d.ts files, tools for creating and installing TypeScript Playground plugins, and the generation pipeline for the TSConfig Reference and playground examples.

Tokens
168.3K
Snippets
481
Records
822
Agent score
80%

What's inside microsoft-typescript-website

  1. Overview of the TypeScript Playground

    v2
    The TypeScript Playground is an online, zero-setup environment for writing and sharing TypeScript-related code. It supports .ts, .tsx, .js, .jsx, and .d.ts files. It is designed as a safe, single-document teaching tool that allows for easy sharing via URLs that remain functional over time. Developers can use it to experiment with TypeScript features and reproduce specific TypeScript environments by configuring various tsconfig.json flags.

  2. What is TypeScript Sandbox?

    v2

    The TypeScript Sandbox is an opinionated fork of monaco-typescript designed to serve as the editor component for the TypeScript Playground. It provides higher-level abstractions for building web-based editors, specifically supporting:

    • Multiple versions of TypeScript.
    • Inline code replacement on websites.
    • Extension points for Playground-like features.
    • High-level APIs for Automatic Type Acquisition (ATA) and adding .d.ts files.

    It is ideal if you want to present users with a JavaScript editor that features a typed API (in JS or TS) or if you want to work with Monaco at a higher level of abstraction than the standard library.

  3. Overview of the TypeScript Playground

    v2
    The TypeScript Playground is the JavaScript tooling that powers the official TypeScript Playground website (https://www.typescriptlang.org/play/). It is built using vanilla DOM-oriented JavaScript with minimal dependencies. It provides high-level features such as code sample support, navigation bars, compiler flag UIs, sidebar plugin infrastructure (for displaying JS/DTS, etc.), and export capabilities to external tools like Code Sandbox or the TS AST Viewer.

  5. Overview of creating types from types

    v2

    TypeScript allows you to express new types in terms of existing types or values. This capability is achieved through several mechanisms:

    • Generics: Creating types that take parameters.
    • Type Operators: Using operators like keyof and typeof to derive new types.
    • Indexed Access Types: Using the Type['key'] syntax to access specific properties of a type.
    • Conditional Types: Implementing logic that acts like if statements within the type system.
    • Mapped Types: Iterating over properties of an existing type to create a new one.
    • Template Literal Types: Using template literal strings to transform property names during mapping.

  6. Understand TypeScript module modeling

    v2

    TypeScript models JavaScript modules through a combination of theoretical principles, specific compiler configurations, and syntax rules. To master modules in TypeScript, follow this learning path:

    1. Theory: Learn the fundamentals of how TypeScript approaches modules. This is essential for choosing correct compiler options, integrating with other tools, and understanding how dependency packages are processed.
    2. Guides: Follow practical guides for real-world tasks, such as selecting the correct compilation settings for a new project.
    3. Reference: Consult the detailed syntax and configuration reference for specific implementation details.
    4. Appendices: Review deep dives into complex topics like ESM/CJS interoperability.

  9. How to write high-quality TypeScript Declaration (.d.ts) files

    v2

    TypeScript Declaration files (.d.ts) are used to provide type information for JavaScript code. This guide provides a roadmap for learning how to author, structure, and publish these files.

    Prerequisites

    Before writing declaration files, you should have a basic familiarity with TypeScript, specifically regarding types and modules. If you are new to these concepts, refer to the TypeScript Handbook.

    Common Use Cases

    • Typing an npm package with no types: If you are specifically trying to add types to an existing JavaScript npm package, you should start with the Modules .d.ts guide.
    • Using a JavaScript library: If you are a consumer looking for types for a library you are already using, refer to the Find and Install Declaration Files section.

  10. What is the Playground Worker?

    v2

    The Playground Worker is a WebWorker function used by the TypeScript Playground to wrap the TypeScript Language Service. It acts as a factory function that returns a subclass designed to bridge the TSServer to monaco language bindings.

    A key feature of this worker is its support for the // @filename: abc.ts syntax, which allows the Language Service to correctly handle virtual files and file-specific context used throughout TypeScript code.

  11. What is Twoslash?

    v2

    Twoslash is a markup format for TypeScript code designed for creating self-contained, high-fidelity code samples. It allows the TypeScript compiler to handle error messaging, identifier lookups, and rich highlighting.

    Key benefits include:

    • Enforced Accuracy: You explicitly mark expected error codes (e.g., // @errors: 2322). If the error does not occur, Twoslash throws an error.
    • Compiler-Driven Messaging: Error messages are provided directly by the TypeScript compiler, removing the need for manual "OK" or "Error" comments.
    • Code Splitting: Use the /// ---cut--- syntax to include setup code (like interfaces or complex types) for the compiler's benefit while only displaying the relevant snippet to the user.
    • Rich Features: Supports declarative symbol highlighting, multi-file imports via @filename, and transpilation previews.
    // @errors: 2339
let x: [string, number];
x = ["hello", 10];
/// ---cut---
console.log(x[0].substring(1));
console.log(x[1].substring(1));

  12. What is an Iterable and how to use the `Iterable` interface

    v2

    An object is considered iterable if it implements the Symbol.iterator property. This property is responsible for returning the list of values to iterate over.

    Built-in types that are already iterable include:

    • Array
    • Map
    • Set
    • String
    • Int32Array
    • Uint32Array

    You can use the Iterable<X> interface in TypeScript to accept any type that implements this protocol, allowing your functions to work with any collection that supports iteration.

    function toArray<X>(xs: Iterable<X>): X[] {
  return [...xs]
}