jossmac

It's JavaScript that's complicated, not TypeScript

When I first started writing TypeScript, it felt strange and bureaucratic, like I was being asked to constantly justify things that were already obvious.

Then, after enough time, you realise TypeScript isn’t being pedantic. It’s compensating for the fact that JavaScript itself is wildly permissive.

Everything is an object, somehow

JavaScript’s type system has the energy of a witness being cross-examined.

jossmac

/**
 * Returns the count and appropriate plural or singular form of a term.
 *
 * @example
 * pluralize(0, 'wallet'); // '0 wallets'
 * pluralize(1, 'wallet'); // '1 wallet'
 * pluralize(2, 'wallet'); // '2 wallets'
 * pluralize(1, ['person', 'people']); // '1 person'
 * pluralize(2, ['person', 'people']); // '2 people'
 * pluralize(1, ['person', 'people'], false); // 'person'

jossmac

import type { CSSProperties } from 'react';

type StyleVars = Record<
  `--${string}`,
  string | number | boolean | undefined | null
>;

/**
 * Type casting identity function. Maintains the autocompletion and type safety
 * of `CSSProperties`, while allowing the addition of CSS variables.

jossmac

const DRAW_DIRECTION = ["clockwise", "anti-clockwise"] as const;

/**
 * Generate a complex path string, using familiar SVG shape (`<circle>`,
 * `<rect>`, etc.) syntax.
 *
 * @param data An array of shape objects.
 * @param evenodd Alternate drawing direction for each path. When multiple paths are combined into a single string of path data, this will influence whether the paths are additive or subtractive.
 * @returns A string of SVG path data representing all shapes.
 *

jossmac

const partialApply = (fn, ...fixedArgs) => {
  return (...remainingArgs) => fn(...fixedArgs.concat(...remainingArgs));
};


const add = (a, b) => a + b;

const add10 = partialApply(add, 10);

console.log(add10(5)) // 15

jossmac

import React from 'react';
import { ToastContext } from './Provider';

export const ToastConsumer = ({ children }) => (
  <ToastContext.Consumer>
    {context => children(context)}
  </ToastContext.Consumer>
);

// Higher-Order Component

jossmac

import React from 'react';
import { ToastContext } from './Provider';

export const ToastConsumer = ({ children }) => (
  <ToastContext.Consumer>
    {context => children(context)}
  </ToastContext.Consumer>
);

jossmac

import React from 'react';
import Renderer from './Renderer';

export const ToastContext = React.createContext();

export class ToastProvider extends React.Component {
  state = { toasts: [] }

  add = (content) => {
    this.setState(...);

jossmac

export default class Store {
  listeners = []
  store = []

  add = (data) => {
    const id = uniqueId()
    const item = { id, data }
    this.store.push(item)
    this.publish()
  }

jossmac

// probably unnecessary but...
const merge = (...args) => args.reduce((obj, val) => ({ ...obj, ...val }), {});

const combined = merge(
  { background: 'red', padding: 20 },
  { color: 'blue' },
  { color: 'white' },
);

console.log(combined); // { background: 'red', padding: 20, color: 'white' }