Loading video...

Solution

Component Files Solution

To be able to add types to a component file (a file that contains a component in React and uses JSX), it needs to end in the extension .tsx.

This is as compared to files that end in .ts, which do not use components and should only contain TypeScript (JavaScript written with types).

Transcript

Right now we're making small steps from moving to plain JavaScript over to TypeScript.

And note that TypeScript is not something that you have to go all into, you can opt into using TypeScript where it makes sense or opt out of it, where you want to not have types as well.

It's not something that's forced or imposed on you. In this challenge. We saw even that in our source folder, an app component that was a.js file that was coming from a.js file could be rendered within this index dot TSX file, noting the fact that components in particular, our root component is being rendered right here in this file with the extension dot TSX.

It was your hint to change app dot j s to app dot TSX. And when you do so, you'll see that nothing changes. We don't get any warnings or errors.

Everything works just like it should. And we can change the content. This illustrates the opt in nature of TypeScript.

But on top of that, the fact that whenever you want to have specifically a component file with TypeScript, it needs to end in dot TSX. And this is as compared to a plain.ts file.

This would not work with our component, it needs to be thought TSX to work with JSX.

So make sure to keep that in mind. As we're building our applications in React that if you have a file that includes a component, it needs to be a dot TSX file