How to Configure React to Use TypeScript

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the The newline Guide to Creating a React Hooks Library course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to The newline Guide to Creating a React Hooks Library, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course The newline Guide to Creating a React Hooks Library

  • [00:00 - 00:16] Okay, so the next step that we're going to do is to set up TypeScript. If you're not familiar with TypeScript, and probably if you're not familiar with Type Languages, then it will be a completely different topic for you and you'll have to move about that.

    [00:17 - 00:37] But basically TypeScript is just JavaScript that is enriched with Type Constructions, whatever to the language, to the TypeScript language, that is, I mean every JavaScript mostly in 99% of the cases is valid TypeScript. So it's just kind of a super set of JavaScript.

    [00:38 - 00:58] I mean JavaScript is great if you have a small project, or you have a small script to write, you'll just hack it around really quick. There's no compilation errors like if you ever programmed in C++ or in Java, you will immediately hit this block and you'll have troubles even to start the program.

    [00:59 - 01:03] While with JavaScript everything is running, right? So it's pretty forgiving, etc.

    [01:04 - 01:15] But TypeScript gives this strictness. That definitely helps experience developers and definitely helps scale JavaScript code base further.

    [01:16 - 01:29] If you're not sure what TypeScript is, I highly recommend you to read through this website to understand why would you need this one. And read the docs, the hangbook, the community is great, there's a playground, there's a lot of tools.

    [01:30 - 01:40] So yeah, this is it for the super short introduction to TypeScript. So let's install TypeScript dependency, right?

    [01:41 - 01:54] So what we need to do is to run TypeScript and D, so we install it to the dev dependencies. Okay, all right, let's double check our package JSON now.

    [01:55 - 02:08] So here we go, we have a TypeScript running. So great, and the next thing you should have in order to make TypeScript working is to have a TNS config.json.

    [02:09 - 02:24] Great, so it's really tricky to find a good config, usually, and to understand what kind of setup you want. So let me, let's say, open the docs, and definitely there will be a documentation about TNS config.

    [02:25 - 02:28] So what's TNS config, right? There's a lot of stuff to think about, right?

    [02:29 - 02:36] There's a lot of problems with it. Like what should I make true, what I should make false, etc.

    [02:37 - 02:49] It's pretty complicated just to avoid this complication. You can definitely go and read about it in TNS config reference about every single possible setting that you can use.

    [02:50 - 03:04] But it's for super advanced or legacy code basis usually. So the greatest place where you can actually go and check and steal great Type Script config is this repository named TNS config basis.

    [03:05 - 03:15] And here we go to the basis, we go to the recommended, and we're just going to copy paste this one and paste it in here. Okay, it's happy now.

    [03:16 - 03:23] I think this place is not used much. What I want to add usually is root directory and base URL to be sourced.

    [03:24 - 03:33] So because our code is in the source, so I want it to be relative to the source . What else I think will be great to add a library.

    [03:34 - 03:41] And here we want to have a yes, next. So we support the latest features of the language.

    [03:42 - 03:47] This is how it's supposed to be. And I think that will be it for this one.

    [03:48 - 03:57] We want to generate not common Gs modules, but ES ES6. Modules target should be also ES6.

    [03:58 - 04:02] We may change it later. And we're not going to use any JSX.

    [04:03 - 04:09] So it's all fine for us. And definitely we don't want to emit anything.

    [04:10 - 04:19] So another thing we want is no emit to set true. Also, we probably wanted to include only source directory.

    [04:20 - 04:34] All right, so the last step we need to do is to add TypeScript command here, just so we make sure it all works. So let's let's everything is great so far.

    [04:35 - 04:39] Let's just try it now. Yeah, everything is working great.

    [04:40 - 04:43] And it's up and running. Let's just break something, right?

    [04:44 - 04:50] Let's make a const of string that will be of type of string. And let's pass a number here.

    [04:51 - 04:56] Then type number is not assignable to type string. So as you can see, we have a number and we have a string.

    [04:57 - 04:58] It's all working. It's all great.

    [04:59 - 05:02] We're happy about that. And we can go to the next one.

    [05:03 - 05:03] next one.