Imagine the folder/directory structure outlined below.
[src: App]
|
+ tsconfig.json
+ [@types]
|
+ index.d.ts (contains type aliases and interfaces for App)
+ AppSharedCode.ts (code shared by *.ts files in subdirectories)
+ [ThingCreator]
|
+ ThingCreator.ts
+ tsconfig.ts
+ [ThingUser]
|
+ ThingUser.ts
+ tsconfig.ts
[Lib]
|
+ tsconfig.json
+ [@types]
|
+ index.d.ts (contains type aliases and interfaces for Lib)
+ [src]
|
+ myLib.ts
The project showcases two web app components, one creating a meeting agenda and another using it. To avoid naming conflicts, the main *.ts files were separated into subdirectories with their own tsconfig.json files. There are total of four tsconfig files used.
A directory named @types houses an index.d.ts file which was intended to enhance understanding of TypeScript usage in VS Code during the transition from JS to TS. Unfortunately, this approach did not prove helpful.
In my *.ts files, I can type variables that represent HTML DOM elements without importing the declarations from lib.dom.d.ts. For example:
let taElem: HTMLTextAreaElement;
If we consider the contents of the index.d.ts file under the App src/@types:
declare module "AgendaTypes" {
interface IAgendaItem {
headline: string;
children: IAgendaItem[];
meetingNote: string;
}
}
And within the AppShareCode.ts file:
import AgendaTypes from "AgendaTypes";
To utilize IAgendaItem in the ts source, dot notation must be used or declarations should be made within a namespace:
let anItem: AgendaTypes.IAgendaItem;
Some questions arise:
- What is the correct way to declare/export type aliases/interfaces in declaration files so they are visible throughout the project for the compiler? Can all interface/type alias definitions be enclosed in braces for simplified usage without dot notation?
- How can the names of type aliases and interfaces be accessed between *.ts files in the App and the Lib sources? Is there a tsconfig setting or do we require import statements?
- Regarding global variables, should they be collected and defined with type aliases/interfaces in a *.d.ts file or gathered in a single *.ts file?
I have encountered challenges when trying to import the Lib code. Despite setting composite as true in all tsconfig files and referencing paths in the root tsconfig file, the issue persists.
As I delve into TypeScript amidst a comprehensive effort to convert JavaScript projects, I acknowledge the discipline it brings to JavaScript development.
Note: A shorter version of this post was initially planned but ended up being discarded during revision.
Several related threads on similar topics lacked definitive answers or clarifications from the posters. One somewhat relevant answered thread can be found here.