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

[kentcdodds]

I didn’t notice this issue when I opened: https://github.com/microsoft/TypeScript/issues/46942

There are a few more details for use cases and an alternative syntax, but I don’t really care too much about the specific syntax. I just want the feature. 😃 You’ve got a 👍 from me!

[balazsorban44]

You can add Remix to this category

https://blog.remix.run/p/remix-preview

It will export a load function similar to Next.js’s getServerSideProps