TypeScript-Website

The Website and web infrastructure for learning TypeScript

2,222

1,366

2,222

View on GitHub View on NPM

Top Related Projects

TypeScript

101,477

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

TypeScript-Handbook

4,883

Deprecated, please use the TypeScript-Website repo instead

flow

22,078

Adds static typing to JavaScript to improve developer productivity and code quality.

jsdoc

15,011

An API documentation generator for JavaScript.

Quick Overview

The microsoft/TypeScript-Website repository contains the source code for the official TypeScript website (typescriptlang.org). It includes documentation, playground, and other resources for TypeScript developers. The project aims to provide a comprehensive and user-friendly platform for learning and working with TypeScript.

Pros

Comprehensive documentation and learning resources for TypeScript
Interactive playground for experimenting with TypeScript code
Open-source project with community contributions
Regular updates and maintenance by Microsoft

Cons

Large codebase may be overwhelming for new contributors
Some parts of the documentation may become outdated as TypeScript evolves
Limited customization options for self-hosting

Getting Started

To run the TypeScript website locally:

Clone the repository:

git clone https://github.com/microsoft/TypeScript-Website.git

Install dependencies:
```
cd TypeScript-Website
yarn install
```
Start the development server:
```
yarn start
```
Open your browser and navigate to http://localhost:8000 to view the website.

For more detailed instructions and contribution guidelines, refer to the repository's README and CONTRIBUTING files.

Competitor Comparisons

TypeScript

101,477

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

Pros of TypeScript

Core TypeScript compiler and language implementation
More comprehensive codebase for TypeScript internals
Higher activity level with frequent updates and contributions

Cons of TypeScript

Larger and more complex codebase
Steeper learning curve for new contributors
Focused on language internals rather than user-facing documentation

Code Comparison

TypeScript (compiler implementation):

function createSourceFile(
  fileName: string,
  sourceText: string,
  languageVersion: ScriptTarget,
  setParentNodes = false,
  scriptKind?: ScriptKind
): SourceFile {
  // Implementation details...
}

TypeScript-Website (documentation and examples):

const createPlayground = (
  container: HTMLElement,
  config: PlaygroundConfig
) => {
  // Setup playground UI and functionality...
};

Summary

TypeScript is the core repository for the TypeScript language and compiler, offering a comprehensive codebase for language internals and development. It has higher activity and frequent updates but comes with a steeper learning curve.

TypeScript-Website focuses on user-facing documentation, examples, and the playground. It's more accessible for contributors interested in improving TypeScript's web presence and educational resources.

The code comparison illustrates the difference in focus, with TypeScript dealing with compiler internals and TypeScript-Website handling user-facing functionality like the playground.

TypeScript-Handbook

4,883

Deprecated, please use the TypeScript-Website repo instead

Pros of TypeScript-Handbook

More focused on in-depth TypeScript documentation and learning resources
Easier to contribute to for community members interested in improving TypeScript documentation
Better suited for offline reading and reference

Cons of TypeScript-Handbook

Less interactive content compared to the TypeScript-Website
May not be as visually appealing or user-friendly for beginners
Lacks integrated playground and other interactive features

Code Comparison

TypeScript-Handbook (example from basic types):

let isDone: boolean = false;
let decimal: number = 6;
let color: string = "blue";
let list: number[] = [1, 2, 3];
let x: [string, number] = ["hello", 10];

TypeScript-Website (example from playground):

// Hover over red squiggles to see error messages,
// and over variables to see their types.

let message = "Hello World";
message.toLowerCase();
message();

The TypeScript-Handbook focuses on providing detailed explanations and examples of TypeScript concepts, while the TypeScript-Website offers an interactive playground for experimenting with TypeScript code in real-time. Both repositories serve different purposes in the TypeScript ecosystem, with the Handbook being more suitable for in-depth learning and reference, and the Website offering a more interactive and visually appealing introduction to TypeScript.

flow

22,078

Adds static typing to JavaScript to improve developer productivity and code quality.

Pros of Flow

Designed for incremental adoption, allowing gradual integration into existing JavaScript projects
Faster type-checking performance, especially for large codebases
More permissive type system, which can be beneficial for certain coding patterns

Cons of Flow

Smaller community and ecosystem compared to TypeScript
Less frequent updates and maintenance
Limited IDE support and tooling integration

Code Comparison

Flow:

// @flow
function add(x: number, y: number): number {
  return x + y;
}

TypeScript:

function add(x: number, y: number): number {
  return x + y;
}

Additional Notes

TypeScript-Website is primarily focused on documentation and resources for TypeScript, while Flow is the actual type checker itself
TypeScript has broader adoption and more extensive tooling support
Flow is developed by Facebook, while TypeScript is maintained by Microsoft
Both projects aim to add static typing to JavaScript, but with different approaches and design philosophies

jsdoc

15,011

An API documentation generator for JavaScript.

Pros of JSDoc

Widely adopted and supported across various JavaScript environments
Works with plain JavaScript, no need for TypeScript compilation
Extensive documentation and community resources

Cons of JSDoc

Less powerful type checking compared to TypeScript
Requires manual maintenance of documentation comments
Limited integration with modern JavaScript frameworks

Code Comparison

JSDoc:

/**
 * @param {string} name - The name of the person
 * @param {number} age - The age of the person
 * @returns {string} A greeting message
 */
function greet(name, age) {
  return `Hello, ${name}! You are ${age} years old.`;
}

TypeScript (from TypeScript-Website):

function greet(name: string, age: number): string {
  return `Hello, ${name}! You are ${age} years old.`;
}

The TypeScript version provides built-in type checking without the need for comments, while JSDoc relies on comment-based type annotations. TypeScript offers more robust type inference and checking, but requires compilation. JSDoc works with plain JavaScript but may have less precise type information.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Getting Started

This repo uses pnpm workspaces with node 18+, and watchman. (Windows users can install watchman via chocolatey)

With those set up, clone this repo and run pnpm install.

git clone https://github.com/microsoft/TypeScript-website
cd TypeScript-website
pnpm install
code .

# Then:
pnpm bootstrap
# Optional, grab the translations:
pnpm docs-sync pull microsoft/TypeScript-Website-localizations#main 1

# Now you can start up the website
pnpm start

Working on this repo is done by running pnpm start - this starts up the website on port 8000 and creates a builder worker for every package in the repo, so if you make a change outside of the site it will compile and lint etc.

Some useful knowledge you need to know:

All packages have: pnpm build and pnpm test
All packages use debug - which means you can do env DEBUG="*" pnpm test to get verbose logs

Having issues getting set up? Consult the troubleshooting.

Deployment

Deployment is automatic:

Pushes to the branch v2 deploy to production

You can find the build logs in GitHub Actions

Docs

If you want to know in-depth how this website works, there is an hour long video covering the codebase, deployment and tooling on YouTube.. Otherwise there are some short guides:

Changesets

This repo uses pnpm + changesets to manage package version bumps and releases.

CI will fail if a PR modifies a public package but is missing a changeset. To add a changeset, run pnpm changeset, then follow along with the CLI.

$ pnpm changeset
ð¦  Which packages would you like to include? â¦ 
â¯ changed packages
  â¯ create-typescript-playground-plugin
  â¯ @typescript/vfs
  â¯ @typescript/twoslash
  â¯ @typescript/sandbox
  â¯ @typescript/ata

New files will be created in .changeset and must be committed.

PRs which don't modify public packages (e.g. website content updates) do not require changesets. If you are making a change to a published package but are not affecting published code, you can create an empty changeset for your PR with pnpm changeset --empty.

Website Packages

TypeScriptLang-Org

The main website for TypeScript, a Gatsby website which is statically deployed. You can run it via:

pnpm start

To optimize even more, the env var NO_TRANSLATIONS as truthy will make the website only load pages for English.

Sandbox

The editor aspect of the TypeScript Playground REPL, useable for all sites which want to show a monaco editor with TypeScript or JavaScript code.

Playground

The JS code has an AMD module for the playground which is loaded at runtime in the Playground website.

Doc Packages

TSConfig Reference

A set of tools and scripts for generating a comprehensive API reference for the TSConfig JSON file.

# Generate JSON from the typescript cli
pnpm run --filter=tsconfig-reference generate-json
# Jams them all into a single file
pnpm run --filter=tsconfig-reference generate-markdown

Validate the docs:

pnpm run --filter=tsconfig-reference test

# or to just run the linter without a build
pnpm run --filter=tsconfig-reference lint

# or to just one one linter for a single doc
pnpm run --filter=tsconfig-reference lint resolveJson

Documentation

The docs for TypeScript. Originally ported over from microsoft/TypeScript-Handbook then intermingled with microsoft/TypeScript-New-Handbook.

JSON Schema

It's a little odd, but the tsconfig-reference package creates the JSON schema for a TSConfig files:

pnpm run --filter=tsconfig-reference build

Then you can find it at: packages/tsconfig-reference/scripts/schema/result/schema.json.

Playground Handbook

The user-facing documentation for the Playground.

Playground Examples

The code samples used in the Playground split across many languages.

Infra Packages

Most of these packages use (a maintained fork of) tsdx.

TS Twoslash

A code sample markup extension for TypeScript. Available on npm: @typescript/twoslash

TypeScript VFS

A comprehensive way to run TypeScript projects in-memory in a browser or node environment. Available on npm: @typescript/vfs

Create Playground Plugin

A template for generating a new playground plugin which you can use via npm init playground-plugin [name]

Community Meta

Generates contribution JSON metadata on who edited handbook pages.

Playground Worker

A web worker which sits between the Playground and Monaco-TypeScript

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com.

When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

Legal Notices

Microsoft and any contributors grant you a license to the Microsoft documentation and other content in this repository under the Creative Commons Attribution 4.0 International Public License, see the LICENSE file, and grant you a license to any code in the repository under the MIT License, see the LICENSE-CODE file.

Microsoft, Windows, Microsoft Azure and/or other Microsoft products and services referenced in the documentation may be either trademarks or registered trademarks of Microsoft in the United States and/or other countries. The licenses for this project do not grant you rights to use any Microsoft names, logos, or trademarks. Microsoft's general trademark guidelines can be found at http://go.microsoft.com/fwlink/?LinkID=254653.

Privacy information can be found at https://privacy.microsoft.com/en-us/

Microsoft and any contributors reserve all other rights, whether under their respective copyrights, patents, or trademarks, whether by implication, estoppel or otherwise.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot