What is the best way to specify the type of a property that has already been assigned

Question

What is the best way to specify the type of a property that has already been assigned

I am currently utilizing a third-party library that includes a type defined as the following:

export interface ThirdPartyNodeType {
 id: string;
 name: string;
 data: any;
}

Upon further exploration, I have identified the content that I intend to include within the ThirdPartyNodeType.data:

export interface MyOwnDataProperties {
 foo: string;
 bar: string;
}

My question is, how can I inform TypeScript that I no longer wish for ThirdPartyNodeType.data to be of type any, but rather it should adhere to the structure defined in MyOwnDataProperties?

typescript typescript-typings

Answer 1

Answer №1

If you're open to using a wrapper around the type rather than directly modifying it, here's a workaround you can try: Create a subclass of the interface. One potential drawback of this approach is that if the third-party interface is the type of a value returned from a function in their codebase, and you wish to change the type to your wrapper type, you'll need to utilize a type assertion (as).

export interface ThirdPartyNodeType {
 id: string;
 name: string;
 data: any;
}

// Example of ThirdPartyNodeType instance
const sampleNode: ThirdPartyNodeType = {
    id: 'id',
    name: 'name',
    data: {}
}

// Your custom typing
export type YourData = {
    foo: string;
    bar: string;
}

// Interface extending another
export interface ExtendedThirdPartyNode extends ThirdPartyNodeType {
    data: YourData
}

// Applying custom typing
const extendedNode: ExtendedThirdPartyNode = sampleNode;

// Accessing property specific to ExtendedThirdPartyNode
extendedNode.data

Answer 2

If you're open to using a wrapper around the type rather than directly modifying it, here's a workaround you can try: Create a subclass of the interface. One potential drawback of this approach is that if the third-party interface is the type of a value returned from a function in their codebase, and you wish to change the type to your wrapper type, you'll need to utilize a type assertion (as).

export interface ThirdPartyNodeType {
 id: string;
 name: string;
 data: any;
}

// Example of ThirdPartyNodeType instance
const sampleNode: ThirdPartyNodeType = {
    id: 'id',
    name: 'name',
    data: {}
}

// Your custom typing
export type YourData = {
    foo: string;
    bar: string;
}

// Interface extending another
export interface ExtendedThirdPartyNode extends ThirdPartyNodeType {
    data: YourData
}

// Applying custom typing
const extendedNode: ExtendedThirdPartyNode = sampleNode;

// Accessing property specific to ExtendedThirdPartyNode
extendedNode.data

What is the best way to specify the type of a property that has already been assigned

Answer №1

Similar questions

Is there a way to dynamically retrieve a JSON element in Typescript?

What is the best way to generate a type that generates a dot notation of nested class properties as string literals?

Troubleshooting the problem of redirecting a website to www on IIS 10 (Windows Server 2019)

Using alternate variables in the watchQuery() function in Apollo Angular will generate the cached data

In the scenario where I have a nested readonly array within an object, what is the best way to duplicate that object and transform the array to allow for mutations (such as inserting into Akita)?

Typescript error: The property 'set' is not found on type '{}'

Typescript: How can we determine the data type of React Router Link?

Challenges with image cropping in Angular causing performance problems

Confounding Typescript Type Bindings

Is it possible to incorporate regular React JSX with Material UI, or is it necessary to utilize TypeScript in this scenario?

Mastering unit testing with Behaviour Subjects in Angular

Perplexed by the implementation of "require(...)" in TypeScript

Store a video file on your device's memory

What could be the reason for my dynamic image not appearing in a child component when using server-side rendering in Nuxt and Quasar

Encountered an error loading resource: server returned a 404 status code while utilizing Angular framework and deploying via GitHub Pages

Angular: Using ngrx for Nested HTTP Calls

When initiating an Ionic project, you may notice a repeated message in the terminal saying, "[INFO] Waiting for connectivity with npm..."

What is the reasoning behind TypeScript allowing the reading of an undefined variable within a closure?

Guide on utilizing "setFont" in jsPDF with UTF-8 encoding?

Display or conceal a button in Angular 6 based on certain conditions