Zip Iterator in Typescript

Chris Milson — Mon, 18 Jan 2021 02:25:46 +0000

The code in this article and an implementation of zipLongest are in this gist.

The built-in zip function is ubiquitous in python. It allows highly readable iteration over multiple iterables:

def naturals():
    n = 1
    while True:
        yield n
        n += 1

for n, c in zip(naturals(), "Hello!"):
    print(n, c)
# 1 H
# 2 e
# 3 l
# 4 l
# 5 o
# 6 !

Now, with Mapped Types in typescript, we can do the same thing, all while keeping our lovely types too!

With mapped types, we can make an Iterableify type, which will take a type, and change it so that its members are of type Iterable:

type Iterableify<T> = { [K in keyof T]: Iterable<T[K]> }

For example

type T1 = Iterableify<string[]> // Iterable<string>[]
type T2 = Iterableify<{a: number, b: string}> // {a: Iterable<number>, b: Iterable<string>}
type T3 = Iterableify<[number, string][]> // Iterable<[number, string]>[]

We can then make a simple zip function like so:

function* zip<T extends Array<any>>(
    ...toZip: Iterableify<T>
): Generator<T> {
    // Get iterators for all of the iterables.
    const iterators = toZip.map(i => i[Symbol.iterator]())

    while (true) {
        // Advance all of the iterators.
        const results = iterators.map(i => i.next())

        // If any of the iterators are done, we should stop.
        if (results.some(({ done }) => done)) {
            break
        }

        // We can assert the yield type, since we know none
        // of the iterators are done.
        yield results.map(({ value }) => value) as T
    }
}

Since the mapped types affect typescript tuples as well, we can now do something like this:

for (const [a, b] of zip([1, 2, 3], "abc")) {
    // type of a is number!
    // type of b is string!

    // This has no compilation errors!
    console.log(b.repeat(a))
}

Problems with usePrevious.

Chris Milson — Wed, 19 Aug 2020 03:31:33 +0000

Recently, I was creating a react component and I wanted to remember the previous value of one of the props. I did a google search and found several different articles^[1][2][3], all trying to convince me that the following code would serve my needs. This snippet is from react's documentation:

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

The idea with this pattern is that the useEffect hook will fire its effect whenever the value variable changes. Since the effect fires after the function returns, the hook will return whatever value was the last time the hook was called not the previous value.

This means that in my component, instead of getting the previous value of a prop, I get the value of the prop on the previous render. Consider the following component.

function Counter(props) {
  const { style } = props;
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);
  return (
    <h1 style={style}>
      Now: {count}, before: {prevCount}
    </h1>
  );
}

If the style prop changes, it will cause an update to the component, and prevCount will suddenly display the same value as the current count. According to the react docs team this is intended behaviour. However if you are like me, consider using the following code instead:

function usePrevious(value, initial?) {
  const targetRef = useRef(value);
  const previousRef = useRef(initial);

  if (targetRef.current !== value) {
    // The value changed.
    previousRef.current = targetRef.current;
    targetRef.current = value;
  }

  return previousRef.current;
}

or with a singe ref

function usePrevious(value, initial?) {
  const ref = useRef({target: value, previous: initial});

  if (ref.current.target !== value) {
    // The value changed.
    ref.current.previous = ref.current.target;
    ref.current.target = value;
  }

  return ref.current.previous;
}

DEV Community: Chris Milson

Zip Iterator in Typescript

Problems with usePrevious.