Exporting an extended interface to allow for interoperability

Question

Exporting an extended interface to allow for interoperability

I have a problem with exporting an interface called Person. I recently added a new property to it, but when I try to export it, I encounter the following error message:

'Person' only refers to a type, but is being used as a value here.

.

// test.d.ts
interface Person {
  age: number,
  name: string
}

interface Person {
  canCode: boolean
}

export Person // => 'Person' only refers to a type, but is being used as a value here.

// test.ts
import { Person } from './test' // => Module '"./test"' declares 'Person' locally, but it is not exported.

const myPerson: Person = {
  age: 17,
  name: 'Roman',
  canCode: true
}

Can someone please help me fix this issue?

Additional Information

Language:

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3878a83968090819a8387b3c7ddc2ddc1">[email protected]</a>

Editor:

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b6a7f64664b3a253e38253b">[email protected]</a>

Editor Typescript package:

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8a9bca7a5e5bcb1b8adbbabbaa1b8bc88f9fce6f9e6fa">[email protected]</a>

(which is using

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72060b02170111001b020632465c425c41">[email protected]</a>

)

I have already checked all the code and suggestions in VSC, but the issue still persists.

typescript interface export

Answer 1

Answer №1

When using the export keyword by itself, it expects a value to be exported. However, in this case, the Person is just a type.

To address this issue, you can simply use export interface.

export interface Person { ... }

By exporting the interface (identified by its name), you are able to perform additional declaration merging as follows:

export interface Person { age: number }
interface Person { name: string }

This will merge the different aspects of Person together and export it as a unified interface from the module.

Answer 2

When using the export keyword by itself, it expects a value to be exported. However, in this case, the Person is just a type.

To address this issue, you can simply use export interface.

export interface Person { ... }

By exporting the interface (identified by its name), you are able to perform additional declaration merging as follows:

export interface Person { age: number }
interface Person { name: string }

This will merge the different aspects of Person together and export it as a unified interface from the module.

Exporting an extended interface to allow for interoperability

Additional Information

Answer №1

Similar questions

Error message during ng Build Prod: Component declared in two modules when it should be in the same module

Ways to retrieve the most recent update of a specialized typing software

incorrect implementation of react lifecycle phases

Angular: use an icon in place of text

Issue with displaying Angular index.html page post-build

Why does the custom method only trigger once with the addEventListener?

Having trouble locating the name WebGLObject in my TypeScript code

Utilize variable as both a function and an instance of a class

RxJS BehaviorSubject allows you to retrieve the current value or obtain a new one depending on a specific condition

Utilizing NestJS to efficiently share an end-to-end server across multiple test suites

Handling JSON data with Reactive Extensions in JavaScript

Extract nested values within objects and arrays, and return the complete type of the original object

Sorting an array of objects in Typescript using a dynamic property name for generics

Error message: "Mismatched data types in Formik errors when utilizing TypeScript"

GitHub Alert: Invalid format for environment variable

Is it recommended to utilize the `never` type for a function that invokes `location.replace`?

What is the best way to determine which function to invoke in ngIf?

Uh-oh! An unexpected type error occurred. It seems that the property 'paginator' cannot be set

What is the best way to troubleshoot a quasar typescript file type error?

Drag and drop functionality in Angular 2 using TypeScript