Update Playground Examples

[RyanCavanaugh]

The TypeScript Playground examples are... not great. We deserve a new set.

General principles

• Don't lean on classes
• Show off type inference where possible - minimal annotations
• Emphasize working with JavaScript
• Show both error-finding and good intellisense

Please Suggest More!

---

Basic Types & Inference

const array = ["red", "green", "blue", "yellow"];
array.forEach(color => {
  // TypeScript knows 'color' is a string and warns on the incorrect method name
  console.log(color.toUppercase());

  // Try typing 'color.' on this line to see members of string
  color
});

// TypeScript knows s has one of two string values.
// This can detect some different errors
const s = Math.random() > 0.5 ? "aaa" : "bbb";
// ... like the spelling error here
if (s === "aa") {
 // oops
}
// ... and the logic error here!
if (s === "aaa" && s === "bbb") {
  // oops
}

Functions

function check(s: string) {
  return s.length > 3;
}

// TypeScript warns if we get the argument count wrong
check();
// Or if the argument type is wrong
check(10);

// The return type of the function is inferred,
// so errors like this are automatically detected
if (check("hi") === "world") {
  // Never true because 'world' isn't a boolean
}

Union Types

// TypeScript can work with objects of mixed types
const items = ["red", 10, 15, "blue"];
for (const i of items) {
  if (typeof i === "string") {
    // TypeScript knows 'i' is 'string' here
    console.log(i.toUpperCase());
  } else {
    // 'i' is of type 'number' here
    console.log(i * 2);
  }
}

Generics

ES6 Classes

What else?

[weswigham]

Also TSX.

[MartinJohns]

Add an example showing where type annotations do matter: When declaring variables of object literals.

interface Test {
    readonly a: number;
    readonly b: number;
}

const a1 = { a: 1, b: 2 };
const a2: Test = { a: 1, b: 2 };

When deleting a property from Test the first variable will still work fine, but the second will cause an error (#3755). Same would apply when returning an object literal from a function. While technically it is working and the object literal still fulfills the interface with the extra properties, it's still better to notice the developer so he can remove code that is not necessary anymore.

---

Add an example demonstrating why casts are often a bad idea and undermine type safety:

interface Test {
    readonly a: number;
    readonly b: number;
}

const a = <Test>{ a: 5 };
a.b; // Type is `number`, but value is `undefined`.

[donaldpipowitch]

One about proper usage of built-in helpers like ReturnType.

[orta]

It's a little bit verbose, but I think the example React component in TypeScript-React-Native-Starter covers a lot of the value in using TypeScript with React

[styfle]

I suggest looking this playground from @agentcooper which has some additional examples but also has even more features than the official playground.

Also, I'll link this related issue: agentcooper/typescript-play#4

[weswigham]

• An example using literal types and discriminated unions.
• An example for import types.
• An example for mapped types.
• An example for conditional types.

[mhegazy]

‘ts-check’ example as well.

[orta]

Blast from the past on this issue - but I've moved it to the TS website now, I've tried to think of the examples from quite far back - helping folks look for simpler JS use cases (if you're new) all the way to advanced TS things like conditional types. What do folks think of this general progression?

( To do it I'd have to add JS support, and type acquisition to the playground - but that's achievable )

[orta]

There isn't done for showing how to work with the DOM! Added

[orta]

OK... well, on 2nd round when trying to think about the advanced types much harder. I ended up coming up with "a lot" but also TS things which weren't quite "advanced" - so:

then for things which are really typescript and not just day-to-day JS

... ideally there'd be one more. Maybe that could be example apps or something which when you run it would be cool, sorta like the current retracer

[orta]

This is shipped!