Way of the Script — React + Redux + Typescript: Part 1 — Introduction

Source: https://thevikingsnorsegods.wikispaces.com/Odin

Guides

Project Setup

Exploring Project Files

name="Valhalla Coder"
interface HelloWorldProps {
name: number;
}
Types of property ‘name’ are incompatible. Type ‘“Valhalla Coder”’ is not assignable to type ‘number’.

Creating our first component

import React from "react";export interface StatelessPropTypes {
norseGod: string;
numberOfSons: number;
}
const Ode = ({ norseGod, numberOfSons}: StatelessPropTypes) => (
<div>
<h4>{norseGod} The Wanderer</h4>
<div>Has {numberOfSons} Sons</div>
</div>
);
export default Ode;
Type '{}' is not assignable to type 'StatelessPropTypes'.
Property 'norseGod' is missing in type '{}'.
<Stateless norseGod="Odin" numberOfSons={4} />
It doesnt look pretty, but this aint no UX tutorial :D

Props are cool, but what about State?!

interface HelloWorldState {
componentState: number;
}
class HelloWorld extends React.Component<HelloWorldProps, HelloWorldState> {
constructor(props) {
super(props);
this.state = {
componentState: 100,
};
}
Cannot find name 'props'. Did you mean the instance member 'this.props'?
Why would we want to do this though?!
Good bye errors, Hello Types!
Types of property 'componentState' are incompatible.
Type 'string' is not assignable to type 'number'.
The freedom of JS is gone :( but at least us devs will have less headaches :D
Source: https://images.moviepilot.com/image/upload/c_fill,h_470,q_auto:good,w_620/thor-hammer-physicist-provides-solid-scientific-explanation-for-thor-s-magical-hammer-jpeg-178660.jpg

--

--

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