allow local module type declarations on separate files (similar to C .h files)

Search Terms

.d.ts definitions ambient module typing local

Suggestion

I would like to being able to compose typescript modules/components inside my application .i.e. src/components/Foo.ts and being able to declare its typings under src/components/Foo.d.ts where typescript would either infer those types automatically.

Disclaimer: It may happen that this is already possible, but I already researched everywhere and read the documentation as well as trying to declare ambient modules (which won't work with relative paths), so I am trying this as a last resort in case it's indeed not currently possible.

Use Cases

Sometimes, when creating components inside an application, some may have a quite extensive type set which usually makes the file difficult to read and take the focus away from the implementation.
Like so:

src/component/Foo.ts
##########################
#         type           #
#         type           #
#         type           #
#         type           #
#         type           #
#                        #
#    implementation      #
#    implementation      #
##########################

This would make it easier for the developer to organise their code similar to C's .h files separating the definition from implementation.

Examples

Project structure:

src/components
src/components/Foo.ts
src/components/Foo.d.ts
src/components/complex/index.ts
src/components/complets/index.d.ts

types are automatically inferred within the main module

src/components/Foo.ts

const bar:Bar = {foo:1,bar:2};
export default ...

src/components/Foo.d.ts

type Bar = {foo:number; bar:number; }
export type ExportedType = string[];

types can still be imported from a different component

src/components/Bar.ts

import type {ExportedType} from './Foo';
import type {Bar} from './Foo'; // < Error as Bar is not exported

This would result in:

src/component/Foo.d.ts                    src/components/Foo.ts
##########################                ##########################
#         type           #                #    implementation      #
#         type           #                #    implementation      #
#         type           #                #                        #
#         type           #                #                        #                        
#         type           #                #                        #
##########################                ##########################

Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

Use the proposed src/components/Foo.ts and src/components/Foo.d.ts example as the starting reproduction, including the imports shown in src/components/Bar.ts. First investigate how TypeScript currently resolves declarations for a relative module, then determine the expected visibility of Bar and ExportedType. Done means the separate declaration file is associated with Foo.ts while preserving the stated export behavior.