Typescript Index Signatures, keyof Assertions & the Record Utility Type

[@DaveGrayTeachesCode]

In this tutorial, we'll learn about Typescript index signatures, the keyof keyword and the Record utility type. If you have questions, please join my Discord server where I answer questions and you can chat with other web dev students: discord.gg/neKghyefqh

[@barcalover016]

discord link you provided doesn't work anymore

[@Vietnamkid1993]

This may be a year old but it's definitely given me a lot insight on how typescript works. Tysvm

[@DiegoBM]

I know that you always say to strive for progress, but this one is perfection!

[@DaveGrayTeachesCode]

Thank you for the kind words! 🙏

[@johnconnor9787]

This is literally the best course on typescript ever

[@DaveGrayTeachesCode]

Thank you!

[@xRichhhx]

I just want to say that these series came right on time. I've been tasked to refactor most of our projects to TypeScript and continueing that trend in the future, and while I did know a little bit about it I certainly didn't know it to this extent. So again, thanks for doing these!

[@DaveGrayTeachesCode]

You're very welcome!

[@hamedayinde9434]

Hi Dave, I just want to say a very big thanks to you for putting out these series. I have watched all of the series and it was the best Typescript tutorial I've ever taken. I have started refactoring an admin panel project that was built purely with React into React with Typescript and I've never felt more confident in my Typescript skill. This is all thanks to the knowledge I got imparted through these amazing series. You're awesome Dave. Thank you.

[@DaveGrayTeachesCode]

You're very welcome! That's awesome and good work!

[@imigi427]

Great video, also In time !!! Yesterday I got error about indexes while refactoring code to ts from your another tutorial 'Node.js Full Course for Beginners' 7 hours. Thank you

[@DaveGrayTeachesCode]

Glad it helped!

[@gmjitendra]

Excellent Dave. Cleared so many doubts about Index Signatures and solutions off-course.

[@DaveGrayTeachesCode]

Glad to hear it helped!

[@adimardev1550]

woo! this chapter is by far covers the most usefull typescript concepts. i remember how i learn typescript from a 3hour long video, indeed i was very confident util i incounter edge cases where typescript could not cover. and i though, maybe there are more to typescript than just 3 hour course. that's how i found this series from Dave which complements my incomplete typescript skills. it would have been better if i found this series in the first place.

[@DaveGrayTeachesCode]

Glad it was helpful!

[@karansinghnegi9384]

Bless you sir, for keep posting videos of this series Do make performance series from this from basic to advance Love from 🇮🇳

[@DaveGrayTeachesCode]

Thank you! 🙏

[@denisborneman]

Best lessons on youtube i have seen. You are very good teacher! Thank you for all your videos, man.

[@DaveGrayTeachesCode]

Thank you for the kind words!

[@verydifferentthought]

Dave Gray is perfection!

[@DaveGrayTeachesCode]

Thank you for the kind words!

[@siddiqahmed3274]

Sir you really provide the best tutorials on every topic. thank you for all the efforts❤️

[@DaveGrayTeachesCode]

Thank you for the kind words, Siddiq! 🙏💯🚀

[@ua2894]

22:11 of course you can also intersect the Record type with another type which has an index signature, such as: type Incomes = Record & { [key: string]: number }; there is the added benefit that the compiler won't complain about dynamic indexing.

[@mirjana72003]

Amazing content, thank you very much Dave!

[@valikonen]

Great examples! Thanks!

[@TravinskiyVladislav]

Thank you, Dave

[@DaveGrayTeachesCode]

Welcome!

[@DissectTheDocs]

I think, keyof and typeof are not Assertions but Operators. Assertions are used to inform the TypeScript compiler about the type of a value when it cannot be inferred, while type operators are language constructs used to manipulate and create new types based on existing types. Assertions are used at the value level to override the inferred type, while type operators operate at the type level to perform operations and create new types. Anyways, thanks for free tutorials 😁

[@k303k]

Thanks for the video!

[@prafuldomde148]

Sir i have a request plz make a roadmap on full stack developer using ur courses and ur a best teacher in the world💗

[@DaveGrayTeachesCode]

Thank you for the request! I want to do this! 💯

[@praiseoshilim1006]

@@DaveGrayTeachesCode done this yet ?

[@7doors847]

TS Fridays!! 🔥 This series feels like your personal EVH tribute 😂✌️

[@DaveGrayTeachesCode]

Right on! 🎸🎸🎸🚀💯

[@kavorka8855]

Your videos are awesome!

[@sonamohialdin3376]

Amazing tutorial thank you

[@DaveGrayTeachesCode]

You're very welcome!

[@AhSoh7091]

Thanks Dave 🎉

[@DaveGrayTeachesCode]

Welcome!

[@adimardev1550]

Hi Dave sir, i just notice in your vscode, there are square like line that wraps the block of your code on where you're cursor is. i thought i'ts super cool! and helpful for productivity. we would to know what extensions you are using. at the same time, i've been following lots of very high quality toturials from you and i felt so grateful and thankful for your efforts.

[@DaveGrayTeachesCode]

Yes, I show how to add those lines in this short: kzbin.infoMDaxWffMjrQ

[@adimardev1550]

@@DaveGrayTeachesCode super thanks Dave!!!

[@belenpeluffo616]

Thank you very much for this tutorial! It has been very easy to follow! I have one question, tho, related to index signatures: why if I declare `[ index: string ]: string` i can still go and create a new property doing something like `const newInstance: IndexedType = { bla: "string1" } newInstance[2] = "some string"` and TS would create it without any issue even thought 2 is a number type and not a string type?

[@hoangthiendo1909]

Next.js or MongoDB can be the next course, please? Thanks Dave for creating such great free tutorials ever.

[@DaveGrayTeachesCode]

You're welcome! Next.js is on my short list. 💯 I have some MongoDB here: kzbin.info/aero/PL0Zuz27SZ-6OJQfjH8g_CAjgMbLoIleKN

[@Grishopping]

Gracias... Reportandome YO por aqui... att. Jose. Grillo

[@DaveGrayTeachesCode]

🙏🙏

[@BrentHarris00]

thanks so much

[@DaveGrayTeachesCode]

You're welcome!

[@guitareter]

Thank you for this lesson! I have a question! Why when we don't use optional properties, but use Index Signature, TS allows us don't provide undefined type to Index Signature? interface Transaction { Pizza: number, readonly [prop: string]: number } type T1 = Transaction["Pizza"]; const todaysTransactions: Transaction = { Pizza: -10, Books: -20, Coffee: -30, Tea: -10 } const todayRice: number = todaysTransactions["Rice"]; console.log(typeof todayRice); todayRice has implicit type number, but it's undefined =) And TS really happy with it, no errors at all)

[@DaveGrayTeachesCode]

When you type: const todayRice: number = todaysTransactions["Rice"]; You are explicitly saying todayRice is a number type. If you want TS to infer the type, do not provide the type. Then it will be implicit and TS will infer the type. Also note that you have said todaysTransaction is a Transaction type - so TS will infer based upon that and expect it to be a number.

[@guitareter]

​@@DaveGrayTeachesCode Sorry, I've wrote code with explicit type, right! I was testing this code with and without type for the constant todayRice when wrote the comment, and forgot delete the type... "... expect it to be a number", but in FACT there is undefined in todayRice variable. Even if explicitly defined as a number! Shouldn't that be number | undefined type implicitly? Or TS expects undefined and checks it only for optional properties? If I add this code to my code above: const totalRice = 10000; function updateTotalRice(rice:number): number { return totalRice + rice; } updateTotalRice(todayRice); / I've got NaN, but not an error) All properties except "Rice" in my code potentially undefined without need to check for its existence or use a non-null assertion operator when we use such a property...

[@DaveGrayTeachesCode]

@@guitareter very difficult to look at much code in these comments. Please join my Discord where you can post formatted code in the Typescript channel. Thanks! discord.gg/neKghyefqh

[@igorr4682]

Awesome video, as far as Record goes, is still don't find much of use for that Utility Type.

[@DaveGrayTeachesCode]

Thank you! Yes, I've seen it used by others more than I use it myself.

[@caffeinated-pixels]

Nice video. But you need to update the typescript playlist link in the description, it points to your Tailwind playlist 😀

[@DaveGrayTeachesCode]

Oof! Thank you for this note! Now updated! 🚀

[@johannedwardpolaniagonzale6797]

Hello Dave. Thanks for this incredible video. Dave, I have a question, do you know why my Visual Studio code does not show an error when I try to access to any property dinamically?. Is it a problem with any configuration of this editor? Thanks a lot.

[@DaveGrayTeachesCode]

Is this question in reference to this TS tutorial? Are you asking why Typescript is not showing an error? Remember, Javascript is valid TS so you can access properties dynamically.

[@johannedwardpolaniagonzale6797]

​@@DaveGrayTeachesCode Hello Dave, yeah I am following the steps of this video. For instance the error in the minute 4:52("No index signature with a parameter of type ''string"....) is not showing in the visual studio code. It shows the error in the browser's console.

[@DaveGrayTeachesCode]

@@johannedwardpolaniagonzale6797 strange - VS Code has great built-in Typescript support. Check your settings?

[@ricky499]

I have the same problem, but apparently it is because I didn't create a tsconfig.json file (tsc --init). After I did that, the error showed up

[@samislam2746]

What does `keyof typeof student` mean?

[@samislam2746]

I think typescript should rename `keyof` to `keysof` does that make sense?

[@Vietnamkid1993]

I can't join the discord for some reason so i'll ask the question here. How can I console log a dynamic key from a dynamic object? I always get undefined when doing console.log(json["compilerOptions"]) for an object like { "compilerOptions": { "allowJs": false, "paths": { "@/*": ["src/*"] } } } I'm trying to make a JSON parser that removes comments from a JSON so that it can be used. So far I think I have everything but this step.

[@josippardon8933]

Great tutorial, but it would be much greater if you provided some kind of notes/transcript of everything you say in video, so we dont have to waste time making notes from scratch.

[@DaveGrayTeachesCode]

This is like saying "Great comment, but it would be better if you read it to me so I wouldn't have to waste time reading it." C'mon man. Put in the effort to learn. Taking notes is something students do to learn.

[@hamidRaven13]

👌👌😍😍👍👍

[@rajthakur3307]

validationMessages = { fullName: { required: 'Full Name is required.', minlength: 'Full Name must be greater than 2 characters.', maxlength: 'Full Name must be less than 10 characters.', }, email: { required: 'Email is required.', }, skillName: { required: 'Skill Name is required.', }, experienceInYears: { required: 'Experience is required.', }, proficiency: { required: 'Proficiency is required.', }, };

[@handsome_man69]

I have herpes