DEV Community

loading...
Cover image for TypeScript Tips Part I

TypeScript Tips Part I

Nick Taylor (he/him)
Lead software engineer at Forem. Caught the live coding bug on Twitch at livecoding.ca
Originally published at iamdeveloper.com on ・3 min read

We'll start off with the usual shameless plug of another blog post. If you haven't read it yet, check out my blog post, Consider Using TypeScript.

We're going to look at a few tips that may/can help you on your journey in TypeScript land.

First let's start off with some things to remember if you're migrating a React application to TypeScript.

  • When porting components to TypeScript, ensure that the file extension is .tsx, not .ts. If you don't, you'll be scratching your head for hours as to why JSX is not being recognized.

  • Also, ensure that you have the "jsx" TypeScript compiler option set properly as well. By default, it's set to "preserve". You want it to be set to "react". e.g. https://github.com/nickytonline/www.iamdeveloper.com/blob/master/tsconfig.json#L12

Liquid error: internal

  • Create a reusable children prop and add it to your component props' type via an intersection.
   // some file housing the ChildrenProp
   export type ChildrenProp = { children: React.ReactNode };

   // some other component file that consumes it.
   export type SomeComponentProps = ChildrenProp & {
       someOtherProp: boolean;
       ...
   };
Enter fullscreen mode Exit fullscreen mode

Alright, let's move on to outside of React Land.

  • If you're not sure what the shape of something you're building is yet, or you're consuming something that for whatever reason you don't know the shape, you're going to type it as any until you start to figure things out. If you're using TypeScript 3.0 and up, don't. Prefer the unknown type.

You get all the benefits of the any type, but as soon as you try to access anything on the object, you will need to do a type assertion. For more information, see the documentation on the unknown type

Here's a TypeScript Playgound example if you want to see it in action.

  • Sometimes you have code where you know something is going to exist no matter what, so you don't want to have a check to see if it's null or undefined. TypeScript allows you via the ! operator to basically say, "Hey TypeScript, trust me, I know what I'm doing.".

For example, instead of doing this

const someElementReference = document.querySelector('.awesome-selector');

if (someElementReference) {
  someElementReference.setAttribute('data-i-checked-first', `I wasn't sure if you'd exist`);
}
Enter fullscreen mode Exit fullscreen mode

you could do this

const someElementReference = document.querySelector('.awesome-selector');

someElementReference!.setAttribute('data-yolo', `I know what I'm doing!`);
Enter fullscreen mode Exit fullscreen mode

Use this sparingly because, well, this giphy.

I got the power! Bruce Almighty movie gif

That's all for now, until part II. I said it, so I need to write it now. 😉

Discussion (8)

Collapse
dance2die profile image
Sung M. Kim • Edited

Thanks Nick for the tip series.

I've started dabbling TypeScript with React recently and found the migration quite rough.

Main reason being that I do not know which type to associate with particular React components (children mentioned above didn't seem intuitive to me as I was expecting something like Component | ComponentType[]) 🤔.

Reading thru DefinitelyTyped React definition didn't help much due to lack of documentation.

Are there any courses/articles (either free | paid) you would recommend?

Thanks 🙏

p.s.
May I request to add syntax highlighting for codes? 😉

Collapse
nickytonline profile image
Nick Taylor (he/him) Author • Edited

Ahh, I see what happened. When my post from my site got loaded into dev.to, it stripped javascript from my markdown, hence no highlighting. Fixed it for you.

Check out my older post on TypeScript for some good resources (I updated it again last fall), Consider Using TypeScript. Offhand though James Henry's course is great, TypeScript Fundamentals (free). There is also a pro course there too that I'd recommend. If you have an egghead.io subscription, check out this course once you're a little more conmfortable with TypeScript, Advanced Static Types in TypeScript

Collapse
dance2die profile image
Sung M. Kim

Thank you for the resources, Nick.
(Yes! I do have an Egghead subscription~ 💖)

I need to build up my TypeScript fundamental foo first to before trying to learn TypeScript for React first 🙂 (had that problem with React as I was trynna learn with Redux thus couldn't learn either initially 😅).

Thread Thread
nickytonline profile image
Nick Taylor (he/him) Author

If you ever want to pair on some TypeScript/TypeScript+React, let me know and we can book some time together. We're both Eastern time, so shouldn't be too difficult.

Thread Thread
dance2die profile image
Sung M. Kim

Thank you, Nick~ 🤜

Would Twitter be a good way to contact in later time?

Thread Thread
nickytonline profile image
Nick Taylor (he/him) Author

Yeah, DM me and or ping me on dev.to connect and we can set something up.

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

Also, if you want to see some real world React/TypeScript, my site (built with Gatsby) has been converted to TypeScript.

nickytonline / iamdeveloper.com

Source code for my web site iamdeveloper.com

iamdeveloper.com

Netlify Status

Hey there, I'm Nick and this is my site's source code. This site started off as a clone of the Netlify CMS Gatsby Starter (check it out!). Since then, I've tweaked it a lot and converted the codebase to TypeScript.

Feel free to peruse the code and/or fork it. 😉

Thanks to all the wonderful projects that made it possible to build this blog.


Collapse
dance2die profile image
Sung M. Kim

Thanks Nick~
I love to learn how TypeScript is used with React/Gatsby in real life 👍 😍