Determining the data type of an object property using a variable

Question

Determining the data type of an object property using a variable

I just joined a pre-existing project, where there are some global variables set by the backend. These globals are defined in an interface:

interface IGlobals {
    feature_foo: boolean
    feature_bar: boolean
    someOtherProp: string
}

const globals: IGlobals = {
    feature_foo: true,
    feature_bar: false,
    someOtherProp: 'hello'
}

My task now is to create a function that checks if a specific feature flag exists within these global variables. I have assumed that any property starting with feature_ will always be a boolean (which is true for our case):

// Use this as: `const isEnabled = useFeature('foo')`
function useFeature(feature: string): boolean {
  const featureKey = `feature_${feature}`

  if (globals.hasOwnProperty(featureKey)) {
    // Assuming globals starting with `feature_` are always booleans
    return globals[featureKey as keyof IGlobals] as boolean
  }

  return false
}

Although it works, I feel like it's somewhat of a workaround.
I find the as boolean statement particularly bothersome. I used it because otherwise TypeScript would rightly raise concerns that the value could be a boolean or string, which doesn't match the function's return type.

Is there a way to improve this?

I suspect that "lookups" may provide a solution, but I don't fully understand that concept.

typescript

Answer 1

Answer №1

Absolutely! You have the option to make this code fully type-safe without the use of a .hasOwnProperty lookup-

function useFeature(feature: 'foo' | 'bar'): boolean {
  const featureKey = `feature_${feature}` as const;

  return globals[featureKey];
}

Alternatively, you can achieve the same result with:

function useFeature(feature: 'foo' | 'bar'): boolean {
  return globals[`feature_${feature}`];
}

This method utilizes template literal types as keys, ensuring full type safety when the feature parameter is restricted to exact feature names. However, if you prefer more flexibility in checking the feature argument within an if statement, consider using this helper function for narrowing types-

function isValidFeature(x: string): x is 'foo' | 'bar' {
  return x === 'foo' || x === 'bar';
}

Don't forget to synchronize the feature list here with updates made in IGlobals!

With that in place, you can simply do-

function useFeature(feature: string): boolean {
  return isValidFeature(feature) && globals[`feature_${feature}`];
}

No need for casting, everything is thoroughly checked and type-safe.

Edit:- To enhance efficiency, establish a direct link between isValidFeature and IGlobals so that any updates to features in one location reflect in the other. This leads us into type level programming-

const _featureNames = ['foo', 'bar'] as const;
const featureNames: string[] = [..._featureNames];

type FeatureKeys = {
  [featureName in typeof _featureNames[number]]: `feature_${featureName}`;
}[typeof _featureNames[number]]

type Features = {
  [featureKey in FeatureKeys]: boolean;
}

interface IGlobals extends Features {
    someOtherProp: string;
    andAnotherOne: number;
}

declare const globals: IGlobals;

function isValidFeature(x: string): x is typeof _featureNames[number] {
  return featureNames.includes(x);
}

Now, updating feature names within the _featureNames tuple will automatically update everything else. Convenient!

Try it out on the playground.

Answer 2

Absolutely! You have the option to make this code fully type-safe without the use of a .hasOwnProperty lookup-

function useFeature(feature: 'foo' | 'bar'): boolean {
  const featureKey = `feature_${feature}` as const;

  return globals[featureKey];
}

Alternatively, you can achieve the same result with:

function useFeature(feature: 'foo' | 'bar'): boolean {
  return globals[`feature_${feature}`];
}

This method utilizes template literal types as keys, ensuring full type safety when the feature parameter is restricted to exact feature names. However, if you prefer more flexibility in checking the feature argument within an if statement, consider using this helper function for narrowing types-

function isValidFeature(x: string): x is 'foo' | 'bar' {
  return x === 'foo' || x === 'bar';
}

Don't forget to synchronize the feature list here with updates made in IGlobals!

With that in place, you can simply do-

function useFeature(feature: string): boolean {
  return isValidFeature(feature) && globals[`feature_${feature}`];
}

No need for casting, everything is thoroughly checked and type-safe.

Edit:- To enhance efficiency, establish a direct link between isValidFeature and IGlobals so that any updates to features in one location reflect in the other. This leads us into type level programming-

const _featureNames = ['foo', 'bar'] as const;
const featureNames: string[] = [..._featureNames];

type FeatureKeys = {
  [featureName in typeof _featureNames[number]]: `feature_${featureName}`;
}[typeof _featureNames[number]]

type Features = {
  [featureKey in FeatureKeys]: boolean;
}

interface IGlobals extends Features {
    someOtherProp: string;
    andAnotherOne: number;
}

declare const globals: IGlobals;

function isValidFeature(x: string): x is typeof _featureNames[number] {
  return featureNames.includes(x);
}

Now, updating feature names within the _featureNames tuple will automatically update everything else. Convenient!

Try it out on the playground.

Determining the data type of an object property using a variable

Answer №1

Similar questions

How can you eliminate the prop that is injected by a Higher Order Component (HOC) from the interface of the component it produces

What is the reason for the lack of template reference output from ContentChilden?

Is there a way to extract data from a single line?

Configuring global runtime variables in NextJS for server-side operations

Expanding upon TypeScript by inheriting interfaces

Efficient method of triggering an action on a subcomponent in React Redux without the need to pass props down the component tree

What is the reason for this assignment not being activated?

Angular mat-table experiencing issues with matToolTip functionality

TS - Custom API hook for making multiple API requests - incompatible type with 'IUseApiHook'

Redux ConnectedProps will always have a type of never

Breaking down large reducer into smaller reducers

The Angular Universal error arises due to a ReferenceError which indicates that the MouseEvent is not

Building a custom CellRenderer in AGGrid using TypeScript within a React environment

Showcasing a single object in an IONIC/Angular application using the ngIF directive

Tally up identical words without considering differences in capitalization or extra spaces

Unable to transfer object from Angular service to controller

Retrieving JSON Information in HTML using Angular 4

Using React Router DOM's History Object in Typescript Triggers an Error

Choosing a value type within an interface or object declaration

"Embrace the powerful combination of WinJS, Angular, and TypeScript for