Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Suport d.ts output (global declarations) #24

Closed
cometkim opened this issue Feb 11, 2020 · 7 comments · Fixed by #47
Closed

Feature: Suport d.ts output (global declarations) #24

cometkim opened this issue Feb 11, 2020 · 7 comments · Fixed by #47
Assignees
Labels
enhancement New feature or request

Comments

@cometkim
Copy link
Owner

No description provided.

@cometkim cometkim added enhancement New feature or request help wanted Extra attention is needed good first issue Good for newcomers labels Feb 11, 2020
@cometkim cometkim self-assigned this Feb 11, 2020
@cometkim cometkim mentioned this issue Feb 16, 2020
6 tasks
@andyfangaf
Copy link

andyfangaf commented Feb 18, 2020

Not having to manually import the types would be amazing. Would make this plugin a no brainer for every Gatsby dev.

@cometkim
Copy link
Owner Author

It seems to not able to be done with only codegen configurations. (Or I couldn't figure out how)

The simplest way I found is:

  1. Use the noExport: true option.
  2. Find all type|interface definitions and prepand the declare keyword.
  3. Make file extension to '.d.ts' instead of '.ts'

@cometkim
Copy link
Owner Author

cometkim commented Feb 28, 2020

Obviously, Flow can also use a global declaration, so this new option should be treated as a mixed config, not a new language.

The codegen's Flow plugins don't support noExport option yet. I can preferentially release the TypeScript support during waiting for it or contributing directly.

@cometkim
Copy link
Owner Author

If the declaration scope is global, some declaration like File is conflicted.

In order to use a declaration, it must specify namespace scope or using the global namespace with a prefix to avoid conflicts.

flow has no namespace syntax, so it must use prefixes.

@cometkim cometkim removed good first issue Good for newcomers help wanted Extra attention is needed labels Mar 2, 2020
@cometkim cometkim changed the title Suport d.ts output (global declarations) Feature: Suport d.ts output (global declarations) Mar 3, 2020
cometkim added a commit that referenced this issue Mar 8, 2020
Changed generated types to the global declaration as default, so it can be used without manual imports.

And use a namespace(default is `GatsbyTypes`) to avoid type conflicts with other global declarations. It doesn't allow undefined or empty string, after the upgrade, every typenames in user codebase will be changed by the namespace.

```tsx
import type { SEOQuery } from '~/src/__generated__/gatsby-types';

function SEO() {
  const data = useStaticQuery<SEOQuery>(
    graphql`
      query SEO { ... }
    `
  );
  ...
```

will be changed into:

```tsx
// no need to import the type
function SEO() {
  const data = useStaticQuery<GatsbyTypes.SEOQuery>(
    graphql`
      query SEO { ... }
    `
  );
  ...
```

Since the Flow doesn't have namespace syntax, It uses `$` as the fallback behavior.

Closes #24
Closes #16
@cometkim
Copy link
Owner Author

cometkim commented Mar 8, 2020

Hey @Fandy, I just published v2.0.0 that uses global declaration by default. Please try to migrate, and feedback will be appreciated.

@andyfangaf
Copy link

Generation like a charm! Would be great if it could automatically sync the types to page queries, but I understand that'd be harder to implement.

@andyfangaf
Copy link

Additional feedback: would be super useful to be able to import the field types, meaning not just the query, but the types for the fields in those queries.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants