Advanced Typescript: Inference

So in part 1 of this series, we looked at how the typeof operator can be used to infer the Typescript type of an object. There’s a bunch more ways to infer types, and it makes working with Typescript pretty interesting as you can make the type inference do the work for you. Here’s a few of them:

Infer the ReturnType of a function

Works like you’d expect:

> function isEmpty(s: string | null | undefined) { return s === "" || s === null || s === undefined }

> let a: ReturnType<typeof isEmpty>

> a = "hello"
[eval].ts:3:1 - error TS2322: Type '"hello"' is not assignable to type 'boolean'.

3 a = "hello"
  ~

undef

Note the slightly weird construction: ReturnType <typeof isEmpty>. That’s because ReturnType (just like all Typescript types) expects a type as a parameter, and not a value.

Infer the type of an instance from the Class Name

Just like ReturnType, there’s also InstanceType:

> class Trigger { x = 0; y = 0 }

> let g: InstanceType<typeof Trigger> = "hello"
[eval].ts:14:5 - error TS2322: Type '"hello"' is not assignable to type 'Trigger'.

Infer the type of Props of a React Component

Here’s a code fragment from Reactist test suite that illustrates this:

    const getAvatar = (
        props?: Omit<React.ComponentProps<typeof Avatar>, 'user'> & {
            user?: { name?: string; email: string }
        }
    ) => (
        <Avatar
            user={{ name: 'Henning Mus', email: 'henning@doist.com' }}
            size="xl"
            {...props}
        />
    )

As you can see React.ComponentProps works pretty much like ReturnType, so you don’t really need to export Props from a component ever. (h/t Janusz)

Typescript has far more complex inference (the infer keyword comes to mind), but this is good enough to start and really simplifies a lot of use-cases, and avoids unneeded type exports from a library.

Recommending: Grab Chai

I’ve been having a virtual cup of chai and good conversation with interesting folks through Grab Chai for a month or so now.

The tagline pretty much speaks for itself.

It’s been great. Like-minded people who I would’ve otherwise never connected to and random folks who do interesting stuff, both. Here’s a couple of photos I clicked:

Do check it out!

gifify: easy video to GIF maker

I’ve been using videos to illustrate points for quite some time now in pull requests and code issues. Since I switched to Github, I couldn’t really directly upload videos to an issue or a comment without uploading them somewhere, and that was kinda frustrating.

Enter: gifify

It’s a command-line tool that does the job well, and is a simple brew install gifify away. It does install a ton of dependencies though, but combined with the new Shift-⌘-5 shortcut, it’s super-easy to quickly record something to show folks on your Mac.

Tailblocks for Tailwind

So I’m a big fan of Tailwind. I think the framework makes CSS grok-able again by providing a subset of the language that has been mostly well-thought out, but still has enough escape hatches so you can do anything CSS can do (mostly)—without writing CSS.

Because Tailwind is so flexible and open-ended though, it’s hard to get started with a more complete layout, part of the reason why Tailwind UI—a component framework that built on top of Tailwind, and by the original creators—sold so well. We ended up purchasing Tailwind UI at Lucideus at the last project I worked on just for this reason: to give a new team more experience with how to build with Tailwind.

Well now, we have an open source alternative: Tailblocks.

Tailblocks seems to be focusing mostly on more fully-fledged layouts now, compared to Tailwind UI that provides more granular components:

But nevertheless, this is really good news. More libraries and code examples for Tailwind—for free—never will hurt 🙂

People-First Jobs & My 8 Criteria

There’s a new curated job site around (h/t Swanand). The headline spiel is indeed what it is about:

Tired of “growth at all costs” work environments?
Find companies who take a healthy approach to work,

Their criteria is interesting:

  1. Remote work
  2. Asynchronous communication
  3. Deep work
  4. Sensible hours
  5. Flexible schedules
  6. Outcome-oriented
  7. Professional development

I think all of these are valuable, but perhaps a few can be clubbed together. I had these 8 criteria when I was job hunting:

  1. Product: Product company, not services or a software consultancy.
    Simply because products matter. There’s a good Steve Jobs video as to why!
  2. Bootstrapped/Public: Not stuck at going after growth for VC’s sake.
    Venture capital is great for most companies, but I’ve rarely seen it have the right indicators to build the kind of product I want to contribute to: those with long-term, lasting value, and simple economics.
  3. Profitable: Ideally a profitable SaaS or other company that is making money.
    Profitable companies are just great. It’s again the simplicity of the economics that appeals: there’s no hockey-stick growth required: you spend less than you make, and you save for a rainy day.
  4. Salary: Pays within 10% of top-of-market.
    I think Software Engineering is enough of an in-demand skill that if you are good, this should be a given.
  5. Remote: Is primarily remote (truly remote, not just US) or has a good remote-working culture.
    The truly remote also includes asynchronous communication.
  6. Open Source: Has significant open source contributions.
    Two reasons, one: because most often stewarding a good open source community looks a lot like building a good remote company. And the next, giving back starts at home.
  7. Interviews: Has a sensible interviewing process with a take-home test.
    I despise the whiteboard interview. It’s much harder to be a company that executes the alternative—a take home test—but it’s much more humane and respectful.
  8. Balance: Respects personal time. Allows for at least 20 days of vacation in a year.
    This should be self obvious. Taking downtime is as important as work.

Make your criteria before you start a job hunt. But People-First jobs is definitely a good place to start.

Gap by Ira Glass

Came across this lovely video recently:

Gap by Ira Glass

This really spoke to me for the simple reason that so many, many times, I’ve started projects only to abandon them halfway simply because it wasn’t good enough. Recently, I’ve convinced myself to finish by saying: “It’ll never be good enough.” But: this video put a much more positive spin to it.

I got this from this excellent new blog post on Enneagrams on the Doist blog btw, do go read!