The most effective method of exporting types from a declaration file to an external project

Question

The most effective method of exporting types from a declaration file to an external project

I have successfully implemented a method to export types defined in a declaration file for use within my project and for exporting to external projects.

The strategy that worked for me was wrapping the type in a namespace.

Project X on Github

@types/index.d.ts

declare namespace projectGlobal {
  interface Person = {
    name: string;
    age: number;
  }
}
// additional local types here, but unable to export...
interface Local {
  func: () => string
}

src/index.ts

export type Person = ProjectGlobal.Person; // Exporting is only successful when referenced through namespace.
// export type Local = Local; // Unable to export successfully

const person1: Person = {
  name: 'john',
  age: 45
}

Project Y on Github

import {Person} from 'projectx';

const person1: Person = {
  name: 'john',
  age: 45
}

Although satisfied with this solution, I am curious to learn if there is a preferred best practice for achieving this.

typescript typescript-declarations

Answer 1

Answer №1

Using declaration files in this manner is not recommended. Generally, declaration files are not even written at all. There are specific situations where writing them may be necessary:

If you have a JavaScript library and want TypeScript users to utilize it, you can create declarations for the library instead of rewriting it entirely in TypeScript.
At times, you may need to declare global entities. For instance, in React projects importing data from image files like .png, .jpg, etc., requires declaration files to tell TypeScript about these non-module files:

declare module '*.jpg' {
  const url: string
  export default url
}

In most cases, regular .ts files suffice:

export type Person = {
  name: string
  age: number
}

const person1: Person = {
  // ...
}

If you see no reason not to use declaration files or if you require a separation between types and logic, consider creating separate files such as types.ts and do-stuff.ts, then simply re-export everything using an index.ts:

// types.ts
export type Person = {
  name: string
  age: number
}

// do-stuff.ts
import { Person } from './types'

const person1: Person = {
  // ...
}
export default person1

// index.ts
export * from './types'
export { default } from './do-stuff'
// This line allows exporting named exports explicitly 
export * from './do-stuff'

Answer 2

Using declaration files in this manner is not recommended. Generally, declaration files are not even written at all. There are specific situations where writing them may be necessary:

If you have a JavaScript library and want TypeScript users to utilize it, you can create declarations for the library instead of rewriting it entirely in TypeScript.
At times, you may need to declare global entities. For instance, in React projects importing data from image files like .png, .jpg, etc., requires declaration files to tell TypeScript about these non-module files:

declare module '*.jpg' {
  const url: string
  export default url
}

In most cases, regular .ts files suffice:

export type Person = {
  name: string
  age: number
}

const person1: Person = {
  // ...
}

If you see no reason not to use declaration files or if you require a separation between types and logic, consider creating separate files such as types.ts and do-stuff.ts, then simply re-export everything using an index.ts:

// types.ts
export type Person = {
  name: string
  age: number
}

// do-stuff.ts
import { Person } from './types'

const person1: Person = {
  // ...
}
export default person1

// index.ts
export * from './types'
export { default } from './do-stuff'
// This line allows exporting named exports explicitly 
export * from './do-stuff'

The most effective method of exporting types from a declaration file to an external project

Project X on Github

Project Y on Github

Answer №1

Similar questions

Challenges arise when dealing with generics in TypeScript

What is the best method to incorporate a function in React using Typescript?

Best practice for incorporating the cq-prolyfill third-party JavaScript library into an Angular 5 application

Angular's custom validator consistently returns a null value

What is the best method to create a TypeScript dictionary from an object using a keyboard?

Selecting the checkbox to populate the input field

Error encountered in Angular Html2Pdf: Unable to assign the 'adoptedStyleSheets' attribute on 'ShadowRoot' due to DOMException

Separate an HTML tag along with its content at the caret position into several distinct tags

Exploring Polymorphism in Typescript through Data Model Interfaces

When you utilize useSelector, the state may be returned as undefined even after it has been initialized

What are some recommended strategies for incorporating nested routes with separate pages in a React application?

Jest and Typescript: A guide to mocking the Date object

Is it possible to capture and retain data, then transmit it x seconds after the initial data capture?

There seems to be an issue with the router and canActivate class in Angular 2.0.1. The LoginGuard is not functioning properly and

How can I verify the validity of a regular expression in Typescript without encountering a syntax error?

What is the best way to dynamically add or utilize a pipe in Angular 8?

Adding custom TypeScript classes to an Electron project is a straightforward process that allows developers to enhance their

The issue lies in attempting to assign an 'Observable<number[]>' to a parameter expecting an 'Observable<ProjectObject[]>'. This obstacle must be overcome in order to successfully create a mock service

Angular: When making an HTTP GET request, receiving an OPTIONS 405 error message indicating that the method is

Having trouble establishing a connection with the C# Controller when processing the frontend request