paolobueno · February 6, 2020 16:26
diff --git a/.gitignore b/.gitignore
 /node_modules
 /dist
 /*-error.log
 /.cache
 /.yarn.lock
diff --git a/.prettierrc b/.prettierrc
 {
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": false,
 }
diff --git a/examples.ts b/examples.ts
 // # Type guards
 class Animal {}
 class Dog extends Animal {
  woof() {
    console.log('wan, wan!');
  }
 }

 function isDog(d: Animal): d is Dog {
  return !!(d as Dog).woof;
 }

 const d: Animal = new Dog();

 if (isDog(d)) {
  d.woof();
 }

 // ## Assertions and never return value
 function fail(): never {
  throw new Error('bah');
 }

 // # pattern-matching keyof
 const prop = <K extends keyof any>(k: K) => <T extends Record<K, V>, V>(o: T) =>
  o[k];

 // # Const type qualifier
 const foo = {foo: 'bar', zoo: 'banana'} as const;
 const z = prop('foo')(foo);

 // # Tuples and function rest params
 const props = <K extends keyof any>(...ks: K[]) => <T extends Record<K, any>>(
  o: T,
 ) => ks.map(k => o[k]) as [T[K]];

 const pr = props('zoo', 'foo')(foo);

 const call = <A extends any[], R>(fn: (...args: A) => R, ...args: A) =>
  fn(...args);

 function sum(a: number, b: number) {
  return a + b;
 }

 const three = call(sum, 1, 2);

 const pipe = <A1 extends any[], A2, R>(
  f: (...args: A1) => A2,
  g: (arg: A2) => R,
 ) => (...args: A1) => g(f(...args));

 const add = (x: number) => (y: number) => x + y;

 const s = pipe(
  (...s: string[]) => String.prototype.concat(...s),
  s => s.toUpperCase(),
 );

 const assoc = <K extends keyof any, V, O>(key: K, v: V, o: O) => ({
  ...o,
  ...({[key]: v} as {[P in K]: V}),
 });

 const x = assoc('a', 42, {foo: 'bar'});
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>TS Demo</title>
 </head>
 <body>
  <div id="root"></div>
  <script src="./index.tsx"></script>
 </body>
 </html>
diff --git a/index.tsx b/index.tsx
 import ReactDOM from 'react-dom';
 import React from 'react';
 import {App} from './live';

 ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/live.tsx b/live.tsx
 import React, {useState} from 'react';

 // times(n)

 // usePersistedState

 export const App = () => {
  const [count, setCount] = useState(0);

  const inc = () => setCount(count + 1);
  const dec = () => setCount(count - 1);

  return (
    <div>
      <p>{count}</p>
      <button onClick={inc}>+</button>
      <button onClick={dec}>-</button>
    </div>
  );
 };
diff --git a/package.json b/package.json
 {
  "name": "ts-showcase",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "gist:594ad96866469ff918162e5c7fabbe3e",
  "license": "MIT",
  "scripts": {
    "start": "parcel index.html"
  },
  "devDependencies": {
    "@types/react": "^16.9.19",
    "@types/react-dom": "^16.9.5",
    "parcel-bundler": "^1.12.4",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "typescript": "^3.7.5"
  }
 }
diff --git a/tsconfig.json b/tsconfig.json
 {
  "compilerOptions": {
    "lib": ["DOM", "ES2015"],
    "strict": true,
    "esModuleInterop": true,
    "jsx": "react"
  }
 }
	{
	"singleQuote": true,
	"trailingComma": "all",
	"bracketSpacing": false,
	}
	// # Type guards
	class Animal {}
	class Dog extends Animal {
	woof() {
	console.log('wan, wan!');
	}
	}

	function isDog(d: Animal): d is Dog {
	return !!(d as Dog).woof;
	}

	const d: Animal = new Dog();

	if (isDog(d)) {
	d.woof();
	}

	// ## Assertions and never return value
	function fail(): never {
	throw new Error('bah');
	}

	// # pattern-matching keyof
	const prop = <K extends keyof any>(k: K) => <T extends Record<K, V>, V>(o: T) =>
	o[k];

	// # Const type qualifier
	const foo = {foo: 'bar', zoo: 'banana'} as const;
	const z = prop('foo')(foo);

	// # Tuples and function rest params
	const props = <K extends keyof any>(...ks: K[]) => <T extends Record<K, any>>(
	o: T,
	) => ks.map(k => o[k]) as [T[K]];

	const pr = props('zoo', 'foo')(foo);

	const call = <A extends any[], R>(fn: (...args: A) => R, ...args: A) =>
	fn(...args);

	function sum(a: number, b: number) {
	return a + b;
	}

	const three = call(sum, 1, 2);

	const pipe = <A1 extends any[], A2, R>(
	f: (...args: A1) => A2,
	g: (arg: A2) => R,
	) => (...args: A1) => g(f(...args));

	const add = (x: number) => (y: number) => x + y;

	const s = pipe(
	(...s: string[]) => String.prototype.concat(...s),
	s => s.toUpperCase(),
	);

	const assoc = <K extends keyof any, V, O>(key: K, v: V, o: O) => ({
	...o,
	...({[key]: v} as {[P in K]: V}),
	});

	const x = assoc('a', 42, {foo: 'bar'});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>TS Demo</title>
	</head>
	<body>
	<div id="root"></div>
	<script src="./index.tsx"></script>
	</body>
	</html>
	import ReactDOM from 'react-dom';
	import React from 'react';
	import {App} from './live';

	ReactDOM.render(<App />, document.getElementById('root'));
	import React, {useState} from 'react';

	// times(n)

	// usePersistedState

	export const App = () => {
	const [count, setCount] = useState(0);

	const inc = () => setCount(count + 1);
	const dec = () => setCount(count - 1);

	return (
	<div>
	<p>{count}</p>
	<button onClick={inc}>+</button>
	<button onClick={dec}>-</button>
	</div>
	);
	};
	{
	"name": "ts-showcase",
	"version": "1.0.0",
	"main": "index.js",
	"repository": "gist:594ad96866469ff918162e5c7fabbe3e",
	"license": "MIT",
	"scripts": {
	"start": "parcel index.html"
	},
	"devDependencies": {
	"@types/react": "^16.9.19",
	"@types/react-dom": "^16.9.5",
	"parcel-bundler": "^1.12.4",
	"react": "^16.12.0",
	"react-dom": "^16.12.0",
	"typescript": "^3.7.5"
	}
	}
	{
	"compilerOptions": {
	"lib": ["DOM", "ES2015"],
	"strict": true,
	"esModuleInterop": true,
	"jsx": "react"
	}
	}