TypeScript definitions

[corydeppen]

Would you be willing to include a TypeScript declaration file in this repo and publish it as part of the package? I'm interested in using this library in a TypeScript project and would be willing to work on a PR that uses the existing Flow types as the basis for the TS definitions.

[aweary]

I would love to have a TypeScript definition! I need to get a working library definition for Flow too (right now the types are internal) so the timing is great.

[samhh]

These aren't production-ready, but they're a start.

declare module 'react-copy-write' {
	import { Component } from 'react';

	interface ProviderProps {
		children: JSX.Element | JSX.Element[];
		initialState?: object;
	}

	class Provider extends Component<ProviderProps, any> {}

	type MutateFn<T> = (draft: T) => void;
	type Mutator<T> = (mutator: MutateFn<T>) => void;

	// "any" due to selector
	type RenderFn<T> = (state: T | any, mutate: MutateFn<T>) => JSX.Element | JSX.Element[];

	interface ConsumerProps<T> {
		selector?: (state: T) => any;
		render?: RenderFn<T>;
		children?: RenderFn<T>;
	}

	class Consumer<T> extends Component<ConsumerProps<T>, any> {}

	function create<T extends object>(state: T): {
		Provider: new() => Provider,
		Consumer: new() => Consumer<T>,
		mutate: Mutator<T>,
	};

	export default create;
}

[davej]

@samhh Would you consider publishing these somewhere so that those of us using typescript can iterate on them?

[samhh]

@davej I've created a formal type definition here that can be merged into DefinitelyTyped via PR once they're a bit further along. Feel free to contribute there until it's ready for PR; speaking of which, I've not submit anything to DT before so any feedback on that directory is helpful, particularly with regards to the "test".

[aweary]

Im not a TypeScript user. Is it more common for type definitions to live in Definitely Typed or the repo itself?

Happy to do do either.

[davej]

@aweary I'm only starting with typescript but I think it's better to include them in the repo itself if possible. DT is for the community to provide an escape hatch when a library decides not to include type definitions for whatever reason.

[davej]

I've not submit anything to DT before so any feedback on that directory is helpful

@samhh Either have I!
This is literally my first week using TypeScript (starting a new greenfields project). I'm not sure if I can be much help but I'll try my best. :-)

[samhh]

@aweary @davej The TypeScript documentation here says that if the project is not written in TypeScript then it's better for the types to be stored in the DefinitelyTyped repo.

[davej]

@samhh Ah ok. I was basing my answer on what I read on StackOverflow but TypeScript documentation is a much more canonical source.

[aweary]

Note that the API has gone through some changes since @samhh's original attempt.

• mutate is no longer passed to the render callback of consumers
• selector has been renamed select and must be an array of selector functions
• The render callback for consumers no longer pass the result of the selectors as an array. Instead they are now arguments to the function.

A couple other things:

• Does using any with the selector cause it to lose the types, or can it still infer based on what the selector returns? Maybe a generic is more appropriate?
• Can you define "conditional mutability" in TypeScript? For example, in mutate the state is mutable, but in the Consumer callback the state is not. It'd be awesome if we can represent that with types

[samhh]

@aweary Yes, using any means you're basically telling the compiler that you don't know what it is. I'm unsure how to solve this, any feedback from more experienced TS folk is obviously welcome.

With regards to conditional mutability, I think we could use Readonly generic and its variants to accomplish that?

[samhh]

Made the PR here with the help of @davej. Hopefully they'll be up soon-ish!

[samhh]

It's merged and should be available on npm shortly. 🎊

Edit: It's up! 🎊