Type annotation for all exports in the module

Search Terms

Export, typed exports, modules, Next.js, Redwood.js

Suggestion

Allow a new syntax From issue #420 that will allow typing all of exports in a module.

export implements {
  default: string
  foo: (bar: boolean) => number
}

export default "Hello world!";
export function foo(bar) { return 1 }

Use Cases and Examples

Increasingly frameworks are using named module exports as a way of organizing their code. For instance Next.js is using named exports to specify things like exported component and functions for fetching data:

import { PageModule } from 'next'

type Post = { title: string };
export implements PageModule<{ posts: Posts[] }>;

function Blog({ posts }) {
  return (
    <ul>
      {posts.map(post => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

export async function getStaticProps() {
  return { props: { posts: [] } }
}

export default Blog

Frameworks relying on named export

• Next.js
• Redwood.js
• Remix.js
• SevlteKit
• StroryBook
• CloudFlare Workers

• please suggest more

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.

Related issues

• https://github.com/microsoft/TypeScript/issues/420
• https://github.com/microsoft/TypeScript/issues/13626

Begin with the proposed syntax and the related issues #420 and #13626. Compare the requested behavior with the Next.js, Redwood.js, Remix.js, SvelteKit, Storybook, and Cloudflare Workers use cases; the issue names no target files or tests, so the syntax and implementation scope would need to be established first.