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

Can Svelte export all store's Typescript definitions? #5864

Closed
sangxxh opened this issue Jan 6, 2021 · 6 comments · Fixed by #5887
Closed

Can Svelte export all store's Typescript definitions? #5864

sangxxh opened this issue Jan 6, 2021 · 6 comments · Fixed by #5887

Comments

@sangxxh
Copy link
Contributor

sangxxh commented Jan 6, 2021

Is your feature request related to a problem? Please describe.

Take this simple store as an example:

import { readable, Readable } from 'svelte/store';

const store: Readable<string> = readable('', (set) => {
    helper(set);
})

function helper(set) {
    set('test');
}

The problem is that I can't type helper's argument and return types because there are some internal Svelte types that are not exported:

/** Callback to inform of a value updates. */
type Subscriber<T> = (value: T) => void;

/** Unsubscribes from value updates. */
type Unsubscriber = () => void;

This applies to many other internal types in svelte/store, too, ie. The below is not exported:

/** Start and stop notification callbacks. */
type StartStopNotifier<T> = (set: Subscriber<T>) => Unsubscriber | void;

Describe the solution you'd like

I would like to be able to write:

function helper(set: Subscriber<string>): Unsubscriber | void {
    set('test');
}

The same would apply to other features of Svelte, too.
This means Svelte would have to export (almost) all of its Typescript definitions in svelte/store

Describe alternatives you've considered

I've looked at Type Inference but that's fairly inconvenient for dev. I'd prefer to directly use Svelte's internal type definitions.

How important is this feature to you?

I'm looking for a way to use Typescript with Svelte efficiently. This would help a lot with using Typescript in Svelte.

Additional context
Note that I haven't used Svelte a lot. There are maybe better Typescript practices for this Svelte use case that someone can advise?

@dreitzner
Copy link
Contributor

dreitzner commented Jan 9, 2021

Type definitions should be available here, but I am afraid not for the store:
https://github.com/pyoner/svelte-typescript/tree/master/packages/types

Why would you use a helper function outside of the subscriber function?
Inside the scope the type would persist and make your live easier....

@sangxxh
Copy link
Contributor Author

sangxxh commented Jan 9, 2021

Type definitions should be available here, but I am afraid not for the store:
https://github.com/pyoner/svelte-typescript/tree/master/packages/types

Why would you use a helper function outside of the subscriber function?
Inside the scope the type would persist and make your live easier...

Sometimes we need that for code organization.
There's a REPL from Svelte that does the same:

Using Typescript Declaration Merging to manually export those store types is the best work around at the moment.
Not sure how the Svelte team would approach to provide better Typescript DX?

I also feel like we need a Svelte Typescript Cheatsheet (like the React Typescript one)

@cereschen
Copy link

I have the same need.
There are many types that are not exported, which makes working with TypeScript difficult.

@dreitzner
Copy link
Contributor

dreitzner commented Jan 15, 2021

Some further info:

  • store types are located at node_modules\svelte\types\runtime\store\index.d.ts
  • the export for some of the types is not set

I can think of 2 things that could be done:

  1. Create a github action to automatically port the types to https://github.com/pyoner/svelte-typescript/tree/master/packages/types (or create a svelte/types repo)
  2. export them by default (for this it might be a good idea to create a namespace for svelte to not clash with other types from external libaries that might be imported)

@sangxxh
Copy link
Contributor Author

sangxxh commented Jan 16, 2021

Some further info:

  • store types are located at node_modules\svelte\types\runtime\store\index.d.ts
  • the export for some of the types is not set

I can think of 2 things that could be done:

  1. Create a github action to automatically port the types to https://github.com/pyoner/svelte-typescript/tree/master/packages/types (or create a svelte/types repo)
  2. export them by default (for this it might be a good idea to create a namespace for svelte to not clash with other types from external libaries that might be imported)

Option 2 is ideal.
Option 1 is a workaround and it also introduces another package into one's project, I want to avoid that.

@sangxxh
Copy link
Contributor Author

sangxxh commented Jan 16, 2021

Inspected further and there are some store types that are only internally useful and don't need to be exported. Check out the PR link above

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

Successfully merging a pull request may close this issue.

3 participants