Learn TypeScript Generics In 13 Minutes
Summary
TLDRこのビデオスクリプトは、TypeScriptのジェネリクスに関する深い理解を提供します。ジェネリクスは、関数や型においてデータが複数の異なる型のいずれかである場合に、柔軟性を持たせるために使用されます。ビデオはジェネリクスの基本的な概念、関数での使用、型定義、デフォルト値、および制約について説明し、TypeScriptのより高度な使用法を学ぶためのシンプルで簡潔なアプローチを提供しています。
Takeaways
- 📌 ジェネリクスは、TypeScriptにおける非常に重要なコンセプトで、関数や型に柔軟性をもたらします。
- 🔍 関数にジェネリクスを使用すると、異なる型のデータを処理できるようになります(例:配列の最初の要素を返す関数)。
- 💡 ジェネリック関数を定義する際は、関数名の後に二つの角括弧(`<>`)を置いて、その中にジェネリック型の名前(例:`T`)を記述します。
- 🌟 TypeScriptは、関数の引数や戻り値からジェネリック型を推論できるため、通常、手動でのジェネリック型の指定は必要ありません。
- 🛠️ ジェネリクスを使用する際、特定の型システムに従う必要がある場合があります(例:`data` が常にオブジェクトであることが求められる)。
- 🔧 ジェネリック型はデフォルト値を設定することもでき、これにより、特定の型が指定されなかった場合に備えることができます。
- 📦 ジェネリック型は、他のジェネリック型をネストしたり、組み合わせたりすることも可能です。
- 🔑 ジェネリック型を使用すると、APIレスポンスやオブジェクトの型をより正確に定義することができ、これによりコードの安全性が向上します。
- 🎯 ジェネリクスは、関数や型においてデータが複数の異なる型のいずれかである可能性がある場合に最適な選択です。
- 📈 ジェネリクスを学ぶことで、TypeScriptを使用する際に柔軟性と精度を高めることができ、より効率的なコードを書くことができます。
Q & A
TypeScriptでジェネリックスを学ぶ際に最も怖い部分は何ですか?
-ジェネリックスを学ぶ際の最も怖い部分は、あちこちにある山括弧や、T、K、Vなどの変数が理解しにくく、これまでの学習内容と大きく異なるためです。
ジェネリックスの主な用途は何ですか?
-ジェネリックスの主な用途は、関数や型の中で使用されるデータが入力や返り値に基づいて型が変わる場合です。
ジェネリックスの定義に使用される記号は何ですか?
-ジェネリックスは、2つの山括弧(<>)を使用して定義されます。
なぜジェネリックスを使用するのですか?
-ジェネリックスを使用することで、関数や型が扱うデータの型を柔軟にし、再利用性と型の安全性を高めることができます。
ジェネリックスで複数の型を扱う方法は?
-ジェネリックスでは、複数の型パラメータをカンマで区切って指定することで、複数の型を扱うことができます。
関数内でジェネリック型を推論する方法は?
-TypeScriptは、関数に渡された引数の型を基にして、関数内でのジェネリック型を自動的に推論することが多いです。
ジェネリック型にデフォルト値を設定することは可能ですか?
-はい、ジェネリック型にはデフォルト値を設定することが可能で、型パラメータが提供されない場合に使用されます。
APIレスポンス型にジェネリックスを使用する利点は何ですか?
-APIレスポンス型にジェネリックスを使用することで、異なるエンドポイントからのレスポンスの型を柔軟に扱うことができます。
ジェネリック型を他の型に拡張することはできますか?
-はい、ジェネリック型は他の型に拡張することができ、これによりジェネリック型が特定のプロパティやメソッドを持つことを強制することができます。
TypeScriptの学習に役立つリソースはありますか?
-はい、TypeScriptを簡略化したコースがあり、TypeScriptに関する全てを5時間未満で学ぶことができます。
Outlines
📚 理解TypeScript中的泛型
本段落介绍了TypeScript中泛型的概念和重要性。泛型允许函数或类型接受多种不同类型的数据,而在整个函数或类型的使用过程中保持数据类型的一致性。视频通过一个简单的函数示例,解释了如何使用泛型来处理不同类型的数组,并展示了如何在函数定义中使用尖括号来指定泛型类型。此外,还提到了泛型类型可以有默认值,并且可以通过类型约束来确保数据符合特定的结构。
🔍 TypeScript中的泛型实例
这一部分通过具体的例子,展示了如何在TypeScript中使用泛型。首先,通过map函数和Map对象的例子,说明了TypeScript能够根据传入的参数自动推断泛型的类型。然后,通过创建一个API响应类型的例子,讲解了如何定义泛型类型,并如何通过泛型参数来指定数据的具体类型。此外,还介绍了如何为泛型类型设置默认值和类型约束,以及如何创建特定类型的别名,使得代码更加清晰易读。
🎯 泛型在TypeScript中的高级用法
这一段深入探讨了泛型在TypeScript中的高级用法,包括如何为泛型类型设置必须遵守的类型约束。通过API响应数据类型的例子,说明了如何确保泛型数据始终是一个对象,并且如何通过泛型来传递更复杂的类型结构。视频还提到了泛型在函数和类型定义中的常见用途,以及如何通过泛型来提高代码的灵活性和可读性。最后,鼓励观众通过学习课程来更深入地掌握TypeScript和泛型的概念。
Mindmap
Keywords
💡TypeScript
💡Generics
💡Type Inference
💡Function
💡Array
💡Type Parameter
💡API Response
💡Type Alias
💡Default Value
💡Constraint
💡Kyle
💡Web Dev Simplified
Highlights
The video aims to simplify the understanding of TypeScript generics, which can be intimidating for learners due to the prevalence of angle brackets and the concept of type variables.
The speaker promises to teach everything needed to know about generics in an easy and concise format, enabling mastery and practical use by the end of the video.
A simple function that gets the first element of an array is used as an example to demonstrate the limitations of non-generic types when dealing with different data types.
The introduction of generics allows a function to handle different data types based on the input provided, without losing type safety.
Defining a generic function involves placing two sets of angle brackets after the function name, where the generic type parameter is specified.
Generics enable the return type of a function to conform to the data type of the input, ensuring type consistency throughout the function's operations.
TypeScript's inference capabilities are highlighted, showing that it can often determine the generic type without the need for manual specification.
The concept of nesting generics is introduced, demonstrating the flexibility and complexity that can be achieved with generics.
Generics are not limited to functions; they can also be used to create generic types, which is useful for defining APIs and other complex data structures.
The video explains how to create specific type aliases using generics, such as 'userResponse', making the code more readable and maintainable.
Default values can be assigned to generic types, allowing for a simplified definition of common data structures, like API responses with a default 'status' property.
Generics can also enforce certain type constraints, ensuring that the data adheres to specific structural requirements, like always being an object.
The speaker emphasizes that while generics can be used in complex ways, most often they are used simply in functions where TypeScript can infer the generic type based on the input and output.
The video concludes with a recommendation for the speaker's TypeScript Simplified course, which promises to teach TypeScript comprehensively in less than 5 hours.
The key takeaway from the video is understanding when to use generics: when dealing with functions or types where the data type may vary but needs to remain consistent within the scope of that function or type.
Transcripts
by far the scariest part about learning
typescript is generics I mean there's
angle brackets everywhere there's these
t k v variables nothing really makes
sense and it's so much different than
everything else up to that point well
after this video you'll no longer have
to worry about generics because in this
video I'm going to teach you every
single thing you going to ever need to
know about generics in a really easy and
concise format so you're going to be
mastering and using them by the end of
this video and if you enjoy this video
and my simplified approach to learning
typescript highly recommend checking out
my full full typescript simplified
course it'll be linked in the
description below it's less than 5 hours
long and teaches you everything you're
ever going to need to know about
typescript to start writing it in your
own
applications welcome back to web dev
simplified my name is Kyle and my job is
to simplify the web for you so you can
start building your dream project sooner
and this is probably the first instance
where people start to run into the need
for generics as you can see we have a
really simple function that gets the
first element of an array it takes in an
array of numbers and you can see it
returns the very first element so if we
pass it this array called numbers down
to it you can see that it's properly
returning us to a number this first num
variable is typed as a number and
there's no errors at all now let's say
that we want to do the exact same thing
as we're doing here but instead of
passing along a number we want to pass
along some strings so this array is
going to be some strings it doesn't
really matter what these values are you
can see this is going to be our first
string and we're going to pass along the
strings into this git first element but
of course we're getting an error and
that's because this is accepting a
number array and not a string array so
there's a bit of a problem here we want
this to be able to take in any array and
return the first element of it but if we
type this as an array of any you're
going to notice that the return type we
get is of type any it's not of type
number or string it's just any which is
obviously not very useful and if we
tried to type this as like number or
string for example like this now you're
going to see our return type is either a
string or a number even though we know
in this first case it should be a number
and we know in this second case it
should be a string but types scripts not
smart enough to know that this is where
the idea of a generic type comes in
anytime that you have a function that
you know has some type of data inside of
it where you want that data to be
changing its type based on what you pass
in or based on what you return that is
the perfect case for a generic so here
instead of typing out the type we're
just going to put any for now but we're
going to replace this with a generic
type which is based on whatever we pass
in so to define a function as a generic
function you put two sets of angle
brackets afterwards an opening and
closing angle brackets and in here you
just give it the name of what you want
this generic type to be it can be
anything you often see this called T but
we can call it like element type or
something like that to really describe
what this is and I'd recommend being as
descriptive as you can especially when
you're getting started so now we have a
special type this type can be literally
anything but it's going to be that exact
same thing everywhere inside this
function so we know this element type is
going to be for our array so our array
is of this element type now you notice
just by doing that we have no more
errors in our code which is great and
when I hover over my first number here
you can see that it actually Returns the
type of number and when I hover over my
first string here it Returns the type of
string and the reason why that works if
we hover over this function is you can
see what happens is when we call this
function it's replacing that section in
the angle brackets with the type of
number so our array is of a number array
same thing here down here it's replacing
that with a string which means we have a
string array instead of a number array
so whenever you have a type that needs
to conform to the data being passed in
or the data being returned or just used
in some way in that function you use a
generic type like this and you can pass
along multiple generic types for example
you could have element type two inside
of here and this would be a second
generic type that you could use
somewhere else maybe for a second
variable for our case we just have one
single generic type because that's the
most common and simple use case and the
way that this is working is that
typescript is smart enough to know okay
this numbers object is a number array
and we know this array is of some type
and it's an array so typescript is smart
enough to know that this element type
should be a number if it's not smart
enough to know that you can actually
manually pass this in when you call a
function so if you call a generic
function you can actually pass in what
the generic value should be to help
typescript in for those values if it
can't and you just put these angle
brackets directly after the function
name this is actually something that
you've probably even done before if
you've ever used something like
document. query selector for example if
I want to query selector all of my input
elements that just have a class of input
and I know these are HTML in input
elements I could say const input is
equal to that and if I try to get the
value from my input you notice I get an
error because input doesn't have a value
property on it because by default input
is just an element well I know that this
is an input element so I can actually
use this crey selector which is a
generic as you can see and I can pass in
HTML input element as that generic type
and now you can see my input here is an
HTML input element which does have that
value property which is why I no longer
get any errors so generics are all over
the place inside of typescript and
you've used them without even realizing
them many many times again for example
the array. map function so if I just say
const a equals and I have an array with
like 1 2 3 for example and I say a map
and I just want to map over these
whatever that function is going to do it
really doesn't matter when I hover over
map you'll notice that this is actually
a generic function that takes in a value
but typescript is smart enough to infer
that so you almost never have to
actually pass in what that generic value
is going to be for example if I just
take in and I return a string from here
and I hover over this map you can see it
properly inferred that this is returning
a string as that generic value another
really common place you're going to see
generics is inside of like maps and sets
so I could say const map equals new map
just like this and this map is actually
generic so I could pass it in for
example it's going to be a string number
map and that just means that the very
first value for this if I try to like
set something inside of here so I come
in here and I say set I can set and it
first needs to take a string and then
secondly is going to take a number as
the value that's what this typing right
here is doing but if I pass this a
default value it's smart enough to
actually infer if I pass it a string and
a number that this map is of the string
number generic type so again that
inference is really powerful and this is
how you would actually pass along
multiple generics as you can see here I
just put a comma between them and
everything is working just fine you can
even Nest generics inside of each other
for example let's say I wanted to have a
map where the string is the value and it
actually maps to another map and that
map is just a string number map as well
as you can see I have these two levels
of nesting and if I remove this code to
get rid of those errors you can see that
this map is just properly being nested
inside of each other so you can pass
generics to generics as complicated as
you want to get it now this is going a
little bit off the deep end into
probably more confusing territory than
you need so let's take a step back and
talk about generic types in the form of
types we've talked about generic
functions but you can also make a type
that is generic as well this is really
common with things like an API response
so let's say that we have a type called
API response and here we have this type
and it has some data we don't really
know what that data is for now I'll just
say any and let's just say that we have
like an is error and this is going to be
a Boolean so what I can do is I can say
I can say my response here is equal to
and I have data which is just something
I don't know what it is and then I have
an is
error which is going to be false there
we go and if I properly type this as an
API response you can see that this is
all working fine with no errors and
let's say that this is returning to me a
user so we're going to give them a name
and we're going to give them an age
let's just say 28 there we go so this is
returning to me a user but the problem
is my response this data is just any no
matter what it's always going to be that
any type which is obviously not ideal
instead I want this to be a specific
type so we can make this a generic type
again you just put the angle brackets
after whatever your type is and then you
give it whatever you want that generic
type to be called in our case we'll just
call this data and then what I can do is
I can replace that any with data and now
I'm saying that my data is of the type
data and immediately I'm getting an
error down here because my API response
is accepting a type parameter that
generic and I haven't passed in a
generic so I need to give it a generic
because it can't infer what the generic
is it's not smart enough to do that so
what I can do is I can say this generic
is going to be a name which is a
string there we go and an age which is a
number and now if I close all that off
and save you can see now everything is
working and when I hover over my
response you can see it's an API
response where the name is a string and
the age is a number so it has all the
properties for is error and then this
data type is just inferred from this
generic that I passed in and I had to
manually pass it in cuz it can't do that
crazy inference now often times you may
want to make this a little bit easier to
read so I can actually take this and
turn it into its own type such as user
response I can say type user response is
equal to this type right here and it's
just allowing me to create an alias for
that type which makes my code a little
bit easier to read now the reason this
is so powerful is because if I wanted I
could create a brand new type for
example if I have a Blog that returns
some data I could get a Blog response
and if I copy this down and make sure
that this blog response for example is
just a title with a string you can now
now see that in this response for my
blog if I make this a Blog response my
data right here will now give me an
error until I give it a title which is a
string and then my errors go away this
is a really great way for me to expand
upon this I have a generic API response
that takes in this data and then I can
make specific versions such as a user
response or a Blog response and so on
that really narrow down what the type of
that data is going to be now let's just
assume a lot of the API endpoints I have
don't really have very complicated data
and instead the data is just a status so
for example I have a response that looks
like this where I have a status which is
just a number like that and I have a lot
of API responses that look like that and
by default they all look like that
unless I specify something specific what
I can do is I can actually give this a
default value so if I just say equals
here
status number I'm now saying that by
default if I don't pass anything inside
these angle brackets my data is going to
be of the type in object with the status
property that is a value of number so
now what I can do is I can just clean up
my code quite a bit let's just get rid
of everything except for this one
response that we have right here instead
of making this a specific response I'm
going to make it an API response and
this API response expects a status
property which is a number to be passed
along by default so since I didn't pass
along in generic it used this default
value right here but if I want I could
override that by saying for example name
String and now I need to pass along a
name which is a string in order to make
typescript happy and of course clean up
my code there we go now the final kind
of major thing you can do with generics
is you can actually give them a type
that they must adhere to for example
what I could do is I could say you know
what I want my data to be a string and
this is going to work just fine so for
example I can pass along a string and
everything's working just fine but I
know for a fact that my API response
data must always be an object it can't
be a string or a number it must always
be an object well to get around that
what I can do here is I can say that
this actually extends a specific type in
my case object you could make it more
specific less specific but I'm saying
that this data must always be an object
now we get an error here because string
does not extend object this must be an
object for example a name that has
string and now you can see that if I
type in the name that's a string that is
now working just fine I can even combine
this together with a default value by
just coming in here and putting an equal
sign for status which is a number and
now if they don't pass anything in here
at all it defaults to this status number
so if I change this to status of 200 you
can see I no longer have any errors now
these last few things that I covered are
really some of the more complicated use
cases for a generic in 90% of your cases
you're not going to deal with extending
you're not going to deal with default
values you're just going to have a
single generic maybe two generics and
you're just going to use them in a
couple very sparingly places you may use
them in types but most often you're
probably going to be using them in
functions in which case you generally
don't even have to pass along the actual
generic itself because inside of
functions it's almost always smart
enough to infer what that generic type
is based on the inputs and outputs of
that function and I know I've covered a
ton in a really short time so if you
need to rewatch this video I 100%
recommend it but the key to take away
with generics is when you want to create
a function or a type where some piece of
data inside of it could be multiple
different types but during the entire
iteration of that type or function you
want it to be the same thing but for
example it could be a number one time or
a string the next time depending on what
array you pass it like in our first
example that is the perfect use case for
a generic and if you enjoyed this video
and you like this short simple concise
to the point x explanation of everything
important about generics you're going to
love my typescript simplified course CU
I do this exact same thing for every
single typescript concept out there
giving you everything you need to know
about typescript in less than 5 hours so
if you want to check that out it's going
to be linked down in the description
below and if you take that course you're
going to be able to use typescript by
the end of today which is just
absolutely amazing so with that said
thank you very much for watching and
have a good day
5.0 / 5 (0 votes)