Typescript patterns for third party dependencies

This month I have been creating some electron apps, using typescript and the aws-sdk v3 for JavaScript. I hope to have some exciting outcomes to share in the future.

For now I'd like to share some Typescript patterns I found useful when working with the new SDK.

Return types of functions

The first one is simple, it's the use of ReturnType in combination with the typeof annotations.

Here is an example:

// ../_snippets/typescript-patterns/return-type.ts

import React, { useState, useEffect } from "react";

const listTables = () => ({
data: {
message: "I am fully typed",
},
});

const [credentials, setCredentials] = useState<ReturnType<typeof listTables>>();

useEffect(() => {
setCredentials(listTables());
}, []);

So to run this through. We can set the type of our useState hook to the return type of the imported function.

This is useful for the following reasons:

Resolved return of promises

Next up is an expansion of this pattern, but enabling the use of promises:

// ../_snippets/typescript-patterns/awaited-return-type.ts

import React, { useState, useEffect } from "react";
type Awaited<T> = T extends PromiseLike<infer U> ? Awaited<U> : T;

const listTables = () =>
Promise.resolve({
data: {
message: "I am fully typed",
},
});

const [tables, setTables] = useState<Awaited<ReturnType<typeof listTables>>>();

useEffect(() => {
const init = async () => {
const results = await listTables();
setTables(results);
};
init();
}, []);

I have included the promise function to make life easier.

So this example can be read as. The type of tables, will be the resolved value, of the promise returned by the listTables function.

This is useful, mainly because, we can say that we have returned a data type, and not a promise type.

Soon, this type will be supported natively in typescript

Wrap Up

That's all for now, I hope you have found this useful 👍