absolutely blew my mind. Now, it doesn't

actually look like that solved our

problem. Actually, it looks like it's

not quite working as we expect.

I have always struggled with advanced

TypeScript features. So, I decided to

test my limits by going through various

TypeScript challenges to see if I'm able

to solve them, all while actually

explaining everything that I'm doing

step by step so that we can become

better Typescript developers together.

But what I didn't expect from this is

that I was actually able to use a super

niche TypeScript feature to solve one of

these challenges in a way that the

creator did not expect.

Welcome back to WebDev 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

I have three challenges I'm going to be

tackling. The first is rated as easy,

the second one is medium, and the third

one is hard. And I'm honestly quite

scared about this one because even the

medium challenges I've looked at in the

past are very, very difficult. Now, to

understand how all this works, we're

going to just use their sample data

right here, which is just a warm-up.

Essentially, at the very top, we have a

question, and all we need to do is we

need to solve whatever this question is.

It's going to ask us to create a type

that does something. In this case, we're

just creating a type of string. That's

really straightforward. At the bottom,

you'll see here, this is the type we're

going to create, whatever it is right

here in this your code here section. And

then we have some test cases that test

to make sure that this is the correct

type. So if we just type this as a

string, you'll notice down here all of

our test cases remove the errors, which

means that they are currently passing.

So let's go ahead and actually look at

the very first example, which is this

exclude one. Essentially, all we're

doing in this example is we're

reimplementing the built-in exclude type

that's inside of TypeScript in our own

way to figure out how it works. And this

should be rated as easy, even though

it's going to use some more advanced

TypeScript features. Now, you will

notice at the top there are some tints.

For example, it's recommending like a

union and built-in. These are like tags

or categories, which sometimes can help

you steer you in the correct direction.

So if we look down here, you can see our

different test cases. So we're excluding

from A B C the value of A. So we're left

over with just B and C. And here we have

ABC. We're excluding A and B. And we

should be left with just C. Now

obviously I could just use the built-in

exclude type from TypeScript. And if I

do that, it's going to completely solve

my problem. But of course, that kind of

defeats the entire purpose. So let's go

ahead and actually look at how we would

create this exclude type. Essentially,

we have this type T that we know has a

bunch of different things. And we have

another type called U that we know is a

subset of our type T. So we just want to

figure out what is in U and remove that

specifically from T. Now in Typescript

whenever you want to do like an if

statement that's always going to be done

using an extends keyword. So we can say

T extends right here. And this allows us

to actually dive into what is T. So for

example, we should say T extend string.

And now if T is a string, whatever is

after our question mark is going to

return. So for example, true. And if T

is not a string, then this false section

is going to be what's returned. And this

works great when you have a single value

for t. But when you have for example a

union of values or maybe an object of

values, then this extends keyword works

a little bit differently and instead it

applies to every single value inside of

there individually. So it's checking

every single value of essentially t and

checking if those are all strings each

one individually. So because of that we

can almost think of this as a for loop

looping over each value inside of t and

then doing some type of if comparison on

each one of those values. It's then

going to return true or false for each

of those individual values. And now

we're going to get a return value that

is essentially a bunch of different trus

and false combined together. We can

actually use this relatively easily to

just put u here instead of string. So

now we're looping through each value in

t and seeing if it extends u. So

essentially the very first time I loop

through here I have a if I'm looking at

this very first use case and I'm saying

does a extend a. Well in this case

extends essentially acts like an equal

sign. So we are saying yes that is true.

So it's going to return the value of

true. The second time it's going to loop

through on my value V. And you see B

extends A, not true. So it'll return

false. And finally here, it'll check C

again. And C does not extend A. So it's

going to return false for that. What I

essentially want to do though is I want

to take those true false and instead I

want to convert it to a brand new union.

That is going to be just the values that

we're not excluding. So every time it

returns true, I want to remove that

value. So pretend it doesn't exist. That

is where the never keyword in Typescript

comes in. It essentially says this can

never happen. And so it pretends that

type doesn't even exist. And otherwise I

want to just return that value as is. So

I can actually just return T, which as

we know in this case is each individual

instance of that value T. This is what

makes dealing with these types so

confusing because T when we pass it in

is essentially this full union. But when

I use it in this extends, it's almost

acting like a loop. And while I'm inside

that loop, so inside this conditional

statement, this T value instead of

representing the full union only

represents each individual value. So

again, the first time we loop through,

we get a a is equal to a. So we return

never. Finally, B is not equal to A. So

we return B as is. Same thing with C. C

is not equal to A. So we return C as is.

So the entire purpose of this my

exclude, as you can see, all the test

cases are passing. Is to really figure

out that this extends keyword does so

much more than just a simple if check.

It can also be used for essentially a

for loop that is going to map over those

values and return to you a brand new

value from them. And that is kind of the

core of almost every single advanced

TypeScript thing you write. And I'm sure

in the other cases we look at, we're

going to run into the exact same issues.

Now, speaking of, let's look at our very

next one here, which is going to be

kebab case. So, in this one, all we want

to do is replace the camel case or

Pascal case strings and convert them to

kebab case. So, here you can see we have

foo barb baz is converted to

fu-ashbar-bas.

Essentially, anytime that I have a

capital letter, I want to lowercase that

letter and put a dash in front of it to

give myself a kebab case instead of a

camel case. Now, if we look down here at

all the different examples we have, we

can see some of the edge cases in place.

So, for example, if we have a dash, it

should just return as is. Empty string

should not be changed. Anything that's

not a capital or lowercase letter should

stay the same. And here, for example, if

we have like an underscore that stays

the same. Literally, the only thing

we're looking at is every time we have a

capital letter, remove that capital,

make it a lowercase, and put a dash

right before that. That's essentially

what we want to do in this particular

challenge. So, when I think of this

challenge, I first need to be able to

recursively loop through this because I

kind of need to loop through each letter

of my Arab string here. And that's a

quite difficult thing to do inside of

TypeScript. There's no like for loops or

recursion that you could do naturally.

You have to use that fancy extends

keyword to figure this all out for you.

So we have s which we know is going to

be an extr. I can even just come in here

and say it extends string because it

doesn't really make sense if it doesn't

extend a string. And now what I can do

with this s is I can say s extend and I

want to try to essentially get each

individual character of my value. So I

want to get okay this f if this f is a

capital letter I want to turn this to

lowercase and then I want to get o and o

and b I want to loop through each

individual string as is. Well, this is

something you can do with the infer

keyword inside of TypeScript. So, what I

can do in here is get a template string

literal. This is actually kind of tinted

to us up here with the template literal

category that this is part of. So, here

I have my template string and inside

here I can actually put essentially

variable values. In JavaScript, you

could put like a variable for example

like my name and that would put my name

inside of this string. But in

Typescript, what we could do is we can

use the infer keyword and then give this

a variable value. For example, I can

infer a and now this a variable is just

equal to whatever is inside my string.

Now, in this case, it doesn't really

make much sense to do this because I

just have a string as is. But if I were

to come in here and do like a followed

by two O's, this A is going to be

whatever is followed by two O's. So, in

our case, it would be a capital F here

because that's followed by two O's. And

that's what A would equal in this

particular string. Now, in my case, I

want to loop through each individual

letter one by one. So, we can actually

stack two infers next to each other by

doing this. We have infer A and we have

infer B. Now, you may be thinking, okay,

what happens in this scenario? because

now we have two dynamic variables that

we need to create. Essentially what

TypeScript does is it tries to figure

out what this first variable should be

and it tries to make it as small as

humanly possible. So in our case we just

try to infer one single character of our

string. So F in our case and then the

final infer value in our list is just

whatever is left over. So this B value

is literally our entire string and A is

just the very first character of our

string. So in our very first example of

fuar baz, essentially we have a is equal

to just the capital f and then b is

going to be equal to everything except

for that f. So essentially this first

value is going to be the minimal amount

of content and the second value is just

all the rest of our string. And we can

even just call it rest to make it a

little bit more self-explanatory. Now

what I essentially want to do from here

is I want to take that letter a because

now I have an individual letter I can

work with and I want to determine is

this uppercase or lowerase. If it's

lower case just leave it as is. But if

it's uppercase, I want to change it to a

lowercase and put a dash in front of it.

So let's go ahead and try to actually do

that. So in our first question mark

section, this is essentially saying,

okay, our string extends this section,

which means our string essentially is

long enough to have two different parts

to it. So this is where our main code is

going to go. And then after our colon

here, we're just going to put s as the

value we're returning because that

essentially means that our string does

not match this particular format, which

means our string is too short to get

multiple different values from it.

Essentially, we have an empty string.

And once we get to an empty string, I

just want to return my string as is

because in this middle here, we're going

to do recursive code. And it'll make

more sense why we're returning this

string right here. So, let's come on

down here. And I want to first of all,

like I said, check to see is a uppercase

or lowerase. And to do an if check, we

need to use extends. So, we can say a

extends. And I want to check to see if

it's uppercase. So, I think I can just

use the uppercase type here. And I can

paste in a just like that. So, now I'm

checking is a an uppercase value. If so,

do something. otherwise do something

else. So what we can do is for now I can

just put never here and never here to

get my type stuff correct. And now for

this first case if we have an uppercase

letter for a I want to make it lowercase

and I want to put a dash in front of it.

Otherwise if it's not uppercase I just

want to return my value as is without

doing anything complicated. So here I

can just recursively call kebab case. I

know that my a character is fine. So I'm

just going to put my a character at the

start of the string. Then I'm going to

call kebab case and in it I'm just going

to pass all the rest of the values that

we didn't use. So essentially what I've

done here is now I've taken this a

character. I know that it's already

lowercase so I can leave it as is and

now I'm recursively calling this

function by trying to get the next set

of my string. So after I do this the

first time f is the value for a and you

know I have all my other stuff coming

afterwards. The next time I call this

function everything but the first

character is going to be used because

we're recursively calling it. So then I

can come inside of here in the case

where we have essentially an uppercase

version of a. Well, I need to make this

lowerase. So we can use lowercase to

make that a lowercase value and we can

put a dash in front of it because we

need a dash in front because that's how

you kebab case different values. So now

just by doing that if we give it a quick

save it actually looks like some of our

test cases are passing which is great.

So let's go ahead and actually see why

some of these aren't passing. That

should be for example this third test

right here. I really think that this one

should be passing because all we're

using is fu-ashbar. There's not even any

uppercase letters at all. So, it should

just be essentially returning our string

as is. Now, an easy way to type this

inside of TypeScript is just to create a

brand new type. We'll call it test. And

we'll just set it equal to essentially

calling that kebab case. And this will

tell us what we get back. And if we

hover over this, you'll notice it's

actually giving us two dashes here,

which is kind of interesting. So,

essentially, whenever we encounter a

dash, it thinks that's an uppercase

letter. I'm guessing that's what's

happening. So, uppercase actually is

returning true for things like dashes.

And it looks like even emojis are

determined to be uppercase. So I think

if we just swap this to be lowercase

because if we get these false positives

where like a dash is uppercase or

uppercase and like a emoji is uppercase.

I'm assuming we'll get the exact same

false positives for lowercase and we can

just swap our cases around. So here we

just swap the order of these different

values. And actually it does look like

that solved it. If we look at our test

here, you can see it is correct because

now even things that aren't lowercase

values, for example, they're just like

dashes or underscores, those will be

treated as if they were a lowercase

value and passed along normally. So now

that solves all of these different

values. We only have these three that

aren't working as we expect. So let's go

ahead and we'll just copy over the text

to see why these ones aren't working as

we expect. And if we look at our test

here, we can see, okay, it looks like

the reason why is because the very first

capital letter is getting a dash put in

front of it when in reality it

definitely should not be because it's

the first character and the first

character should just be lowercased with

no dash added in front of it at all.

Now, I think there are two different

ways we can solve this. There's one way

I can definitely think of off the top of

my head that's easy, but in my opinion

is a little bit hacky, and that is that

we can use essentially an additional

parameter inside of our kebab case

function that is optional. So, you don't

normally pass it in, but allows us to

keep track of things. Often, it's called

like an accumulator. So, like in a

reduce function, you use an accumulator

to keep track of things. It's the exact

same thing in this particular case. So,

we can use an accumulator of some form

that just says like is first and we can

set that to be true by default. We can

say that it extends a boolean. So it's

either going to be true or false. By

default, it is going to be set to true.

But every single time that we call this,

we can just set this to false. So that

now it is not the first value. So then

essentially what happens is we can add

another if check inside of here by just

saying after that colon, we can say is

first extends true. If it's the very

first one, then we essentially want to

just lowercase the letter and not push

the dash in front of it. Otherwise, we

want to put the dash in front of it. I

think this alone will actually solve our

problem. So here we just remove that

dash. And now actually it does look like

we've solved all of those individual

cases. Now I'm personally not a fan of

this approach because if I don't need to

add these accumulator values on there, I

don't like to because now all of a

sudden I can come in here and just pass

false and all of a sudden I break my

entire thing even though that is a valid

way for me to be able to pass that in.

Now it is saying that type false does

not satisfy the constraint true. That's

because this thing is not passing. And

if I just paste this up here, you can

see I'm getting that dash back in the

front because I'm overwriting

essentially true false if this is the

first time I'm accessing this or not. So

I don't really like this particular way

of doing things. And it also kind of

goes against the spirit because they

didn't have this as part of the

challenge. So I want to try to solve

this in a different approach. So let's

go ahead and get rid of all of that is

first stuff that we added. We'll get rid

of this one and we'll get rid of those

extra false checks in there. So now we

should be left just with those original

failures that we had. And I'm just going

to again create that type test.

There we go. So we at least have this

thing that we can look at. Now I think

the way that we're going to be able to

solve this problem is by essentially

assuming that the first character we

don't really care about and instead

we're going to be focusing on all of the

later characters in our actual check

here. So what we can do with our first

character is just lowercase it no matter

what because we always know that it

needs to get lowercased. And then we can

work on the next set of characters

inside of our list after that. So, when

we're doing our check to see if we have

lowercase or uppercase values, I

actually want to use the rest of the

characters in our string. And

unfortunately, lowercase checks to see

if an entire string is lowercase. And

uppercase checks to see if an entire

string is uppercase. But we actually

have another one called capitalize. And

this checks to see essentially if the

first character of each word is a

uppercase letter. So, we can come in

here with rest. And if our rest

character extends the capitalized

version, that means that they both start

with a capital letter. And now we know

we have a capital letter at the start of

our string, we can take that capital

letter and we can essentially make it

lowercase and put a dash in front of it.

So let's go ahead and we know that we

want to essentially flop the order of

these because we're now essentially

doing our check in the reverse order.

And in this case where we have a

capitalize, I want to put a dash in

front of essentially the rest of my

character. So the dash is going to go

right here. I always lowercase my first

letter no matter what because it doesn't

matter if it's uppercase or lowercase.

The first letter should always be a

lowercase value and we don't have to put

any dashes in front of it. And then here

with the rest of our values, I want to

lowercase just the first letter. So I

think we have not capitalized or

something along those lines. That's like

the opposite of capitalized. Let's come

in here and actually see what it's

called.

Or maybe it's uncalized. There we go.

Unc capitalized. Essentially, this is

the exact opposite of capitaliz. it

converts the first character of the

string to lowercase. That's exactly what

we want to do. So now in this particular

case, we're lowercasing our first

letter. And if we have a capitalized

first letter in the rest of our string,

we're putting a dash in front of it. And

then we're lowercasing that one letter

and just calling the rest of our code as

is. Next, essentially, I want to do the

same thing in this section down below.

But I don't need to worry about

uncalizing any letters or putting a

dash. So I can just get rid of this

uncalized content and get rid of that

dash. Now let's go ahead and actually

see what the code is being returned

because obviously we have tons of errors

down here and right now it's returning

fu bar baz which it has a dash at the

end though which is definitely not what

we want. I think the reason that this is

happening is because eventually we get

to the point where rest is an empty

string because our string gets down to

one single character. So a is that one

character and the rest of our string is

an empty string. So we have a little bit

of a problem there. Uh there's a few

different ways that I think we could

solve this, but the easiest I think is

just by swapping this with uncalize here

and then swapping the order of these

because then essentially an empty string

is going to be considered essentially

uncalized. So then we can make sure that

we have all of this code as is. And

yeah, I think if we just save actually

that will solve our particular problem.

So this makes it so that empty strings

follow this test case instead of

following down here. I could also add in

an additional extends where I just check

to see if it's equal to an empty string

as well. But this is a little bit easier

because doing like an and check or an or

check in Typescript requires you to do

lots of turninary nesting which is

obviously not ideal. Now technically

this solves the problem that we're

looking for. But I actually want to take

this a step further by using one of the

techniques that absolutely blew my mind

the first time I heard about it. And

that is the idea of tail recursion. If

we take a look at our code, everything

looks fine. But what happens if we try

to execute this on a string that's very,

very long. Let's just come in here and

paste this down a few times. And you'll

notice our code goes from working to

getting an error. And if we hover over

this, it essentially says type

instantiation is excessively deep and

possibly infinite. Essentially, if you

recursively call a type too many times,

usually it's like 40 or 50 times,

TypeScript essentially says, I have no

idea what to do. This is too deep, too

much recursion. I'm just going to throw

an error because I don't know how to

handle this excessively recursive thing.

So instead, what we need to do is we

need to figure out a way to actually

handle this recursiveness. And that is

by using something called tail recursion

which like I said blew my mind the very

first time I heard about it because it

essentially allows you to solve these

particular problems relatively easily.

And all tail recursion is it's a fancy

word and there's a lot of fancy

definitions but from my simple

understanding essentially what we need

to do is call the recursive function

before we do any additional checks

inside of our code and just immediately

return that value. So in our case here

we have our simple you know just extends

check. That's perfectly fine but then

we're doing another check down here.

This is like our first main check. So

we're doing a check to see if things are

capitalized and then we're extending

code in front of our kebab case. So

we're returning an additional value

that's not just our, you know, recursive

version of this. So we have a bunch of

stuff going on, additional checks, as

well as additional data being added onto

our kebab case, which means that it's no

longer tail recursive because we're not

just returning the value of this thing.

We're instead returning the value plus

something added onto the start of it

every single time. So instead, we need

to make it so that whenever we call

kebab case, it's going to just return

itself with no other stuff being added

on. The easiest way for us to do that is

to actually add one additional level of

nesting at the very very top where we

just call kebab case just like this with

the rest of our code. And what we need

to do is just say that infers some

random type. Doesn't matter what it is.

We're just going to call this our

string. So we'll just say str just like

that. Then we can put our question mark

syntax. And we can come down here with

our colon syntax as well. And for this

one, we're just going to put never as

the type because it should never be

possible for this not to infer this

string type right here. Now, I also need

to make sure I come in here with an

extend just like that. So, essentially,

we're saying, hey, this kebab case

extends inferring whatever it is. So,

essentially, it extends itself is what

we're saying. We're just taking whatever

the value of this is and putting in a

new variable called str. So now, every

time we're using kebab case, we can

replace that with str. And we can come

in here,

make sure I get that correct, and we can

replace the exact same thing down here

where we have this str. And that should

actually solve our particular problems.

I am noticing that we're getting a

little bit of an error because this

could be a string, number, boolean, blah

blah blah, all these different things.

So, we of course need to add another

check that just says str extends string,

which in our case, we know that it

should extend a string, but TypeScript's

not smart enough to do that. So, if it

doesn't extend a string, we'll return

never down here. Now, to make sure that

this works, I essentially also need to

copy over this fooarb baz a bunch of

times to give us essentially the same

number. And I copied it down a few too

many times. There we go. And now you can

see that this string that was too long

originally is now able to be solved

because of this tail recursion. We are

making sure that every time we call

kebab case, when it's being called

recursively, it just returns immediately

with no extra stuff being added on. You

can see we call kebab case with whatever

the rest of this is. No extra stuff is

being added on. No other checks are

being made. it just returns itself. So,

it's able to essentially exit out. But

since we still need to do additional

things with this content, we just add a

simple extends infer right here that

essentially takes whatever this value

was supposed to be, puts it in a brand

new variable, and now we don't have to

worry about that recursive stuff because

TypeScript is smart enough to just

essentially evaluate this section for

the recursive portion, and figure out

everything else on its own. Now, this

wasn't actually part of the example

itself, but I read about this when I was

doing some TypeScript research for

different projects, and it blew my mind,

so I had to mention it to you because

it's absolutely amazing. Now, we get to

move on to what is hopefully probably

going to be by far the hardest thing

because it's in the hard category. And

that is implementing a git function. And

this is something that's really common

in a lot of different libraries such as

load dash. And it's a convenient way to

be able to access nested data. So for

example here if we have this type that

is data which has foo bar it's got a

value it's got count all these

additional things inside of it. We just

want to call get data and we can say

like fu.bar.count and it's going to go

into fu go into bar and give us the

actual value for count or we can say you

know we want to get the data for just

hello and it's going to check this hello

string. So it allows us to essentially

recursively and nested go through an

object and get all the different values

from it. Importantly it says accessing

arrays is not required in this

challenge. So we don't have to worry

about that which is kind of nice. we can

instead just focus on objects. So if we

take a look at our test cases, I think

this will help inform what we actually

want to do. We can see obviously if

something doesn't exist, we return

never. That makes a lot of sense. A

single key just returns whatever that

value is. Hello goes to world.

fu.bar.count, as you can see, just goes

through the object itself. This one,

fu.bar, is actually the key itself. So

we need to make sure we not only use

dots for nesting further into our

object, but also a key could have a dot

inside of it. And we probably need to

check that first before we do our

nesting sections. So I think for the

most part this isn't going to be too

complicated for us to do. Yeah, you can

see foo bar is returning the full object

because foo bar gives us this whole

object. So let's try to go ahead and

think about what we want to do. T is

going to be our data object. So I'm

going to call this object just to give

it a better name. And K, that's the key.

We can just call it key. It's perfectly

fine. Now if we didn't have to worry

about nesting, I could just come in here

and I could say object of key. And

that's going to get us whatever the

object at that key is. And obviously

that solves these two particular

problems right here. Now we are getting

a little bit of type error because key

cannot be used to index something that's

a type of object. So we know that key is

going to be a string. So we can say

extend string just like that. And we

know that this is going to be an object.

So we could say extend record of

property key

and it's going to be unknown because we

don't know what data type that

particular thing is. So I think we're

already on to kind of a good start.

Essentially we want to get the value

from the object and if we have a value

from that we just can return it as is.

So we can say if this extends any then

that means that we have an value at that

particular key. So we can just return

that object key

just like that. Otherwise we need to do

something with that particular value.

Now in my case I'm just going to return

never to make sure our other test cases

are still passing. And as you can see

they are because we have something at

that key. So it's returning what is at

that key. Now this one right here should

be returning never. And I don't quite

know why it's not. So let's go ahead and

take a look at it. We're going to

convert this into a type just like that.

We'll say t is equal to that. And we'll

hover over what t is. And you can see

the type here is unknown. And already I

think I know the reason for this. And

that's because right now when we do

object of key, it's essentially getting

us this generic unknown type. It doesn't

know what it is. Every single time it's

just returning our unknown type for us

because it can't figure that out. So

instead, we need to use some infer

keywords here to actually make this work

like we expect it to. So I can say

object key extends infer and we'll just

say prop because that's going to be our

property value itself. So now we're just

essentially taking whatever this is and

putting in its own type called prop.

Then what we can do is we can say prop

extends any and then we're going to just

return that value. Otherwise we return

never. And again we'll return never down

here. If for some reason this does not

extend properly. Now it doesn't actually

look like that solved our problem and we

may not even need this prop. So, I'm

pretty much going to get rid of all of

this code and instead of extending any,

I'm going to extend unknown because it

seems like what's happening is when it

can't find the key, it's returning

unknown instead of returning never,

which is a little bit unintuitive for my

own thought processes, but it kind of

makes sense because it could have a key

at that value. It just doesn't know it.

So, we can come in here and if it

extends unknown, then we return never.

Otherwise, what we're going to do is

we're going to return our object of key

just like that. And if we go ahead and

we take a look at this, you can see this

particular one is returning never, which

is like we expect. But for some reason,

our hello one is not working anymore. So

we can say type h is equal to our hello

one. And this one is also returning

never. So it's essentially always

returning never because everything

extends unknown. I believe I think

that's the thought process behind it. So

I think instead of what we need to do

here is just check if it's a key of this

particular object. That's probably going

to be a much easier way to do this. So

we can say if our key extends key of

object then that's going to be

essentially the same thing. So we can

swap the order that we were doing these

in. Put this one as never just like

that. And that actually did solve our

particular problem. You can see this one

is now never and this one is set to the

correct type. So I was just trying to be

a little bit fancy there with this any

unknown stuff. We just really need to

check is this a key that exists on the

object. If it is a key that exists on

the object then obviously what we need

to do is just return it as is.

Otherwise, instead of returning never,

we actually need to do some more nesting

because it could be the case where it's

something that doesn't exist or it could

be the case of where we just need to get

the first character and essentially

rerun it back through this particular

function for getting. So now what I can

do here is the same thing I did before

to be able to get the character before

the dot and all the characters after the

dot. So I can say that my key extends

infer and I specifically want to infer

here the start of it. So we'll call this

our key one. So we'll just say K1 and

we're going to put a dot

and we'll come in here with K2. So this

is everything that's after. We'll call

this rest because it's a little bit

easier. And then this is going to be our

internal key that we want to use. Now we

need to come in here. We'll put never

for both of these just so we can get

some type safety stuff going on. I need

to make sure my infer keyword is inside

here. Whoops. There we go. Now we give

that a quick save. And that looks great.

So now if our key extends this

particular thing, we can now essentially

check to see if our object key is

essentially a key. So now we can say

here essentially the exact same thing we

did up here K1 extends

key of object. If that's the case then

what we want to do is we want to call

get

and we want to pass it in essentially

all of the remaining keys and that's

going to be for our key section and our

object is just going to be object

of K1 and we want to return the rest of

our keys afterwards. There we go. Now in

the else case then I think we can safely

return never because if this K1 is not a

key of the object then it's essentially

going to be never. So we can just come

in here and we can put never at the end

there. And now we're getting a little

bit of an error here. It says object K1

does not satisfy the constraint record

property key unknown. That technically

makes sense because it doesn't know what

this particular type is. I think we can

just get rid of this entire extend

section up here and it's going to be

fine. And actually it looks like that

entirely solved the problem that we're

going with. I thought we'd have to go a

little bit more complicated, but it

makes sense that this is solving it like

we would expect it to. Now, I think

we're going to run into the same error

where we can't do our like 50 levels of

nesting. But the nice thing about this

is the 50 levels nesting is for each

dot. So, we would have to have an object

with over 50 different levels of nesting

that we go through. But, we can kind of

look at this to see if there's maybe a

different way that we can go about

solving this particular problem. And I

think we can actually simplify this

slightly because essentially we don't

really care if K1 extends the key of the

object at all. if it doesn't extend it,

it's going to return never. But if we

just try to access object K1, it's going

to return never if that thing doesn't

actually exist. So instead, what we can

do is I think we can just put our

recursive call directly right here and

get rid of this entire nested section.

If we give that a save, actually, it

looks like it's not quite working as we

expect because yeah, K1 can't be used to

index this because we don't know that

it's a key of it. So that makes sense.

We can bring it back to what we had

before because this does work like we

expected to. Now, I am curious to see if

this will work with arrays though. So

let's come in here and actually like add

in an array. We'll just say r is going

to be an array that has a value of 1 2 3

just like that. And let's come and just

do a simple test. We'll say is it foo r

and that's going to be of zero. So I

think we just need to do zero and that

should be equal to one just like that.

And actually it does work with arrays as

well. If we come in here with two that

should be set equal to two and actually

sorry one index one should be set to

two. So yes this does work with arrays

which is really cool. I think we could

even do nested objects. For example,

inside here I could say bar is actually

equal to one now. And what I could do is

I could say array of0.bar

that should be equal to one. And that

test case does pass as well. And that's

essentially because this key of property

essentially arrays are objects inside of

JavaScript. So it's just able to

determine okay the key here is going to

be two for example or or sorry not two

it's going to be an index of one or zero

in our particular case. So essentially,

it's just working like that index

accessing of arrays works exactly the

same as accessing the actual properties

on objects. So it's nice that this

actually works for arrays, even though

it's not part of the challenge. Now, if

you enjoyed this video, you're going to

love these other two videos where I

create a full React router from scratch

with full type safety and I implement

internationalizations with massive type

safety unlike any library I've ever seen

before. Both those videos, they're going

to be linked right over here for you.

With that said, thank you very much for

watching and have a good