TypeScript recommended project structure with modules

Question

I am new to TypeScript, but I have experience developing in Java, and I wonder what the recommended file structure for writing in TypeScript is, especially when it comes to modules.

Let's say I have a few modules: ui.dashboard, ui.models, util.eventsand util.common.

Each of these modules can contain several classes. In Java, I will have the following file structure (where <base>is the base package for the project, for example, com.my.app):

src/<base>/ui/dashboard/<file per class>
src/<base>/ui/models/<file per class>
src/<base>/util/events/<file per class> 
src/<base>/util/common/<file per class>'

On the other hand, in TypeScript, I see two main ways to do the same:

Flat design:

src/ui.dashboard.js
src/ui.models.js
src/util.events.js
src/util.common.js

Here, each file contains a module definition with all the corresponding classes. This is normal, but then the files become large and difficult to manage.

Hierarchical design

, Java, TypeScript ( ) , gulp/grunt, .

Java , , , , /IDE.

?

Answer 1

: ES6 , .

, , . , .

:

src/ui/dashboard/Class1.ts
src/ui/dashboard/Class2.ts
src/ui.dashboard.ts

src/ui/dashboard/Class1.ts :

export class Class1 {}

src/ui.dashboard.ts :

import {Class1} from './ui/dashboard/Class1';
import {Class2} from './ui/dashboard/Class2';

export default {
    Class1: Class1,
    Class2: Class2,
    randomFunction: () => {},
}

, , .

ECMAScript 6 / . . https://esdiscuss.org/topic/moduleimport#content-0