TypeScript supports JavaScript out of the box because it's a superset of JavaScript, meaning that it compiles to JavaScript. Declaring types is super easy and doesn't require as much effort as you'd think. Here's an example of the general syntax used.
Variables
const userName: string = 'Kevin'
Parameters
const addTwo = (value: number) => value + 2
and expected return values for functions.
const sayHello = (): string => "Hello"
You can use any JavaScript primitive type, along with some new ones.
Arrays can be a little different, they can be written in two ways. The first way is by declaring the type followed by
[]
. The second is by typing 'Array' followed by the type wrapped in '<' and '>'.
let numArr: number[] = [1, 2, 3, 4]
let numArr: Array<string> = ['one', 'two', 'three']
But what if I don't have an array with just a single type? What if I want to use strings and numbers, or even include booleans?
Enums have two purposes: 1. Providing an easy way to give names to sets of numbers. 2. Using a numerical value for a given name. Pretty much the opposite of 1. It does sound a little confusing but is a lot easier with examples. Similar to arrays in JavaScript the first item in an enum is 0, the second is 1, the third is 2, etc. You can change this by manually declaring the positions.
enum Post {
Draft = 1,
Published,
Updated,
// Accessing published
let articleStatus: Post = Post.Published // 2
// Getting the post status by number
let articleStatus: Post = Post[1] // Draft
Lastly, there is an interface, this is how we will describe objects. Using an interface is like creating your own type. You can even specify a value as optional so that TypeScript won't get mad at you if your missing something. Adding a '?' before the colon tells TypeScript that the value is optional.
Wow. That was a lot to go through! Yes, there are a lot of types in TypeScript, and I didn't even cover them all but honestly, you just need to know primitives, types/interface, and what you can declare types on. (Variables, Parameters, and Function return values)
Now you're all set to go! Well, at least we're all set to go to write TypeScript in .ts files. We still need to talk about using TypeScript with React in .jsx files.
Thankfully hooks are fairly easy too! TypeScript can infer quite a bit. For instance const [name, setName] = useState('') can automatically tell that name is of type String and setName would be (newName: string) => void.
If you need to initiate state as a null value you can declare it using an interface and union operator.
And that's it! Well, not all of it, but it is everything we need to know to start using TypeScript in a React project. There is a lot more that we can do that I haven't discussed like extending interfaces, types VS interface, aliases, etc. So if you want to go in deep you can always check out the TypeScript Handbook along with the TypeScript + React cheatsheet.
So at the beginning of my first tutorial, I had a list of questions that I wanted to answer about TypeScript, and what I wanted from it in order to fully adopt it into my other projects.
Q: What is Static Typing? A: Static Typing is where your code is checked for accurate typing before runtime. Meaning that each value has the correct type, string = string, number = number, etc.
Q: How difficult is it to get up and running? A: As we found in my previous tutorial Not very hard at all!
Q: Does it play nicely with React? A: So far, I would say yes, at least it's definitely easy to get set up. Plus, there aren't that many additional types that are specific to React, which is great. I'll go through building a SpellBook using React and TypeScript in a before/after tutorial.
Q: Can I get rid of prop-types? A: YES! I mean technically prop-types never does go away? Your, just declaring the types as you code, not at the bottom of the component file.
Questions we still need to answer.
Q: What are the pros/cons of using TypeScript? Q: How does TypeScript make me a better programmer?
Part 3: Building a SpellBook using React + TypeScript. Coming Soon.
TypeScript can do a lot more than I'm covering in this tutorial, so if you would like to read more you can always checkout out the website.
Another great read is this article written by Joe Previte
Building a Real-Time Chat Gateway with NestJS: Testing WebSocket Features and Implementing Simple Private Messaging
Julien -
Creating an animated navbar inspired by Vercel using React (Next.js v13), Framer-Motion, and Tailwind CSS
ashish -
Simplify Your Workflow 📈: A Guide to Standardizing Commit Messages with Husky 🐶 in Monorepos 📦
Muhammad Harith Zainudin -
Once unpublished, all posts by thelogicwarlock will become hidden and only accessible to themselves.
If thelogicwarlock is not suspended, they can still re-publish their posts from their dashboard.
