Ian Stewart ianmstew

const toggleButtonProps = {
  key: index,
  selected
};
if (props.disabled) toggleButtonProps.disabled = props.disabled;

Hot tip!! Try to challenge yourself to not imperatively update an object or array when you can use ES6 syntax to declare your logic at initialization/object creation time. The progression of developer into declarative/functional programming looks like this:

http://www.typescriptlang.org/play/#code/MYGwhgzhAEAqCmEAu0DeAoaXoDMD2e0AvNEgBYCWEAdBQHYVIDc0A9K3AJ4AO8AysABOFbkgC0Y+owpgQFAF7wAJtADujMtGB46yQQFdgSPIOhhBAc0zYARueKlKNKUgBMLdtAAK+wfGgAUmAAbmACwqISwGB0AOQoLjJyimoaWjp6hsam5lbY0C6uAFxmdJxM1ljaukgGRiYAFNzCoUj+LiUxnAA0BQxunWUAlGiV+Y5UtP2uDoUV+QC+6AtAA

TypeScript makes JavaScript classes actually useful ^^

By fixing a fatal ES6 class flaw

The conspicuous absence of a way to reference constructor arguments within inline class property initializers

Which IMO after a year of struggles completely hobbles ES6 classes

So another 🤯 about TypeScript. We use plain objects as arbitrary maps all the time, but TypeScript deems that usage (correctly) too flexible.

const map = {};
map.foo = 'foo'; // Error: Property 'foo' does not exist on type '{}'.

Okay, then we need to type our object as a map:

Links

Course outline: https://gist.github.com/ianmstew/3fdf6c1c232aa88c37f121784d537695
JavaScript documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript
Common references
- Variable declarations: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations

Boolean values and operators

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Logical

Repl

https://repl.it/@ianmstew/FrightenedFlusteredExam

Codesandbox

Users App (exercise): https://codesandbox.io/s/wo6yo6o0kk
Users App (completed): https://codesandbox.io/s/508yx02q3l

Intro to Coding

	// Type and Factory

	type RecordX = ReturnType<typeof RecordX>;

	function RecordX(
	id: string,
	props?: Record<string, string[]>
	) {
	return Object.assign({ id }, props);
	}

	// Parallel implementation to Avatar example from
	// https://github.com/conorhastings/use-reducer-with-side-effects/blob/19d097e95302068d8368b0a10b379b0a6bab9f93/README.md
	import { useObserver, useLocalStore } from 'mobx-react';

	// WIP library inspired by `import { promisedComputed } from 'async-computed-mobx'`
	import asyncComputed from 'utils/mobx/asyncComputed';

	const DEFAULT_AVATAR = '/assets/img/default-avatar.png';

	function Avatar(props: { userName: string }) {

	(() => {
	function getLocale() {
	// IE 11 does not support navigator.languages
	return navigator.languages ? navigator.languages[0] : navigator.language;
	}
	function isTimezoneSupported(timezone) {
	try {
	new Date().toLocaleDateString(getLocale(), { timeZone: timezone });
	} catch (err) {
	if (err instanceof RangeError) {

	/* Loader that renders empty unless `props.active` is true */

	function Loader(props) {
	const { active } = props;
	return active && <div>Loading...</div>;
	}

	/* Loader class component that renders empty until a timeout */

	class LoaderWithDelay extends React.Component {

	(() => {
	function MappedYieldGenerator(generator, mapYield) {
	return function*() {
	const gen = generator();
	let genResult;
	let resolvedValue;
	do {
	genResult = gen.next(resolvedValue);
	resolvedValue = yield mapYield(genResult.value);
	} while (!genResult.done);