Skip to content

Instantly share code, notes, and snippets.

View foo.md
Dev UX: auto imports Dev UX: contextual naming Perf: tree shaking Dev UX: namespace/type merging
namespace import not yet yes maybe no
TS namespace yes yes no yes
types: namespace import / values: named import not yet / yes yes / no yes no
types: TS namespace / values: named import yes yes / no yes yes
@OliverJAsh
OliverJAsh / foo.ts
Created Aug 9, 2019
A negate function for type guards
View foo.ts
type TypeGuard<T, U extends T> = (value: T) => value is U;
const negate = <T, U extends T>(
typeGuard: TypeGuard<T, U>,
): TypeGuard<T, Exclude<T, U>> => (value): value is Exclude<T, U> =>
typeGuard(value) === false;
// Example
const checkIsArray = <T>(value: T | any[]): value is any[] =>
@OliverJAsh
OliverJAsh / test.ts
Created Aug 2, 2019
TypeScript narrow non-discriminated union
View test.ts
{
type AncestryType = {
type: string;
};
type AncestryCategory = {
type: string;
category: string;
};
@OliverJAsh
OliverJAsh / env.ts
Created Aug 2, 2019
TypeScript narrowed union is lost inside function scopes
View env.ts
export type Foo = {
foo: string;
};
export type Bar = {
bar: string;
};
export type Value = Foo | Bar;
export declare const value: Value;
View foo.sh
#!/bin/bash
# https://junegunn.kr/2016/07/fzf-git/
# https://hackernoon.com/be-125-more-efficient-with-git-60556a1ce971
# https://github.com/fcsonline/dotfiles/blob/master/git/gitconfig
# https://github.com/junegunn/fzf/wiki/Examples#git
# TODO: incorporate fix into this?
# TODO: select commits for editing, generate rebase from that
View _git-merge-pr
#compdef git-merge-pr
_git-merge-pr () {
# Multiple lines = -l
# compadd -l -d "('foo:a b c' 'bar:d e f')" foo bar
# lines=('foo:a b c' 'bar:d e f')
# compadd -l -d lines foo bar
# lines=('foo:a b c' 'bar:d e f')
@OliverJAsh
OliverJAsh / foo.ts
Created Aug 1, 2019
TypeScript + React: convert render prop component to HOC
View foo.ts
import { ComponentType, ReactElement } from 'react';
import React = require('react');
type RenderPropComponent = ComponentType<{ children: () => ReactElement }>;
const RenderProp: RenderPropComponent = ({ children }) => (
<div>{children()}</div>
);
const renderPropToHoc = (RenderPropComponent: RenderPropComponent) => <P,>(
View foo.elm
type alias File = { name : String }
type Action = AgreeToTerms | AddFiles { files : List File }
type State = Onboarding | Form { files : List File }
action = AgreeToTerms
state = Form { files = [] }
result = case ( action, state ) of
( AgreeToTerms, Onboarding ) ->
@OliverJAsh
OliverJAsh / foo.md
Last active Jul 17, 2020
My frustrations writing demos/tests for redux-react connected components
View foo.md

My frustrations writing demos/tests for redux-react connected components

I'm writing demos for my React components, to showcase them in a specific states (e.g. Storybook).

However, the components I'm trying to write demos for are React Redux connected components, and this is making the demos much more difficult to achieve. To illustrate why, I'll start with an example.

Note: the problems I describe here also apply to writing tests (which demos are just one form of).

Example

@OliverJAsh
OliverJAsh / foo.ts
Last active Apr 19, 2019
TypeScript `getProperty` for safe index lookups in records
View foo.ts
{
// TS doesn't return the correct type for index lookups. It returns `T` when it might actually be `T
// | undefined`. These helpers give us the correct type.
// https://github.com/Microsoft/TypeScript/issues/13778
type IndexLookup<Key extends string, V, K extends Key> = string extends Key
? Record<Key, V>[K] | undefined
: Record<Key, V>[K];
// $ExpectType string | undefined