Establishing the types of object properties prior to performing a destructuring assignment

Question

Establishing the types of object properties prior to performing a destructuring assignment

Consider a scenario where a function is utilized to return an object with property types that can be inferred or explicitly provided:

const myFn = (arg: number) => {
    return {
        a: 1 + arg,
        b: 'b' + arg,
        c: (() => { return arg + 'c'})()
    }
}

We can then destructure the returned object and assign it to new variables:

const { a, b, c } = myFn(10);
console.log('used once', a, b, c);

Now, suppose we need to reassign these variables within a switch statement later on. To avoid the error message

Cannot redeclare block-scoped variable 'xyz'. ts(2451)

, we can use assignment without declaration like this:

let my_a, my_b, my_c;

switch (true) {
    case Math.random() < 0.5:
        ({a: my_a, b: my_b, c: my_c} = myFn(Math.random()));
        console.log('called at one point', my_a, my_b, my_c);
    default:
        ({a: my_a, b: my_b, c: my_c} = myFn(Math.random()));
        console.log('called at another point', my_a, my_b, my_c);
}

The challenge now is how to declare/extract the types of my_a, my_b, etc., when their types are known in advance but typing them out manually is not desired? See the playground snippet here.

DETAILS

I am seeking a method to define the types when initializing the variables using

let my_a, my_b, my_c;

based on the signature of myFn to prevent

Variable 'my_a' implicitly has an 'any' type,
but a better type may be inferred from usage. ts(7043)

javascript typescript typescript-types

Answer 1

Answer №1

One approach is to manually specify the my_* variables in advance by delving into the return type of your function.

let my_a: ReturnType<typeof myFn>['a'],
    my_b: ReturnType<typeof myFn>['b'],
    my_c: ReturnType<typeof myFn>['c'];

The typeof myFn extracts the function type from the myFn, enabling the type system to process it. The ReturnType<...> fetches the type that the function returns. Lastly, ['a'] retrieves the a property from that return type.

Playground

This step may not be necessary since the provided playground snippet correctly infers everything and does not result in any type errors. It might be worth considering if this additional specification is truly needed.

Answer 2

One approach is to manually specify the my_* variables in advance by delving into the return type of your function.

let my_a: ReturnType<typeof myFn>['a'],
    my_b: ReturnType<typeof myFn>['b'],
    my_c: ReturnType<typeof myFn>['c'];

The typeof myFn extracts the function type from the myFn, enabling the type system to process it. The ReturnType<...> fetches the type that the function returns. Lastly, ['a'] retrieves the a property from that return type.

Playground

This step may not be necessary since the provided playground snippet correctly infers everything and does not result in any type errors. It might be worth considering if this additional specification is truly needed.

Answer 3

Answer №2

To create a switch logic in JavaScript, define an interface and utilize anonymous arrow functions:

interface Characters {
    alpha: number,
    beta: string,
    gamma: string,
}

const mySwitch = (value: number): Characters =>  {
    return {
        alpha: 10 + value,
        beta: 'beta' + value,
        gamma: (() => { return value + 'gamma'})()
    }
}

let result_alpha, result_beta, result_gamma;

switch (true) {
    case Math.random() < 0.5:
        () => {
            const {alpha: result_alpha, beta: result_beta, gamma: result_gamma}: Characters = mySwitch(Math.random());
            console.log('first execution', result_alpha, result_beta, result_gamma);
        }
    default:
        () => {
            const {alpha: result_alpha, beta: result_beta, gamma: result_gamma}: Characters = mySwitch(Math.random());
            console.log('second execution', result_alpha, result_beta, result_gamma);
        }
}
</.code></pre>
    </div></answer2>
<exanswer2><div class="answer" i="63943027" l="4.0" c="1600351886" v="2" a="T3ZpZGlqdXMgUGFyc2l1bmFz" ai="10311008">
<p>In JavaScript, you can set up an interface and nest your switch logic within anonymous arrow functions:</p>
<pre><code>interface Alphabets {
    one: number,
    two: string,
    three: string,
}

const myFunction = (argument: number): Alphabets =>  {
    return {
        one: 5 + argument,
        two: 'two' + argument,
        three: (() => { return argument + 'three'})()
    }
}

let computed_one, computed_two, computed_three;

switch (true) {
    case Math.random() < 0.5:
        () => {
            const {one: computed_one, two: computed_two, three: computed_three}: Alphabets = myFunction(Math.random());
            console.log('triggered at some point', computed_one, computed_two, computed_three);
        }
    default:
        () => {
            const {one: computed_one, two: computed_two, three: computed_three}: Alphabets = myFunction(Math.random());
            console.log('triggered at some point', computed_one, computed_two, computed_three);
        }
}

Answer 4

To create a switch logic in JavaScript, define an interface and utilize anonymous arrow functions:

interface Characters {
    alpha: number,
    beta: string,
    gamma: string,
}

const mySwitch = (value: number): Characters =>  {
    return {
        alpha: 10 + value,
        beta: 'beta' + value,
        gamma: (() => { return value + 'gamma'})()
    }
}

let result_alpha, result_beta, result_gamma;

switch (true) {
    case Math.random() < 0.5:
        () => {
            const {alpha: result_alpha, beta: result_beta, gamma: result_gamma}: Characters = mySwitch(Math.random());
            console.log('first execution', result_alpha, result_beta, result_gamma);
        }
    default:
        () => {
            const {alpha: result_alpha, beta: result_beta, gamma: result_gamma}: Characters = mySwitch(Math.random());
            console.log('second execution', result_alpha, result_beta, result_gamma);
        }
}
</.code></pre>
    </div></answer2>
<exanswer2><div class="answer" i="63943027" l="4.0" c="1600351886" v="2" a="T3ZpZGlqdXMgUGFyc2l1bmFz" ai="10311008">
<p>In JavaScript, you can set up an interface and nest your switch logic within anonymous arrow functions:</p>
<pre><code>interface Alphabets {
    one: number,
    two: string,
    three: string,
}

const myFunction = (argument: number): Alphabets =>  {
    return {
        one: 5 + argument,
        two: 'two' + argument,
        three: (() => { return argument + 'three'})()
    }
}

let computed_one, computed_two, computed_three;

switch (true) {
    case Math.random() < 0.5:
        () => {
            const {one: computed_one, two: computed_two, three: computed_three}: Alphabets = myFunction(Math.random());
            console.log('triggered at some point', computed_one, computed_two, computed_three);
        }
    default:
        () => {
            const {one: computed_one, two: computed_two, three: computed_three}: Alphabets = myFunction(Math.random());
            console.log('triggered at some point', computed_one, computed_two, computed_three);
        }
}

Establishing the types of object properties prior to performing a destructuring assignment

Answer №1

Answer №2

Similar questions

typescriptWhat is the syntax in TypeScript for creating a prototype of a multidimensional

I'm struggling to understand how to interpret this. The v-tab function seems to be generating a button with various properties, but I'm unsure which specific property is related to

Scroll positioning determines the height of an entity

Arrange items by their keys while keeping their current values in order to correspond to the array sequence

Transform arrays within arrays to objects

Socket IO: Error - The call stack has exceeded the maximum size limit

Developing a Vue.js application with a universal variable

Ever since updating my jQuery version to 3.2.1, my ajax code seems to have stopped functioning properly

Puppeteer encountered an error when trying to evaluate the script: ReferenceError: TABLE_ROW_SELECTOR was not defined

Examining the array to ensure the object exists before making any updates in the redux

Using the 'client-side rendering' and runtime environment variables in Next.js with the App Router

While trying to set up a development server in Firebase, I mistakenly deleted my build folder

Assistance needed with implementing jQuery tabs

Tips for Angular4: ensuring ngOnDestroy completion before navigation

Display the output based on checkbox selection using JavaScript

How can I retrieve the value from the input field using vue.js?

The layout of a Vuex store in a sprawling website

What strategies can I use to streamline this array update function code?

Inject SCSS variables into Typescript in Vue 2 Using Vue-cli 5

I am facing an issue with the routing functionality in the Quasar framework for Vue 3