tips for utilizing a variable for inferring an object in typescript

In my current code, I have the following working implementation:

type ParamType = { a: string, b: string } | { c: string }

if ('a' in params) {
  doSomethingA(params)
} else {
  doSomethingC(params)
}

The functions doSomethingA and doSomethingC each accept specific parameter types.

The issue arises when I modified a key within { a: string, b: string }, TypeScript did not raise an error on 'a' in params as expected. To address this, I made the following adjustments:

type A = { a: string, d: string }
type B = { c: string }
type ParamType = A | B

const testKey: keyof A = 'd'

if (testKey in params) {
  doSomethingA(params)
} else {
  doSomethingC(params)
}

However, now TypeScript does not correctly infer the type of params inside the if/else statement, resulting in:

Property 'd' is missing in type 'B' but required in type 'A'.

Is there a way to ensure that the key used in the if statement comes from type A while maintaining correct types within the if statement itself?

Answer №1

It seems like TypeScript may not currently support this feature. While using if ('d' in params) { helps narrow down types in if branches, even using

const testKey = 'd'; if (testKey in params) {
does not work, despite the fact that testKey is identical to 'd' in that scenario.

To address this limitation, you can develop a custom type guard function that verifies keys. However, you must manually define and repeat the keys within the implementation since types do not carry over into runtime code.

type A = { a: string, d: string }
type B = { c: string }
type ParamType = A | B

function isA(ob:A|B, key:keyof A | keyof B): ob is A {
    return new Set(['a', 'd']).has(key);
}

const g = (params:ParamType) =>  {
    const testKey:keyof A = 'a'

    if (isA(params, testKey)) {
        doSomethingD(params)
    } else {
        doSomethingC(params)
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am in need of assistance with incorporating a particular hibernate Inheritance mapping into my project

I am dealing with a situation where I have two classes, parent and child, with a self-referential relationship on the child side. The database is set up with separate tables for both parent and child, sharing the same "id", and using the column "holder" as ...

Tips for ensuring the angular FormArray is properly validated within mat-step by utilizing [stepControl] for every mat-step

When using Angular Material stepper, we can easily bind form controls with form groups like [stepControl]="myFormGroup". But how do we bind a FormArray inside a formGroup? Constructor constructor(private _fb: FormBuilder){} FormArray inside For ...

What is the syntax for declaring a state variable as a Set data type in programming?

Struggling to establish a state variable in React using Typescript. Encountering an error when attempting to specify its type as Set. The purpose of this variable is to contain an array of objects. const [blocksList, setBlocksList] = useState<Set>([ ...

What is the best way to include a router-link in a button click event in Angular 8?

Can someone please help me with adding a routing function to a button in Angular? I have already included a (click) function on the button, but how do I actually make the function navigate within the home.ts component? <button class="navbut" (click)= ...

Showing records from Firebase that are still within the date range

I'm currently developing an application that allows users to book appointments on specific dates. After booking, I want the user to only be able to view appointments that are scheduled for future dates. I've attempted to compare the date of each ...

Having trouble importing Bootstrap CSS into a TypeScript file

I'm having trouble importing the bootstrap css file from node_modules. It's not importing, even though I can import the scss file successfully. The following import is not working: import bs from "bootstrap/dist/css/bootstrap.css"; Ho ...

Troubleshooting the issue of React forms hook not functioning properly with Material UI Select input

How the Textfield below should load: How it actually loads: My Select component, created using Material UI and React form hook, is not loading the default value as expected. The component should start with a pre-selected value, which is provided in the c ...

Choose a specific div element from a collection of dynamically generated divs in Angular

I have been working on a code to dynamically generate div elements using the *ngFor directive. Here is what I have so far: <div *ngFor = "let item of Items"> <p>Item : {{item}} </p> </div> The challenge I encountered is that w ...

What is the best way to limit a property and template literal variable to identical values?

Instead of giving a title, I find it easier to demonstrate what I need: type Foo = "bar" | "baz"; interface Consistency { foo: Foo; fooTemplate: `${Foo} in a template`; } // This should compile (and it does) const valid1: Cons ...

Fetching all data from a SQLite database in a Listview using React Native

I have been utilizing the library found at https://github.com/andpor/react-native-sqlite-storage in my react native project. To retrieve a single row from the database, I use the following code: db.transaction((tx) => { tx.executeSql('SEL ...

Types are not appearing in @types/node

I have added @types/node to my project. In the index.ts file, the default node modules are being treated as type any. const fs = require('fs'); The type of fs is currently set to any. { "ts-node": { "cwd": "/User ...

Using setTimeout() and clearTimeout() alongside Promises in TypeScript with strict mode and all annotations included

Many examples of timer implementations using Promises in JavaScript seem overly complex to me. I believe a simpler approach could be taken. However, I am looking for a solution specifically tailored for TypeScript with the "strict": true setting and all ne ...

Update button Image upon click

Is there a way to swap the image on a button when it's clicked? I want my button to start with one icon, but then change to another icon once it has been clicked. How can I achieve this effect? Any suggestions on how to make this happen? Check out ...

Maximizing the potential of process.hrtime.bigint

Whenever I include the following code: const a = process.hrtime.bigint(); The linter says it's okay, but during compilation, I encounter this error message: error TS2339: Property 'bigint' does not exist on type 'HRTime'. This ...

What is the purpose of adding "/dist" to the library import statement?

Currently, I am in the process of developing a react component library using vite as my primary build tool. After successfully compiling the project and deploying it to the npm registry, I encountered an issue when importing it into my client app. Specifi ...

Error encountered: The database is not found during the migration creation process in MikroORM

Attempting to create migrations with mikroORM has been a challenge as I am unable to generate the table itself. The error message indicating that the database "crm" does not exist leaves me puzzled about what steps I may have missed. Here is the code snip ...

Exploring the world of chained JavaScript Promises for automatic pagination of an API

Dealing with a paged API that requires fetching each page of results automatically has led me to construct a recursive promise chain. Surprisingly, this approach actually gives me the desired output. As I've tried to wrap my head around it, I've ...

Click on the div in Ionic 2 to send a variable

<div class="copkutusu" (click)="kanalsil(kanalid,deneme)" #kanalid id={{ver.channelid}} #deneme id={{ver.channelapikey}}></div> I am requesting kanalid.id and deneme.id in my .ts file. Even though they are the same variable names, they repres ...

What is the process for importing types from the `material-ui` library?

I am currently developing a react application using material-ui with typescript. I'm on the lookout for all the type definitions for the material component. Despite attempting to install @types/material-ui, I haven't had much success. Take a look ...

Ensuring TypeScript's strict null check on a field within an object that is part of an

When using TypeScript and checking for null on a nullable field inside an object array (where strictNullCheck is set to true), the compiler may still raise an error saying that 'Object is possibly undefined'. Here's an example: interface IA ...