Is it feasible to utilize just one attribute from an external Typescript interface?

Question

Is it feasible to utilize just one attribute from an external Typescript interface?

Currently, I've incorporated semantic-ui-react into my React project, which provides Typescript typings.

Let's take a look at an illustrative type file they offer: Flag.d.ts.

import * as React from 'react';

export interface FlagProps {
  [key: string]: any;

  /** A designated element type for rendering (string or function). */
  as?: any;

  /** Extra classes to apply. */
  className?: string;

  /** Desired country flag name, using either the two-digit code, full name, or common alias. */
  name: 'ad' | 'andorra' | 'ae' | 'united arab emirates' | ...
}

declare const Flag: React.StatelessComponent<FlagProps>;

export default Flag;

In my particular project structure, there exists a user model with a country attribute. I am keen on adopting the name property of FlagProps as the type for my country entry. Initially, I attempted the following approach...

let UserProps: {
    name: string,
    age: number,
    country: FlagProps.name
}

Similarly, I endeavored to construct an array of country codes...

const countryCodes: Array<Flagprops.name> = [...]

Unfortunately, in both instances, an error arises displaying error TS2702: FlagProps' only refers to a type, but is being used as a namespace here.

Is it viable to exclusively utilize a segment of the FlagProps interface without causing conflicts?

typescript

Answer 1

Answer №1

FlagProps.name is a variable, not a type. It cannot be used as a type just like UserProps.name.

One possible solution is shown in the code snippet below:

class UserProps {
    name: string;
    age: number;

    get country() {
        return this.flagProps.name;
    }

    set country(value) {
        this.flagProps.name = value;
    }

    private flagProps: FlagProps = { name: 'us' };
}

This approach allows for the inference of the underlying type of FlagProps.name in the getter and setter.

let x = new UserProps();

x.country = 'au';      // Works fine.  :)
x.country = 'foobar';  // Results in an error.

Answer 2

FlagProps.name is a variable, not a type. It cannot be used as a type just like UserProps.name.

One possible solution is shown in the code snippet below:

class UserProps {
    name: string;
    age: number;

    get country() {
        return this.flagProps.name;
    }

    set country(value) {
        this.flagProps.name = value;
    }

    private flagProps: FlagProps = { name: 'us' };
}

This approach allows for the inference of the underlying type of FlagProps.name in the getter and setter.

let x = new UserProps();

x.country = 'au';      // Works fine.  :)
x.country = 'foobar';  // Results in an error.

Is it feasible to utilize just one attribute from an external Typescript interface?

Answer №1

Similar questions

How to detect changes in Angular 2 using a separate service

Issues with Tagged Union Types in Visual Studio Code

Setting up CORS for Azure Active Directory

Converting ts files to js: A comprehensive guide

Creating definitions for nested objects in TypeScript

Different methods to prompt TypeScript to deduce the type

`The process of converting Typescript to ES5 through compiling/transpiling is encountering issues`

Unpacking intricate function arguments in TypeScript

Troubleshooting Angular Toaster issues with TypeScript

What is the standard approach for indicating the lack of a specific attribute?

Best practices for managing backend errors with Next.js 14

Angular: The Ultimate Guide to Reloading a Specific Section of HTML (Form/Div/Table)

Navigating the parent scope in Angular using TypeScript

Exploring an array of objects to find a specific string similar to the one being

Analyzing elements within an array using Angular 4

Reacting like sticky bottoms and tops

Could you confirm if this is a TypeScript function?

build a key-value pair collection in Angular 2

The error message displayed in the Typescript Playground is stating that there is no property named 'values' on the type 'ObjectConstructor'

What is the best way to export Class methods as independent functions in TypeScript that can be dynamically assigned?