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

提案されている構文と、関連する issue #420 および #13626 から始めてください。要求されている動作を、Next.js、Redwood.js、Remix.js、SvelteKit、Storybook、Cloudflare Workers のユースケースと比較してください。この issue では対象ファイルやテストが指定されていないため、まず構文と実装範囲を確定する必要があります。