Repository files navigation

• URLs:production
• Translations:microsoft/TypeScript-Website-Localizations

This repo uses pnpm workspaces with node 18+, andwatchman. (Windows users can installwatchman via chocolatey)

With those set up, clone this repo and runpnpm install.

git clone https://github.com/microsoft/TypeScript-websitecd TypeScript-websitepnpm installcode.# Then:pnpm bootstrap# Optional, grab the translations:pnpm docs-sync pull microsoft/TypeScript-Website-localizations#main 1# Now you can start up the websitepnpm start

Working on this repo is done by runningpnpm start - this starts up the website on port8000 and creates abuilder 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 andpnpm test
• All packages usedebug - which means you can doenv DEBUG="*" pnpm test to get verbose logs

Having issues getting set up?Consult the troubleshooting.

Deployment is automatic:

• Pushes to the branchv2 deploy toproduction

You can find the build logs inGitHub Actions

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

• Converting Twoslash Code Samples
• How i18n Works For Site Copy
• Updating the TypeScript Version
• Something Went Wrong

This repo usespnpm +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, runpnpm 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 withpnpm changeset --empty.

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 varNO_TRANSLATIONS as truthy will make the website only load pages for English.

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

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

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

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

Validate the docs:

pnpm run --filter=tsconfig-referencetest# or to just run the linter without a buildpnpm run --filter=tsconfig-reference lint# or to just one one linter for a single docpnpm run --filter=tsconfig-reference lint resolveJson

The docs for TypeScript. Originally ported over frommicrosoft/TypeScript-Handbook then intermingled withmicrosoft/TypeScript-New-Handbook.

It's a little odd, but thetsconfig-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.

The user-facing documentation for the Playground.

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

Most of these packages use (a maintainedfork of)tsdx.

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

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

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

Generates contribution JSON metadata on who edited handbook pages.

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

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

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

This project has adopted theMicrosoft Open Source Code of Conduct.For more information see theCode of Conduct FAQ orcontactopencode@microsoft.com with any additional questions or comments.

Microsoft and any contributors grant you a license to the Microsoft documentation and other contentin this repository under theCreative Commons Attribution 4.0 International Public License,see theLICENSE file, and grant you a license to any code in the repository under theMIT License, see theLICENSE-CODE file.

Microsoft, Windows, Microsoft Azure and/or other Microsoft products and services referenced in the documentationmay 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 athttp://go.microsoft.com/fwlink/?LinkID=254653.

Privacy information can be found athttps://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.