Name: ReactでのTypeScriptの使い方 (How to use TypeScript in React)
Uploaded: 2021-01-14T10:50:08.000Z
Duration: 14 min 15 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

Hey, guys, I want to go over some of the differences when doing typescript and react.

丁寧に「〜したい」を表すwould like + n/ would like to + v

So to start off, I'd like to use this boilerplate called create react app typescript.

to 不定詞

It's very similar to create react up, but it is using typescript.

So I'm gonna be using this as a starter for today.

The color it looks like I haven't touched anything.

But by default they give you a nice T s config with some good defaults.

And then we can go in here and changing of these if we want to.

And then also they have a T s flint um, which is nice as well, which is silence your typescript code.

So let's just dig into some of the things that are different.

So, first off, how you actually import react?

The reason you have to do that is because react is not export anything by default scenario, import, all react like that.

And also when you're installing other third party libraries, you might have to do the same thing as well.

Uh, it really it'll tell you when you're doing it, what you need to do, it'll have, like, little red lines.

Like if I get there, that's gonna be like, Hey, this has no default export.

And that's how you know you need to switch over to this.

The next thing is, how do you add basically types to your react components?

So to demo this, I'm gonna create a new thing.

I'm gonna call it form dot t X T s X, and you'll notice your file names are different.

So instead of Js exits TSX and I'm gonna copy these to make this faster and don't eat those.

So this is going to be a formed component and wouldn't be this out.

All right, so first off, this guy might have props.

So what I like to do is create an interface called props and then here specify all the things that you can pass to this component.

So maybe this component has some text, which is a strength.

This is just a random value, which is a member, and maybe that is optional.

So the way you tell your component is you do angle brackets at the end, you and then you pass in props like that.

Um, and now and, uh, I'm not sure what it's mad at.

Oh, this is, uh, likes to start with I the beginning of the interface.

So we could do it like that if you wanted to.

Okay, so we have the props here, So right off the bat will get some nice auto completion if we try, like de structuring our props.

So if I want to get, like text, I can now render a div with text.

So now we know we're gonna get this problem.

So I might have, for example, name which will set of people value just empty string.

And we'll also have an e mail, which is a string of Well, so you'll notice it's already not liking stuff.

It doesn't like this because it looks like we haven't label that public, private or protected.

I don't really usually mess with this stuff.

We can label it private, I guess because we don't want anyone else to use our state.

Usually that rule, I'll turn off in T s lint as well, and then let me show you guys I'm talking about.

So what I'll usually do is when I don't like some of these rules that just kind of annoying, and they don't really help me.

Um, so remember, access singing prince sees come over here, t excellent and rules you paste it.

And then you put a zero for you don't want to follow it, and then it will no longer bug you over here about it anymore.

So now we no longer are bugged about that, and that's you just turn him off like that.

Okay, so the state, we also need to have a type four.

So again, I like to create interface called I state.

So here we have an email, which is a string and a name, which is the string.

And that is the second thing you add to the angle brackets, comma high stake.

And if you don't have props, um, what you can do is you can just put an empty object and in this state, And then if you do not have a state, you can just leave it like this and not worry about it.

And we can also set her state here like that.

So there we got I state and we specifically saying what it is.

We have now that's a nice auto completion for ST.

And they'll tell me the two properties, some name, and maybe I'm showing the name.

And the nice thing about specifying the props on your component is now if I'm over here, I try importing that.

If I were to do our form and it doesn't look like it, I wanted it just auto import this guy for me.

Maybe it's because they didn't call it for him.

We'll just import it ourselves and only those two.

Okay, so immediately we get red lines because we specified that we need to have at least the prop text.

So that's how we know and we can say hello.

If we try added, adding any other type of property like maybe a is gonna be five.

It's not gonna like it, but I can't add, for example, age, which is optional.

So that's the nice thing about specifying the props on your, uh, component.

Um, the other thing here is just a common scenario is you'll have, like, an input helmet, and I would say that's my name, and value is going to be named and on changes people to this stock handle change.

So this is if you want to do a form and react.

So here, we're getting the this guy right here.

So we have to specify what the heck is the type for this event, right?

Well, it's gonna be reactive form of it, and then you have to specify the element.

So this is a little bit weird, but this kind of stuff you can just Google whenever that comes up, I'd use this one a lot, so I haven't memorized.

But, uh, you expect this function here to give you And I guess it just pops up now because we added it here.

And this is coming from an input element and the reason why I put input element here because this is called input.

If this was like, for example, text area, I would put a shingle text area element.

And then from that I can say const target and then what I usually like to do, which is get the name in value and then update the state with those, um, and with this one, it doesn't pick up on the types for whatever reason, and that's what it's complaining about here.

So what I usually do is I just say any, um so don't worry about typing those.

If I wanted Thio, I could say name is a string and values the screen.

Either way works well, I guess, uh, name.

So Okay, here's a little well, uh, cute thing.

So now that we have set the interface of state here, it knows that we can only have the keys, email and name, So we can't just have a generic name value here.

And what I mean by that is it protects us.

字幕リスト動画再生

ReactでのTypeScriptの使い方 (How to use TypeScript in React)

stuff

scenario

trick

specifically