Using TypeScript Interfaces When Passing Props in React
https://medium.com/@ethantcollins98/using-typescript-interfaces-when-passing-props-in-react-f62722078403
Last updated
Was this helpful?
https://medium.com/@ethantcollins98/using-typescript-interfaces-when-passing-props-in-react-f62722078403
Last updated
Was this helpful?
A super important concept in development is readability: Can a new developer come in, look at your code, and understand what it should be doing. A problem with annotating props for a component, is that if you have more than a few props, it can make your component’s initialization messy and harder to read. For example, let’s say you want to pass props to pre-populate a form, and put the prop values into state.
Having to annotate both the state and props like this makes it harder to see where the actual component logic is, and it’s not very DRY because both annotations are identical. To fix this, let’s build an interface called Details.
Great! Now that we have an interface setup, we can replace our lengthy props and state.
That’s much easier to read, and stays DRY!
WRITTEN BYEthan Collins
Application Developer based in Louisiana.
Follow
Follow
Application Developer based in Louisiana.
The annotations for the ‘printCar’ function are already pretty bulky, and if you have other functions which expect a ‘vehicle’ object of the same shape, this quickly makes for some unnecessary repetition and more room for mistakes. …Read more · 2 min read
In this blog I’ll be building a basic REST API using Node.js, Express, and TypeScript. I’ll be working off the assumption everyone here is familar with node and express, if not please check out my Creating a RESTful API with Node.js and Express! https://medium.com/datadriveninvestor/creating-a-restful-api-with-node-js-and-express-17af18ea92e8.
Alright, to kick it off let’s create a new project. This project will be from creating the new folder, all the way through the first route.
Inside of our root folder, create an ‘src’ folder and a ‘build’ folder. …Read more · 3 min read
14
In this blog I’ll be explaining basic type inference in TypeScript. To kick it off, let’s define the steps to create a variable, variable declaration and variable initialization.
However, if we declare and initialize a variable on separate lines, TypeScript will not try and figure out what type of value the variable should hold, and will instead give it type “any”. …Read more · 3 min read
1
In this blog I’ll be building a (sometimes) fixed navbar using React. If you just want to check out the completed code, I’ll put a link to the repo at the end of the blog!
In our class component App.js, …Read more · 3 min read
Published in The Startup·Oct 8, 2019
Controlled forms are a pretty common thing in React, and I’ve definitely gotten used to using them in the past few weeks. In this blogpost I’ll be going through the steps to create a controlled form.
To start out with, we need a react app. This can be achieved by typing
‘npx create-react-app’ (or just ‘create-react-app’ if you globally installed react)
sidenote - the name of your react app must be lowercase
Once your app is created, remove all the unnecessary boilerplate.
In your-project-directory/src, delete everything except for Index.js and App.js
In App.js, remove the imports for ‘./logo.svg’ and ‘./App.css’, as well as everything between the div tags in the return. …
In TypeScript, if you have a couple of functions which expect arguments with similar shapes, annotations can quickly become repetitive and bulky. For example, let’s say we have a function which takes in and logs different details of a vehicle:
The left side of the assignment operator is the declaration, while the right side is the initialization. If done on the same line, TypeScript will automatically figure out what type of value the variable will hold, “type inference”.
I built out my personal site a while ago, and one of the challenges I had was creating a navbar that scrolled with the page, but only once you’re below a certain part of the page. Like this one:ethandev.tech
