No Playground is an island. Well, not strictly, no playground needs to be an island. One of the first problem we hit when adding support for .tsx
/.jsx
to the Playground was that to really use JSX to write React components - you need the types for React.
This left us with the dilemma of needing to either bundle React’s evolving types into the Playground, or to replicate the feature found in JavaScript projects utilizing TypeScript: Automatic Type Acquisition. The idea behind Automatic Type Acquisition (ATA) is that behind the scenes the Playground will look at any import
/ require
/ /// <reference types"
and understand what npm modules have been referenced.
For these referenced modules, TypeScript will search through the npm package contents, and potentially in the @types
equivalent for .d.ts
files to describe how the library works. This means to get the types for React, you would create a playground like:
ts
import React from "react"const myComponent = () => <h1>Hello, world</h1>
Type Acquisition will:
react
on npm, see there are no .d.ts
files in its contents@types/react
exists, downloads all of the .d.ts
files.d.ts
files in @types/react
, and discover they import from csstype
and prop-types
csstype
for .d.ts
files and downloads themprop-types
for .d.ts
files and finds none@types/prop-types
exists and download the .d.ts
files from thatThat one import line has downloaded the .d.ts
files from @types/react
, @types/prop-types
and csstype
. These are added to the Playground’s TypeScript project’s node_modules
folder and TypeScript picks them up.
This is all built on the jsdelivr CDN which has kept the complexity down, and the type acquisition system is available for other projects to use via npm on @typescript/ata
.
If you need more control over the version of the types which are imported into the Playground, you can append // types: npm_tag_or_version
import { xy } from "xyz" // types: beta
The type acquisition as-is is quite eager and may start pulling your types before you’ve set the npm tag or version. In that case, you can reload your browser once it’s written to get the right version.