Stop Using {} In TypeScript

🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#Shorts

[@1DrowsyBoi]

Type-safe language programmers:
"Look what they need just to mimic a fraction of our power."

[@abh1yan]

hate from javascript developer

[@bbarreir0153]

In all fairness, strict TS is almost like Java, as long as you dont use "any" or some stupid typing. We can just ignore the typing and if you don't do weird things you'll almost always get the correct type inferred, specially with the latest versions of TS. TS is not JS

[@mr.k8660]

You ain't building no web UI with those type safe languages tho

[@abhayprince]

I name it key instead of index.
{ [key:string] : unknown }

[@j.r.r.tolkien8724]

Makes more sense. I thought it had to be named index.

[@dorian0623]

I'd also use key or property but index should be just fine as it stands for index signature

[@ninhdang1106]

Same thing but I use the Record syntax instead. Kinda more pleasing to look at

[@idylanxe]

And it works

[@Percevaaaal]

Same here 👌

[@christianpuldon7201]

For a split second I read "Stop using TypeScript"

[@FkDJT-ut1hm]

And that would have been good advice.

[@teawrld5976]

​@@FkDJT-ut1hm why?

[@anere5326]

@@teawrld5976 he has been paralysed by fear

[@und0]

you should mention the `object` (note lowercase) this is the most generic pure object you can specify, usually useful it you're extended a generic. function foo (bar: T) { return Object.keys(bar) }

[@devperatetechno8151]

thanks kyle, keep with the snippets of TS

[@nomadshiba]

also you can do `Record`
`PropertyKey` shorthand for `string | symbol | number`

[@thefanboy3285]

The title made me think for a moment there was a trick in TS to get rid of the block scope delimiters "{" "}" lol

[@RonnieMcNutt_Mindblowing]

Me watching this even though I know nothing about coding: Very nice

[@IAmLesleh]

No better time to start

[@x3zlo]

​@@IAmLeslehI think this person wants to finish, not start 😏

[@graphicdesignandwebsolutio365]

Fuck typescript

[@ivansostarec2564]

You should try coding

[@Dipj01]

​@@IAmLeslehactually it's the worst time to start

[@charliesta.abc123]

Thank you so much Kyle! I've been struggling to type the ioredis georadius result. This will help me

[@ffuego9751]

These shorts are awesome, goat js/ts content creator

[@andrewjarrett132]

Record won't exclude arrays though.
If you want to exclude arrays, you'll need to do `Record`.
There are a few small corner cases where `Record` is too strict, but those don't come up much in user-land.

[@brettchan3572]

You sure?
type personData = Record;
// This will cause a TypeScript error because it doesn't match the declared type
function f(obj: personData) {
return obj;
}
f(["3"])
// Argument of type 'string[]' is not assignable to parameter of type 'personData'.Index signature for type 'string' is missing in type 'string[]'.ts(2345)

[@andrewjarrett132]

I assumed you’d be putting the type in a generic (which is usually what you want - if your use case looks like that, it’s probably fine to just use `object` and allow arrays)

[@theefeold]

how tf are you supposed to make an array with string indexes?

[@andrewjarrett132]

​@@theefeoldit's not that arrays have string indexes, it's that arrays have methods, and methods are strings. The symbol trick is a hack that only works because it takes advantage of how index signatures work in the TS type system -- and it's not bulletproof. An interface declared that way -- interface MyInterface { [x: symbol]: unknown } will behave* differently (unfortunately)

[@travispulley5288]

Super helpful! Relaxes my brain to think of it this way

[@thecoolnewsguy]

Deno helped me a lot to learn TypeScript and avoid some bad practices such as this one

[@dimarak8866]

One could just type it like this:
type Obj = {
name: string;
surname: string;
};
Record is only needed if you want to build a versatile function that handles different objects with the same structure or if you expect an object from an API f.ex. to change property names in the future

[@IStMl]

You can't pass any object with the type you defined. Thats the whole point of this short.

[@dumbfailurekms]

@@IStMl Isn't date an object..
The point of this short is specifically to allow objects where the key is of type string and the value is unknown to ts (or similar definitions)
but ANY object should accept date

[@sterin557]

Need more typescript stuff

[@pavankumard5276]

Commenting so that youtube recommends more of these type of shorts❤

[@roshan4348]

Great typescript video!

[@risitas5874]

Thanks for teaching me this, although I don't think I will be adopting this pattern. The codebase has to be already be using it

[@j.r.r.tolkien8724]

More please. I'm transitioning to Typescript.

[@ghdshds1899]

don’t

[@spythere]

They were not seen again... That's the price of moving to TS.

[@j.r.r.tolkien8724]

There's literally no price of moving to TS. That's the great thing about it. Just wirte your js in a .ts file. You'll lose nothing and whatever you can add a type to you reap the benefit. You don't have to go deep into types. You can just minimize the mistakes.

[@ghdshds1899]

@@j.r.r.tolkien8724 the price is now you use typescript and you have officially adopted the worst implementation of types in any programming language

[@Pr0methium]

@@j.r.r.tolkien8724 Yeah + intellisense, your code is eventually more safe logic-wise as well, pretty good for a production environment.

[@nozomi_tailwind]

i use the 2nd method cz i can easily understand like writing the object itself

[@ibnlanre]

type Param = Record;
Object keys can be a string | number | symbol.

[@bob_kazamakis]

{} is actually pretty powerful when you want to accept any value that isn’t undefined or null. It’s an any, but that any must exist

[@GurjotSingh-no4hx]

wouldn't the same apply to the 2 alternate solutions he provided?

[@3UM6A6BE]

You can make your intention more clear by using NonNullable

[@alexcoroza4518]

If you do not want to accept null or undefined then you can configure you typescript's strictNullChecks to true

[@bob_kazamakis]

@@GurjotSingh-no4hxno. Record limits the expectation to an object and not any of the aforementioned primitives

[@bob_kazamakis]

@@alexcoroza4518that’s not the point or intent of what I’m saying

[@AdamLeis]

I've been all up in Record in the past months. It seems cleaner to my eyes for some reason than the key index approach (2nd version he showed).

[@PatoFrango]

I think something like this in Python wouldn't be a problem since the language clearly distinguishes between "dictionaries" and objects that are "instances of classes"

[@nomadshiba]

Also you can still use it, its a great way to tell that something is anything but non nullable

[@distantv0ice]

I knew about Record but then I wanted to type an empty object (to fill with keys and value later) and that turned out to be a problem. Using {} works for the moment.

[@cypherusuh]

this makes TS A LOT more complex than I thought...

[@johnsoto7112]

I love the record syntax over the 2nd one

[@solomonowusu-ansah1751]

I use the second option. But I've learnt another way. Thanks

[@urban8499]

Hey thanks , never knew about this

[@cafelutsa_]

Please stop producing videos with the format of "Stop doing X thing"

[@TheSaintsVEVO]

Elaborate

[@cafelutsa_]

@@TheSaintsVEVO Elaborate on what?

[@samipplays]

Everybody seems to like it tho

[@pepperdayjackpac4521]

Why?

[@TheCroninberg]

​@@pepperdayjackpac4521as it gets more views/ more people are curious

[@nostalgia5031]

Doing “Record” also works

[@IStMl]

did you not watch the short?

[@OliverEbsworth]

I use an Interface and mark each things as its type
instance objI {
name: string,
email: string,
image: string,
}
Is this wrong?

[@alexcoroza4518]

yeah. in Angular this is how they type things and it should be on most projects using typescript

[@OliverEbsworth]

@@alexcoroza4518 cheers man, I appreciate your reply.

[@asherrfacee]

Using an interface/type/class when you are expecting a specific object type is definitely the best option.
In the rare case that you want to accept any object except a Date, instead of using his solution, I recommend using a conditional type:
function processObjectWithoutDate(obj: T extends Date ? never : T): void {
// Process the object
// ...
}

[@riacharda]

I'm guilty of doing this. Massive thanks 👍🏾

[@StuartLoria]

Actually useful, I could use a longer video, interesting topic.

[@justindouglas3659]

Can you do a typescript tutorial?

[@FurryDanOriginal]

I can recommend Matt Pocock for that.

[@justindouglas3659]

@@FurryDanOriginal ok thnx do ypu happen to know someone for php. Seems i need to learn it anyway.

[@FurryDanOriginal]

@@justindouglas3659 Unfortunately no. Outside of some basics, I never needed PHP nor was interested in it. But by searching for PHP tutorials you surely should find a lot of creators and just stick to the one who seems to flow with your prefered style of learning the best.

[@Me-vc4sf]

​@@justindouglas3659 "php for beginners " from laracast channel one of the best php tutorial ever

[@yohanlopes1847]

amazing, thanks!

[@rtpHarry]

Great shorts normally but I never bump into this issue, which is confusing as you say "by far the most common issue". If it's being passed like that its normally more defined like as an interface, or as you recommend a type. I never go near the Object type directly.

[@abe_is_live]

Yea what's the point of using typescript if you don't want to define what the structure looks like lol

[@adityatripathi1904]

Record

[@hadawardgz]

Sure, now try this and see if you can pass a date object:
type Foo = {
bar: string;
}
It will only pass if date has the properties that the object needs. If it doesn't, then it doesn't work, and if it does, great, I won't look for properties other than those necessary. And, for any reason if you need to allow objects of unknown properties then you can just:
type Param = {
[K: PropertyKey]: unknown
};

[@FkDJT-ut1hm]

Cool. I'll go back to writing code that doesn't break because of a lack of knowledge when it comes to data types and how they are used; ergo needing a whole other language just to over-specify my dataums.

[@vitalysuper3193]

object, Record, …And object of ANY form: Record

[@ilkinismailov4438]

{} means "anything but a `null` or `undefined`"!

[@pierrehenriot2480]

Are you Captain Pike's son ?

[@rammahkarpous]

Cool, thanks 👌🏾

[@anshXR]

bro how u so majestic

[@geneticallytails]

By far the most common mistake junior devs make is thinking they are smarter than a compiler and throw away readability for pointless char saving ideas. Also doing micro-optimizations on the behalf of readability...
Edit: Just waiting for the smartass to write: "less chars = less file weight and possibly less exec time"... the compiler is there for a reason.

[@Mohamed_MDJ]

I didn't learn typescript yet , but I can easily understand what did you write, so is it very simple?

[@bronzekoala9141]

Nice tip, but how on earth is this the "most common mistake"?? I've never even come into a situation where I could've done this mistake.

[@sqfzerzefsdf]

@bronzekoala9141 like he said everything inherits from object so there's a lot of potential reason to pass one around and there's plenty of room for mistakes due to how unintuitive something as abstract as object is

[@asherrfacee]

I agree, not a common mistake. I’ve been writing typescript for 10 years. This is a weird niche case where you want strictly compile time type checking for any object except a Date. I say strictly compile time cause you could always use runtime validation for Date very easily which most cases would likely use.
His advice to never use object I find to be questionable advice, and his suggested use of the Record utility type is wrong according to the Typescript team. Record should only be used when you want strictly typed dictionary-like object.
If you want to exclude date just use a conditional type:
function processObjectWithoutDate(obj: T extends Date ? never : T): void {
// Process the object
// ...
}

[@birthdayzrock1426]

maybe it's really uncommon, but still the most common lol

[@patrickconrad2874]

Trying to make a react query clone and having a hard time wrapping my head around this concept. I want to easily store state values on any given page. This works to pass unknown state types, but now I'm wondering if there is a way to get full typing from the unknown values down stream? Anyone have any advice on this concept?

[@meudiariodev]

What's the name for this? How the folder to put those kind of object factory could be named?

[@mahadevovnl]

What about nested objects

[@blueghost512]

Which is due to missing tsconfig rules

[@Mari_Selalu_Berbuat_Kebaikan]

Let's always do alot of good

[@keleheart6632]

everyday I think I get it and then I get proven wrong

[@SRG-Learn-Code]

I hope JStypes come soon so we can stop with the TS madness.

[@richardflosi]

There is a spec for js comment annotations is the works, but it’s still some that 3rd parties like TS would read for typing.

[@RS-fz4ps]

If you knew the desired members of you Param, why wouldn’t you define a class for it instead? Isn’t that the point of typescript?

[@trFirzen]

I see these videos after I do these mistakes lol. Are you following my code?

[@MarcinCebula]

You could do that...but...should you?
you can `typeof ` an object or create a class.
At this point you might as well just say `any`

[@Bohdan29]

This won't work if you have an object that is declared as an interface.

[@IStMl]

just dont mix types and interfaces

[@Ptaszqq]

I haven't seen anyone typing object Object yet

[@donnyp7350]

Thankss

[@HellMuerto]

Same people that makes fun of Java because « bOiLerPlaTe »

[@T1Oracle]

My frustration is anytime I use typescript with a 3rd party library with broken, missing, and overly complicated types. Fighting both Typescript and a new library, is too much. I usually give up and revert to "any."

[@LeroyCellador]

Why not specifying the fields for the object type?

[@gronkhfp]

Or just create an Interface for your models

[@mystica-subs]

What do you mean the object works and the date no longer works? I don't see a difference? Where is the actual output of this code?

[@olhoTron]

Just stop using typescript and use an actually typed language

[@btoann]

This one doesnt work with interface. I have googled for some solutions, but almost of it are recommended replace type instead or using Record which i see no different from Object/any. Does anyone have another idea!?

[@asherrfacee]

You should only use Record utility type when you want a strictly defined dictionary-like object, so his solution is more of a hack.
In his example, it’s a simple case where you want to just exclude the Date type, so using a simple conditional type to exclude Date is the best option:
function processObjectWithoutDate(obj: T extends Date ? never : T): void {
// Process the object
// ...
}

[@sciencemommy]

Thanks!

[@Naej7]

You look like a Meghan Markle copycat

[@WebDevSimplified]

You are very welcome!

[@timothyhoytbsme]

What about nested objects?

[@chris-zlrr]

thats cool

[@mosesgelberg]

Why `unknown` and not `any`? What's the difference?

[@pixelotetm]

That record is the same as Map< String, dynamic> in dart programing, actually for dart to be able to work with Json, it needs to be converted to a Map of Strings keys and dynamic values

[@asherrfacee]

If you want a custom type for representing JSON objects in typescript, that provides additional type safety then I recommend the following:
type JSONValue = string | number | boolean | null | JSONValue[] | Record;

[@rico5424]

I hate typescript so EXTRA

[@markdesign1354]

wow, typescript is so complicated and non-intuitive.

[@josepheastman8509]

But isn't index like a main page?

[@Lucas-mu5no]

Awesome

[@a7mooz]

I use lowercase 'object' cuz it's simpler

[@JohnCostanzo]

I think biggest mistakes is not properly setting up a tsconfig.

[@ayandhara]

but {} gives me error every time !!

[@cbbcbb6803]

An object should be an object! What?

[@low_scarlet]

why not interface?

[@darkenblade986]

Actually the most common would be doing front end dev 😂

[@thecoolnewsguy]

Agree 😢😢 especially CSS

[@valcubeto]

Why unknown instead of Any

[@alexcoroza4518]

why not use interface?

[@TheDLK]

What's the difference between using Record & Record ?

[@thecoolnewsguy]

Unknown will throw an error until you check the type. Any will disable type checking and you don't have to check the type before using whatever you want

[@metamike_23]

java developers looking at this

[@roronoa_d_law1075]

Is it possible to have not string keys ?

[@asherrfacee]

Yes, you can also use numbers and symbols:
// Using numbers as keys
type NumberRecord = Record;
const numberObject: NumberRecord = {
1: "One",
2: "Two",
3: "Three"
};
// Using symbols as keys
const symbolKey1 = Symbol();
const symbolKey2 = Symbol();
type SymbolRecord = Record;
const symbolObject: SymbolRecord = {
[symbolKey1]: 42,
[symbolKey2]: 99
};

[@josephcs1235]

Damn I make this mistake 😂

[@azeek]

Cuz in reality you don't want an object you want smth like a dictionary.

[@preciouschidi5131]

Hello Kyle you have been of a great help to me in the last few years as a self-taught developer. Right now I need a job. It has been a real issue for me. I have been a developer of self, building projects for clients as a freelance but I really want to go out of this shell and work in real life company. This is a great problem for me. Please I need your help.

[@biyrololo]

What if {name: string} ?

[@ikelos8190]

or just use interfaces?

[@zack2415]

Why not use an interface ?

[@benji9107]

An object... That wasn't too hard

[@kleinertraitor]

hey kyle, whats the difference between unknown vs any?

[@bowiemtl]

They are like the exact opposites. Any allows any operation because it could be anything, unknown allows none without narrowing down the type. It’s better to read the documentation and code examples to really get the gist of it

[@Darkpill-2]

JavaScript has bigger problems than type checking. This is why projects are starting to dump typescript.

[@waffle8364]

I type script but it's a necessary evil I suppose

[@mooncorizer290]

Typescript generating more bytecode this slows down performance