Define the Store Type
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass with a single-time purchase.
[00:00 - 00:06] Define the store types. Create a new file, as you see, Utils, Types, T.S.
[00:07 - 00:12] And inside of it, Define the type for our state. Expert, Type, Root, State.
[00:13 - 00:20] It should contain the current stroke of type stroke, and the stroke array. Strokes, Array of Type stroke.
[00:21 - 00:27] Right now it contains two fields. Current stroke, it's an array of points corresponding to the stroke that is currently being drawn.
[00:28 - 00:33] And strokes, it holds an array of already drawn strokes. Let's define the missing stroke type.
[00:34 - 00:42] Expert, Type, Stroke has points. It's an array of type point, and it has color, of type string.
[00:43 - 00:48] Each point on stroke has X and Y coordinates. Let's define this type.
[00:49 - 00:57] Expert, Type, Point has X number and Y number. Those hold horizontal and vertical coordinates.
[00:58 - 00:59] Alright, and we have our root state type defined.