What is the significance of importing from the parent directory in TypeScript?

During my TypeScript project in VSCode, I decided to import an interface from another file. To my surprise, when I allowed VSCode to automatically insert the import statement, it appeared as follows:

import { IOAdapter } from '..';

I was actually anticipating something like this instead:

import { IOAdapter } from '../adapters/IOAdapter.ts';

This .. syntax seemed unfamiliar to me. Can you explain how it functions?

My TypeScript version is 3.4.1.

Update: The solution provided by @Paleo turned out to be correct. Refer to my comment on his answer for further details on why I was confused.

typescriptmodule

Answer №1

By default, when a directory is imported in TypeScript, it will import the file index.ts.

The import statement you are using is essentially the same as: ../index.

It's important to note that while this behavior is widely recognized, there is no official confirmation of it in the TS specification. It does work like this, but whether or not it's considered best practice is still up for debate.

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

Creating a JSON utility type for an already existing type, such as JSON<SomeExistingType>

Is there any tool or utility available that can accomplish this task? const foo: Foo = { ... } const bar: string = JSON.stringify(foo) const baz: JSON<Foo> = JSON.parse(foo) JSON<Foo> would essentially mirror all the properties of Foo, with th ...

jsontypescript

Tips for ensuring session token verification remains intact upon reloading

I am currently in the process of developing a website using the Next.js framework and I am seeking advice on how to prevent the reload effect that occurs when transitioning from the login page back to the main page for just a fraction of a second. Below i ...

javascriptreactjstypescriptnext.jsreact-hooks

Error message encountered in Typescript eslint: File extension "ts" is missing in import statement for the specified file

I am encountering an issue with my Node/Express application created using Typescript. The problem lies in eslint throwing an error that says: Missing file extension "ts" for "./lib/env" import/extensions Below is the content of my .eslintrc file: { ...

node.jstypescripteslint

Comparison between typings and @types in the NPM scope

There are different approaches when it comes to handling TypeScript definitions. In some cases, the typings tool is used, as seen in projects like angular/angular2-seed. Alternatively, some projects use scoped NPM packages with the prefix @types, complete ...

typescriptnpmtypescript-typings

Angular 10 encountering an issue with subject instantiation

I am encountering an issue with my Angular application. Everything runs smoothly with `ng serve`, and the application builds correctly using `ng build --prod`. However, when I attempt to run the generated sources in the browser, an error occurs: TypeError: ...

angulartypescriptrxjsangular10

What sets Babel and TypeScript apart from each other in terms of functionality and features?

While TypeScript was utilized to create Angular2, Babel also appears quite similar. Many established companies prefer Babel over TypeScript. Here are some questions to consider: What specific advantages does each one offer? Which is a better or worse ch ...

javascripttypescriptbabeljs

Specialized purpose for typed arrays

Given an array containing elements of two different entities: interface A { type: string } interface B { type: number } const a = {} as A const b = {} as B const array = [a, b] The array is of type (A | B)[] How can we create a utility type that ...

typescript

Can we improve the coding of this as it seems inefficient and uses up too much room?

Do you think there is a more efficient way to write this code? It seems quite impractical and takes up a lot of space. Essentially, it's about the random chance of obtaining a rarity, like acquiring an Uncommon sword. if (Math.random() * 100 < 100 ...

javascripttypescriptcode-cleanup

Using TypeScript to handle text resolution through the command line interface

Currently, I am developing a CLI application using TypeScript and employing enquirer for the purpose. More information about enquirer can be found here. In my project, I have a JSON object defined as follows: const person = { name: 'Mohan', ...

javascriptnode.jstypescript

Is it considered an anti-pattern in TypeScript to utilize BehaviorSubject for class or object properties?

When working with Angular, I find myself frequently displaying members of classes in an Angular HTML template. These classes often share common members structured like this: class Foo { bar: string; bas: Date; } There are instances where I need to ...

angulartypescriptrxjs

Utilizing a navigation menu to display various Strapi Collection pages within a single Angular Component

I have set up a collection in Strapi called Pages and I am looking to display them in the same component using my Navigation Bar Component. However, I am unsure of how to achieve this. Currently, all the data from the Collection is being displayed like th ...

angulartypescriptstrapi

Using the differences of discriminated unions

Consider the scenario where discriminated unions and associated types are defined as follows: type Union = 'a' | 'b'; type Product<A extends Union, B> = { f1: A, f2: B}; type ProductUnion = Product<'a', 0> | Produ ...

typescriptdiscriminated-uniontypescript-types

Typescript input event

I need help implementing an on change event when a file is selected from an input(file) element. What I want is for the event to set a textbox to display the name of the selected file. Unfortunately, I haven't been able to find a clear example or figu ...

htmlangulartypescriptinputonchange

The data type '{}' cannot be assigned to the type 'WebElement'

Background: I am in the process of updating the end-to-end tests to utilize async/await functionality. However, when attempting to modify the function (with a return type promise.Promise < WebElement>) to be asynchronous and calling it from the test, ...

typescriptselenium-webdriverpromiseprotractor

Navigating the complexities of integrating Rollup, ES modules, TypeScript, and JSX can be a challenging endeavor due to

Lately, I've been learning about the tools mentioned in the title. However, I've encountered some bumps along the way, so I'm turning to StackOverflow for help. My Requirements I need something like Rollup to pack my stuff For bare module ...

javascriptnode.jsreactjstypescriptrollupjs

Ignoring setTimeout() function within forEach() in Angular leads to issues

I am currently working on the frontend development of a Web Application using Angular. My task involves saving data from an array into a database by making repeated API calls until all the array data is processed. I implemented the use of setTimeout() in ...

angulartypescript

printer.printFile function is generating a blank output

Utilizing the compiler API for Typescript code generation, I encountered an issue where printer.printFile consistently outputs empty strings. Despite successfully using printer.printNode and printer.printList to print my AST, printer.printFile remains unco ...

typescript

Modify the JSON file without using a library

I am dealing with a file called test.json Here is what it contains: [ { "data_on": { "vals_e": "", "vals_o": "" }, "data_off": { "vals_d": "" ...

javascriptnode.jsjsontypescript

Updating data in Angular reactive forms using asynchronous dropdowns

I am currently developing an Angular application and have encountered an issue that I am unable to resolve by solely reading the documentation. One of the components in my application is responsible for displaying a form: https://i.stack.imgur.com/p5KEU. ...

angulartypescriptrxjsangular-reactive-forms

Please provide a declaration or statement when using the subscribe() method in TypeScript 3.0.1

I'm encountering a "declaration or statement expected" error after updating TypeScript and Angular. getTopics() { this._dataService.getTopics().subscribe(res => { this.topics = res; for (let i = 0; i < this.topics.length; i ...

angulartypescriptsubscription