Way of the Script — React + Redux + Typescript: Part 2— Counter

Source: https://alehorn.com/2016/12/29/how-to-toast-like-a-viking/

Quest Goals

Counter Application Example

How many can you handle :> ?

Function Argument / Parameter Checking

You shall not pass!
Your code should look like this :)
No Integers allowed here!
Source: https://www.artstation.com/artwork/OxZrb

Refactor — Container & Presentation Style Components

interface types vs type aliases

type CounterViewProps = {
handleDecrease: () => void;
handleIncrease: (num: number) => void;
handleDisplayError: () => void;
}
interface CounterViewProps {
handleDecrease: () => void;
handleIncrease: (num: number) => void;
handleDisplayError: () => void;
}
Function does not exist here!
This function is not being used here!

Declaring functions in an Interface

interface CounterViewProps {
handleDecrease: () => void;
handleIncrease: (num: number) => void;
handleDisplayError: () => void;
}

It is convention to set the return as void, rather than null on functions which are not returning anything.

You shall not pass!

Intersection Types

Declare a single, combined Type
Declare all Interfaces individually

Till then my brothers and sisters, hold thy hammer high!

Source: https://moviepilot.com/posts/2441879

In case you have missed the previous guide, you can find the collection here, along with links, to allow you to find thy path.

Guides

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store