Adds updated examples

[orta]

This PR is a collect-all for playground based documentation. Unlike the handbook which aims to be thorough and definitive - the examples in the playground are based on providing a few primitives per example and a narrative about why/when you'd use them in a browser environment

---

You can try it in https://5d6c47101cff21a89609f849--ts-playground.netlify.com/play/index.html?strict=false#example/objects-and-arrays

I'm now good for content feedback!

---

• JavaScript
  • External APIs
    • TypeScript + Deno
    • TypeScript + Node
    • TypeScript + React x
    • TypeScript + Web
    • TypeScript + WebGL
  • Functions with JavaScript
    • Function Chaining
    • Generic Functions
    • Typing Functions
  • Helping with JavaScript
    • Errors
    • Quick Fixes
    • Warnings
  • JavaScript Essentials
    • Code Flow
    • Functions
    • Hello World
    • Objects and Arrays
  • Modern JavaScript
    • Async:Await
    • Immutability
    • Import:Export
    • JSDoc Support
  • Working With Classes
    • Classes 101
    • Generic Classes
    • Mixins
    • This
• TypeScript
  • Advanced Meta-Types
    • Conditional Types
    • Discriminate Types
  • Language
    • Soundness
    • Type Widening:Narrowing
  • Language Extensions
    • Enums
    • Types vs Interfaces
  • Meta-Types
    • Indexed Types
    • Mapped Types
    • Nominal Typing
  • Primitives
    • Any
    • Literals
    • Union and Intersection Types
    • Unknown and Never
  • Type Primitives
    • Built-in Utility Types
    • Nullable Types
    • Tuples

[RyanCavanaugh]

Fixes #25

[sandersn]

Some miscellaneous comments. I made some grammar cleanups but I don't know whether it's worthwhile to push them upstream yet.

[orta]

Type Acquisition for lodash and jest is rough - Lodash's types are kinda crazy, and Jests seems to send my browsers into an infinite loop.

[orta]

Yep, I got all those tools set up for projects before - will definitely do that 👍

[orta]

OK, this now has an implementation in the playground orta/typescript-play#17

This can be tested in this netlify draft deploy

[jack-williams]

Another unsound feature that might be worth mentioning is this (I can't think of an example that isn't contrived right now, so maybe it's not a good inclusion!)

// We can always add an extra optional property to a type.
const obj: { x: string; y? : number } = { x: "a property "};

// However in combination with the ability to 'forget' properties this can
// can be unsound.

const objXY = { x: "a property", y: true };
const objX: { x: string } = objXY;
const objXYNumber: { x: string, y?: number } = objX;

const num: number = objXYNumber.y === undefined ? 0 : objXYNumber.y;

// Excess property checking can prevent errors like this when you
// initialise your objects with annotations:

const objXYAnnotation: { x: string } = { x: "a property", y: true }; // error

[orta]

keyof isn't really in here, IMO maybe it should go in mapped types or in the the included types?

[chriskrycho]

This is fantastic! I'm going to try to read through all of it and note anything that stands out along the way over the next week or so, but general sentiment after perusing a few of the examples is just 😍 💯 🎉 – this mode is a great way of helping people learn, and the content is 👍

[github-actions]

	Messages
📖	Deployed to a PR branch

Typos for README.md

Line	Typo
13	default to english.

Typos for Generic Classes.ts

Line	Typo
42	well as creating a drawer for Tshirts
43	const tshirtDrawer = new Drawer();
44	tshirtDrawer.add({ size: "m" });

Typos for Mixins.ts

Line	Typo
3	// Mixins are a faux-multiple inheritan
76	// functions due to their mixins:

Typos for This.ts

Line	Typo
28	// TLDR: this can change. The referen

Typos for Classes 101.ts

Line	Typo
26	const shop = new Vendor("Ye Olde Shop");
49	uck = new FoodTruck("Salome's Adobo");

Typos for Types vs Interfaces.ts

Line	Typo
31	colourful: true;
35	colourful: false;
40	hicken: Chicken = { wings: 2, colourful: false, flies: false };

Typos for Soundness.ts

Line	Typo
34	// your transpiled code.

Typos for Structural Typing.ts

Line	Typo
61	// For example the array's forEach's callback has three params,

Typos for Type Widening:Narrowing.ts

Line	Typo
41	// via the nullability checks. With strict mode turn
42	// markers for nullability like undefined and null are i

Typos for Conditional Types.ts

Line	Typo
24	type ExtractDogish = A extends { barks: true
26	can create types which ExtractDogish wraps:
29	type NeverCat = ExtractDogish;
31	type Wolfish = ExtractDogish;
78	declare function isCatish(x: T): T extends { meows:

Typos for JSDoc Support.js

Line	Typo
52	hen use it by referencing the typedef's name:

Typos for Discriminate Types.ts

Line	Typo
30	const timespan = event.duration;

Typos for Import:Export.ts

Line	Typo
106	// esModuleInterop.

Typos for Indexed Types.ts

Line	Typo
12	deathdate: string
25	deathdate: string

Typos for Async:Await.ts

Line	Typo
95	ponse(responseData.url, (thirdRespones) => {

Typos for Any.ts

Line	Typo
33	// anys in different forms, for examp

Typos for Objects and Arrays.ts

Line	Typo
7	name: "Kieron",
43	// file and lets you avoid typoes and see additional
69	// codebases is to avoid mutation. TypeScr

Typos for Literals.ts

Line	Typo
52	name: "Fatma"
59	myUnchangingUser.name = "Raîssa";
61	as const" is a great tool for fixtured data, and places
65	[{ name: "Brian" }, { name: "Fahrooq" }] as const;

Typos for Quick Fixes.ts

Line	Typo
11	// for typoes in your types:
13	const eulersNumber = 2.7182818284
14	eulersNumber.toStrang();
14	eulersNumber.toStrang();

Typos for Union and Intersection Types.ts

Line	Typo
77	artistID: "banksy",
78	markdown: "Banksy is an anonymous England-based
82	artistID: "banksy",

Typos for Function Chaining.ts

Line	Typo
1	order: 2, compiler: { esModuleInterop: true } }

Typos for Unknown and Never.ts

Line	Typo
101	return "Rosa rubiginosa";
103	return "Rhododendron ferrugineum";
105	return "Viola reichenbachiana";
107	return "Bellis perennis";
107	return "Bellis perennis";

Typos for TypeScript + WebGL.js

Line	Typo
51	precision lowp float;
64	varying float v_overlight;
103	float glanceLighting = smoothstep(0.92, 0.98, dotNormal);
111	v_overlight = 0.9 + glanceLighting * 0.1;
129	precision lowp float;
132	varying float v_overlight;
135	agColor = vec4(v_color, 1.0 - smoothstep(0.8, v_overlight, length(v_po
135	olor, 1.0 - smoothstep(0.8, v_overlight, length(v_position)));
279	it: based on this JSFiddle by Subzey

Typos for Built-in Utility Types.ts

Line	Typo
4	// codebases, they are added into TypeScri
56	// from Type. Essentially an allowl-ist for extracting type
65	// from Type. Essentially a blocklist for extracting type

Typos for TypeScript + Node.js

Line	Typo
34	/** @type {TODO[]} a list of TODOs */

Typos for Tuples.ts

Line	Typo
42	[0, "Adankwo", "adankwo.e@"],
42	[0, "Adankwo", "adankwo.e@"],
43	[1, "Kanokwan", "kanokwan.s@"],
43	[1, "Kanokwan", "kanokwan.s@"],

Typos for TypeScript + Deno.ts

Line	Typo
3	// Deno is a work-in-progress JavaScr
8	// Deno has a sandbox-based permissio
12	/ Here is an example of using deno for scripting:
35	// Returns "helloworld"

Typos for generateTOC.js

Line	Typo
10	s from a given folder and its subfolders. */
138	// Ensure all subfolders are in the sorted section

Typos for README.md

Line	Typo
11	monaco/IDE-like environment which ha
11	-like environment which has a TSServer running for

Got false positives?

Make changes to the global settings spellcheck.json in /artsy/peril-settings.

Typos for Enums.ts

Line	Typo
53	// A const enum's value is replaced by TypeScri
71	// If you look at the transpiled JavaScript, you can see

Generated by 🚫 dangerJS against 902bf35

[orta]

The newest build now includes a revised root for documentation:

[alloy]

w00t! So good, thanks @orta 🎉 👏👏👏