Learn TypeScript Generics In 13 Minutes

Summary

このビデオスクリプトは、TypeScriptのジェネリクスに関する深い理解を提供します。ジェネリクスは、関数や型においてデータが複数の異なる型のいずれかである場合に、柔軟性を持たせるために使用されます。ビデオはジェネリクスの基本的な概念、関数での使用、型定義、デフォルト値、および制約について説明し、TypeScriptのより高度な使用法を学ぶためのシンプルで簡潔なアプローチを提供しています。

Takeaways

• 📌 ジェネリクスは、TypeScriptにおける非常に重要なコンセプトで、関数や型に柔軟性をもたらします。
• 🔍 関数にジェネリクスを使用すると、異なる型のデータを処理できるようになります（例：配列の最初の要素を返す関数）。
• 💡 ジェネリック関数を定義する際は、関数名の後に二つの角括弧（`<>`）を置いて、その中にジェネリック型の名前（例：`T`）を記述します。
• 🌟 TypeScriptは、関数の引数や戻り値からジェネリック型を推論できるため、通常、手動でのジェネリック型の指定は必要ありません。
• 🛠️ ジェネリクスを使用する際、特定の型システムに従う必要がある場合があります（例：`data` が常にオブジェクトであることが求められる）。
• 🔧 ジェネリック型はデフォルト値を設定することもでき、これにより、特定の型が指定されなかった場合に備えることができます。
• 📦 ジェネリック型は、他のジェネリック型をネストしたり、組み合わせたりすることも可能です。
• 🔑 ジェネリック型を使用すると、APIレスポンスやオブジェクトの型をより正確に定義することができ、これによりコードの安全性が向上します。
• 🎯 ジェネリクスは、関数や型においてデータが複数の異なる型のいずれかである可能性がある場合に最適な選択です。
• 📈 ジェネリクスを学ぶことで、TypeScriptを使用する際に柔軟性と精度を高めることができ、より効率的なコードを書くことができます。

Q & A

TypeScriptでジェネリックスを学ぶ際に最も怖い部分は何ですか？

ジェネリックスを学ぶ際の最も怖い部分は、あちこちにある山括弧や、T、K、Vなどの変数が理解しにくく、これまでの学習内容と大きく異なるためです。

ジェネリックスの主な用途は何ですか？

ジェネリックスの主な用途は、関数や型の中で使用されるデータが入力や返り値に基づいて型が変わる場合です。

ジェネリックスの定義に使用される記号は何ですか？

ジェネリックスは、2つの山括弧（<>）を使用して定義されます。

なぜジェネリックスを使用するのですか？

ジェネリックスを使用することで、関数や型が扱うデータの型を柔軟にし、再利用性と型の安全性を高めることができます。

ジェネリックスで複数の型を扱う方法は？

ジェネリックスでは、複数の型パラメータをカンマで区切って指定することで、複数の型を扱うことができます。

関数内でジェネリック型を推論する方法は？

TypeScriptは、関数に渡された引数の型を基にして、関数内でのジェネリック型を自動的に推論することが多いです。

ジェネリック型にデフォルト値を設定することは可能ですか？

はい、ジェネリック型にはデフォルト値を設定することが可能で、型パラメータが提供されない場合に使用されます。

APIレスポンス型にジェネリックスを使用する利点は何ですか？

APIレスポンス型にジェネリックスを使用することで、異なるエンドポイントからのレスポンスの型を柔軟に扱うことができます。

ジェネリック型を他の型に拡張することはできますか？

はい、ジェネリック型は他の型に拡張することができ、これによりジェネリック型が特定のプロパティやメソッドを持つことを強制することができます。

TypeScriptの学習に役立つリソースはありますか？

はい、TypeScriptを簡略化したコースがあり、TypeScriptに関する全てを5時間未満で学ぶことができます。

Outlines

00:00

📚 理解TypeScript中的泛型

本段落介绍了TypeScript中泛型的概念和重要性。泛型允许函数或类型接受多种不同类型的数据，而在整个函数或类型的使用过程中保持数据类型的一致性。视频通过一个简单的函数示例，解释了如何使用泛型来处理不同类型的数组，并展示了如何在函数定义中使用尖括号来指定泛型类型。此外，还提到了泛型类型可以有默认值，并且可以通过类型约束来确保数据符合特定的结构。

05:01

🔍 TypeScript中的泛型实例

这一部分通过具体的例子，展示了如何在TypeScript中使用泛型。首先，通过map函数和Map对象的例子，说明了TypeScript能够根据传入的参数自动推断泛型的类型。然后，通过创建一个API响应类型的例子，讲解了如何定义泛型类型，并如何通过泛型参数来指定数据的具体类型。此外，还介绍了如何为泛型类型设置默认值和类型约束，以及如何创建特定类型的别名，使得代码更加清晰易读。

10:01

🎯 泛型在TypeScript中的高级用法

这一段深入探讨了泛型在TypeScript中的高级用法，包括如何为泛型类型设置必须遵守的类型约束。通过API响应数据类型的例子，说明了如何确保泛型数据始终是一个对象，并且如何通过泛型来传递更复杂的类型结构。视频还提到了泛型在函数和类型定义中的常见用途，以及如何通过泛型来提高代码的灵活性和可读性。最后，鼓励观众通过学习课程来更深入地掌握TypeScript和泛型的概念。

Keywords

💡TypeScript

TypeScriptは、JavaScriptのスーパーセットであるオブジェクト指向のプログラミング言語です。このビデオでは、TypeScriptのジェネリクスについて学ぶことができます。TypeScriptを使うことで、コードをより安全に保ちながら、より効率的にアプリケーションを開発することができます。

💡Generics

ジェネリクスは、TypeScriptにおいて特定の型を指定せずに、関数やクラスを定義する方法です。これにより、同じ関数やクラスを使って異なる型のデータを操作できるようになります。ビデオでは、ジェネリクスを用いた関数の作り方や、どのように型を柔軟に扱うことができるかが解説されています。

💡Type Inference

型推論は、TypeScriptが自動的に値の型を推測する機能です。このビデオでは、型推論がジェネリクスと組み合わされた場合、どのように型が推論されるかが説明されています。型推論は、コードの可読性とメンテナンス性を向上させるために重要な役割を果たします。

💡Function

関数は、TypeScriptにおいて繰り返し使用されるコードブロックを定義する方法です。関数は、引数を受け取り、処理を行い、結果を返すことができます。ビデオでは、ジェネリクスを使用して一般的な関数を作成する方法が説明されています。

💡Array

配列は、同じ型のデータの集まりを表すデータ構造です。TypeScriptでは、配列の型を明示的に指定することができ、これにより配列内の全ての要素が同じ型であることが保証されます。ビデオでは、配列とジェネリクスの組み合わせ方について学ぶことができます。

💡Type Parameter

型パラメータは、ジェネリクスにおいて使われる仮の型名です。型パラメータを使用することで、関数やクラスの定義において特定の型を柔軟に指定できます。ビデオでは、型パラメータの使い方と、それを通じて関数や型をより汎用的に利用する方法が説明されています。

💡API Response

APIレスポンスは、Web APIから受け取るデータの形式です。TypeScriptでは、APIレスポンスを表す型を定義し、必要なデータのみを含めることにより、コードの安全性と明確さを高めることができます。ビデオでは、ジェネリクスを使用してAPIレスポンスの型を定義する方法が紹介されています。

💡Type Alias

型エイリアスは、TypeScriptにおいて既存の型に新しい名前を付ける仕組みです。これにより、複雑な型や再利用可能な型を定義することができます。ビデオでは、型エイリアスを使って、特定のAPIレスポンス型を簡潔に表す方法が説明されています。

💡Default Value

デフォルト値は、型パラメータに指定されなかった場合に使用される値です。これにより、ジェネリクスを使用した型定義において、型パラメータに対する明示的な型指定がなくても、適切な型推論が可能になります。ビデオでは、デフォルト値の設定方法と、その利点を説明しています。

💡Constraint

制約は、型パラメータが満たす必要のある条件です。これにより、型パラメータが特定の型であることを強制することができます。ビデオでは、ジェネリクスで型制約を使用して、データの型が特定の構造を持ち続けるように確保する方法が説明されています。

💡Kyle

Kyleは、このビデオの説明者であり、Web開発を簡素化する仕事をしていると述べています。彼はTypeScriptのジェネリクスについて教え、より効率的で安全なコードを書く方法を提供しています。

💡Web Dev Simplified

Web Dev Simplifiedは、このビデオのタイトルであり、Kyleが提供するWeb開発の教育プログラムの名前です。このプログラムは、TypeScriptを含むWeb開発の概念をより簡単に理解し、実践するためのリソースを提供することを目的としています。

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