What are the repercussions of labeling a function, TypeScript interface, or TypeScript type with export but never actually importing it? Is this considered poor practice or is there a potential consequence?

I find myself grappling with a seemingly straightforward question that surprisingly has not been asked before by others. I am currently immersed in a TypeScript project involving Vue, and one of the developers has taken to labeling numerous interfaces and methods with export even though they are not utilized elsewhere in the application. An example of this is 

export interface CustomStageEvent
.

What implications come with marking something as export? Is it worth concerning ourselves with whether an exported item goes unused in our codebase?

Appreciate your insights,

typescriptvue.jsecmascript-6export

Answer №1

When you make an API public, such as this one does, it comes with a cost - once it's out there, you can't change or remove it without potentially breaking someone's code. This is because users may be relying on your API, and any alterations could cause problems for them.

A prime example of this issue is the removal of sun.misc.Unsafe from Java, which took a significant amount of time due to the potential impact on existing code. Even though documentation explicitly warned against using it, so many developers still depended on it that the removal attempt failed. This serves as a cautionary tale about the consequences of exporting APIs without considering the long-term implications.

Exporting an API means making a commitment to its users. Only share APIs for which you are willing and able to stand by your promises.

Answer №2

In addition to the insightful response from @Jorg W Mittag, when considering performance implications, it seems that marking something as exported or not may not have a significant impact.

Even if you designate certain parts of your module as exported or not, the JS runtime will still parse the entire module.

It is likely that your memory usage will remain unchanged, as the module will retain references to internal methods regardless. It is uncertain whether reducing the number of internal methods that are not called within the module would result in a smaller memory footprint, as these unused methods could potentially be removed.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting Bootstrap 4 Modal in JavaScript and Vue: Uncaught ReferenceError: $ is not defined

I'm struggling to figure out how to trigger a Bootstrap 4 modal from my Vue 3 app using JavaScript. Whenever I try to launch the modal, I keep encountering this error message: $ is not defined at eval When looking for solutions, I noticed that most a ...

javascriptvue.jsbootstrap-4

Pass additional parameter while calling a function in Vue

Visit Element on GitHub Check out the upload component <el-upload class="avatar-uploader" action="/upload" :show-file-list="false" :on-error="handleUrlError" :on-success="handleUrlSuccess"> <i v-else class="el-icon-plus avatar-uploade ...

javascriptvue.jsvuejs2vue-componentelement-ui

Error encountered: Module 'redux-saga/effects' declaration file not found. The file '.../redux-saga-effects-npm-proxy.cjs.js' is implicitly typed as 'any'. Error code: TS7016

<path-to-project>/client/src/sagas/index.ts TypeScript error in <path-to-project>/client/src/sagas/index.ts(1,46): Could not find a declaration file for module 'redux-saga/effects'. '<path-to-project>/client/.yarn/cache/red ...

node.jsreactjstypescriptreact-redux

ES6 allows for the retrieval of method data within an object

My goal is to improve the organization of my code by creating a config file where I can use the same method to set values. This is just a demonstration, so please keep that in mind. I'm wondering if there's a way to call a function based on wheth ...

javascriptecmascript-6

Enhance User Experience: Implement Asynchronous Loading of Vue Components in Laravel 5.6 using laravel-mix and webpack

Laravel 5.6.21 NPM 6.1.0 Node 10.5.0 Webpack 3.12.0 Seeking guidance on how to correctly set up laravel-mix, webpack, and babel to enable lazy-loading of vue components using the technique outlined in Lazy Loading Routes. In particular, implementing stag ...

laravelvue.jslazy-loadingvue-routerlaravel-mix

The react decorator for maintaining type safety fails to identify the appropriate ReturnType of the supplied function

I want to enhance the redux connect feature by using it as a decorator for a specific reducer/state. Although I know that redux connect can already be used as a decorator, I am curious about why my custom implementation does not work the way I expect. Her ...

reactjstypescriptdecorator

What is the best way to dynamically add a class to the right navigation element in Vue.js when the :class binding only accepts boolean values?

My issue involves implementing a fixed navigation bar with the following structure: <nav class='navigation'> <div :class="{ active: }" @click='scrollTo(".test1")'></div> <div :class=" ...

javascriptvue.js

What is the proper type declaration for incoming data from the backend in my TypeScript code when using axios?

In the TypeScript code snippet provided, the type for 'e' (used in the function for form submission) has been figured out. However, a question arises if this type declaration is correct. Additionally, in the catch block, the type "any" is used fo ...

javascripttypescriptnext.js

Angular obtains an undefined response from a service

Having trouble retrieving the data from my service. Working with Angular 8. Here's the code snippet: Within the service: query(url: string) { this.subscription = this.socket$.subscribe( (message) => { return message; }, ...

angulartypescript

Is there a way to programmatically control a Bootstrap Dropdown in Angular?

Need help with opening and closing a Dropdown in my View using my typescript class. Any suggestions on how to achieve this? Appreciate any assistance! <div ngbDropdown class="d-inline-block"> <button class="btn" id=&quo ...

angulartypescriptbootstrap-5

What is the best way to hide or show child elements within dynamically added components that are created using v-for loop in Vue.js

In this code snippet, there is a header text and some child elements. The goal here is to have the child elements toggle (hide/unhide) when the header is clicked. For instance, clicking on Spanish01 should hide all its children, and clicking it again shoul ...

vue.js

How can we leverage mapped types in TypeScript to eliminate properties and promisify methods?

Below is the provided code snippet: class A { x = 0; y = 0; visible = false; render() { return 1; } } type RemoveProperties<T> = { readonly [P in keyof T]: T[P] extends Function ? T[P] : never//; }; type JustMethodKe ...

typescripttypescript-typingsmapped-types

Importing an array of Vue components to be exported and utilized in the app.js file

I'm currently working on a Laravel 8 project with vue.js v2.6 and I want to clean up my app.js file by moving all of my Vue.component() declarations to a separate file. To achieve this, I created js/vueComponents.js where I placed all the vue componen ...

javascriptvue.js

Using Vue to bind data without the colon syntax or shorthand specification

Is there a method in Vue to avoid using shorthand or colon? I'm experiencing difficulties implementing it with React-Dom for server rendering in Node.js. https://i.stack.imgur.com/RHJXK.png ...

vue.jsreact-dom-server

What steps should I take to verify the validity of an Angular form?

I am struggling with validating an inscription form in HTML. Despite trying to implement validations, the inputs are still being saved in the database even when they are empty. Here are the validations I want to include: All inputs are required Email addr ...

javascriptangulartypescriptforms

Inheritance-based type inference

I have created a class hierarchy to manage inheritance in my code. Here is an example of how it looks: class A { clone(): A { return new A() } methodA() { return this.clone() } } class B extends A { clone(): B{ return new B() } ...

typescript

Setting a TypeScript collection field within an object prior to sending an HTTP POST request

Encountered an issue while attempting to POST an Object (User). The error message appeared when structuring it as follows: Below is the model class used: export class User { userRoles: Set<UserRole>; id: number; } In my TypeScript file, I included ...

javascriptangulartypescript

Choosing from the options provided in a dropdown menu within a vertical column in the v-data-table

I am working on implementing a drop-down menu with multiple options within a v-data-table component. <v-data-table :headers="headers" :items="res" :options.sync="options" :server-items-length="totalRes" :loading="loading" ...

vue.jsvuejs2vue-componentvuetify.js

Testing the Compatibility of Angular JS and Angular 8 in a Hybrid Application

I am currently working on a hybrid application using AngularJS and Angular 8. The new components I create in Angular need to be downgraded for use in AngularJS. Here is a snippet of the module code: @NgModule({ // Declarations and Imports providers ...

angularjsangulartypescriptunit-testingkarma-jasmine

Issue encountered when working with Next Auth and TypeScript: The argument type 'string | undefined' cannot be assigned to the parameter type 'string | Buffer'

Encountering a TypeScript error that states: "Argument of type 'string | undefined' is not assignable to parameter of type 'string | Buffer'." An attempt to integrate NextAuth into a Next.js 14 application and configure logi ...

typescriptnext.jsnext-authcredential-providers