How to Specify Types for Destructured Object Properties Using TypeScript?

You can simply specify the type of an object you're destructuring after :. The type can either be specified inline, or from an existing interface, type declaration, or by using type assertions.

Infer Types From Object's Type Declaration

Ideally, you should correctly type the object wherever possible because if the object itself has a type declaration, then TypeScript would infer those types automatically when you're destructuring an object. This is perhaps the best way to go about it.

Also, remember that TypeScript can automatically determine the types of object properties based on their values even without any explicit type declarations. However, for complex types, and even generally speaking, it's always a good idea to properly type objects to avoid unintended results. After all, that is the whole purpose of using TypeScript in a project.

Inline Typing an Object:

const obj: { foo: string[], bar: number } = { foo: [ 'hello', 'world' ], bar: 1234 };

// destructuring would infer `obj` types
const { foo, bar } = obj;

Adding Object Type Using an Interface:

interface FooBar {
    foo: string[];
    bar: number;
}

const obj: FooBar = { foo: [ 'hello', 'world' ], bar: 1234 };

// destructuring would infer `obj` types
const { foo, bar } = obj;

Adding Object Type Using a Type Declaration:

type FooBar = { foo: string[]; bar: number; };
const obj: FooBar = { foo: [ 'hello', 'world' ], bar: 1234 };

// destructuring would infer `obj` types
const { foo, bar } = obj;

Asserting Object Type:

Sometimes the type of an object could be more specific than its current type (like when an object has an any or unknown type):

const obj: any = { foo: [ 'hello', 'world' ], bar: 1234 };

In such cases we could assert the object type in any of the following ways:

// inline typing
const { foo, bar } = obj as { foo: string[], bar: number };

// using an interface
interface FooBar {
    foo: string[];
    bar: number;
}

const { foo, bar } = obj as FooBar;

// using a type declaration
type FooBar = { foo: string[]; bar: number; };

const { foo, bar } = obj as FooBar;

You can also use the angeled-brackets syntax (i.e. <FooBar>obj) for type assertions, which is equivalent to the "as" syntax (e.g. obj as FooBar). Although using either one is a matter of preference, one key difference is that the angeled-bracket syntax is not supported when using TypeScript with JSX.

Explicitly Typing Object Properties:

In some cases, you might find the need to declare types for object properties explicitly while destructuring (such as when the object is not correctly type — i.e. when it has any or unknown types). In such cases, you could do any of the following:

Inline Typing Destructured Properties

const { foo, bar }: { foo: string[], bar: number } = obj;

Adding Types for Destructured Properties Using an Interface:

interface FooBar {
    foo: string[];
    bar: number;
}

const { foo, bar }: FooBar = obj;

Adding Types for Destructured Properties Using a Type Declaration:

type FooBar = { foo: string[]; bar: number; };

const { foo, bar }: FooBar = obj;