Resolve Typescript file by using folder name

Question

I'm porting my code from ES6 to .TS / .TSX

Given a folder structure like this:

Table/Tables.tsx

Importing from another react component in ES6 I used to be able to just do this:

import Table from '../Table'

i.e. it would be smart enough to resolve the import by folder name. Now that I've switched to Typescript I have to import more verbosely (from another .tsx file);

import Table from '../Table/Table'

I've looked here https://www.typescriptlang.org/docs/handbook/module-resolution.html

I'm using Webpack with React Starter Kit.

dark_ruby · Accepted Answer · 2018-06-04 22:17:43Z

3

Inside each folder you wan to import, have an index.ts file with all exports of that folder. Then you will be able to import individual components by only specifying folder path

import {table} from ../table/

answered Jun 4, 2018 at 22:17

dark_ruby

7,8837 gold badges39 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Damian Green Over a year ago

ok that's helpful, I was trying to avoid having another file as I am following the one folder one ocmponent convention, so I could just rename my component to index.ts in this case.

Damian Green · Accepted Answer · 2018-06-27 14:06:40Z

2

I actually found the same question, asked a bit differently here

The package.json modification didn't work for me, so I just changed my convention to naming the component Index.tsx in each subfolder.

answered Jun 27, 2018 at 14:06

Damian Green

7,5952 gold badges36 silver badges47 bronze badges

Collectives™ on Stack Overflow

Resolve Typescript file by using folder name

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related