Check out a free preview of the full Making TypeScript Stick course

The "Typerdy" Lesson is part of the full, Making TypeScript Stick course featured in this preview video. Here's what you'd learn in this lesson:

Mike provides a brief TypeScript version of the game Jeopardy. Categories covered include language features, compiler options, utility types, tools and ecosystem, best practices, and JS/TS conversion.


Transcript from the "Typerdy" Lesson

>> This game is a TypeScript version of the popular game show Jeopardy. And it's a PowerPoint deck that is, it is in the Making TypeScript Stick repo, the same repo you're using for your exercises. So if you look in the Games folder, there's Jeopardy-1.PPT. So we're gonna play a couple of these, but this is a good thing, maybe, to play with your team at the beginning of the week in your standup, go through a couple of questions.

And I used a free template for this, so you should feel free to kind of share it around and tweak it as you see fit. So I am not going to ask people to play against each other in class here, but I will ask you to request that we take on, as a class, numbers in certain categories.

So what we have in terms of categories are TypeScript language features, compiler options, utility types, tools and ecosystem, best practices, and JS and TS conversions. And we'll leave the rest for you to play at home, or with your team. So Emma, you look very excited.
>> [LAUGH]
>> Why don't you pick our first question to answer?

>> I'll take JS/TS conversion for 600, Mike.
>> Okay [LAUGH].
>> [LAUGH]
>> So the answer is you may need to install one or more of these in situations where dependencies do not provide their own types. I see a hand up.
>> Polyfills?
>> I'm afraid that's incorrect.

Polyfills have some runtime component, usually. It's not purely type information. Someone requested potables for a thousand. I'm afraid that's not actually a category.
>> [LAUGH]
>> All right, time's up. The answer is @types/* packages. We also would have accepted definitely type, which is the project where all this is hosted.

So this is where you get your react types, and things like that. All right, so next question. Would somebody else to request one?
>> Can I get tools and ecosystems for 400, please?
>> Tools and ecosystems for 400. All right, the answer is, this is the official linter recommended by the TypeScript team.

>> ESLint?
>> Correct, ESLint is the answer.
>> Of course.
>> Used to be TSLint, but let's keep going. Okay, so we just did tools and ecosystem for, I think 400 should clear in a second. Another category here, how about someone who's watching online? Best practices for 800, thank you very much.

When using this language feature, it's the author's responsibility to ensure they're initializing class fields properly. I'm sorry, Oscar, abstract is not the correct answer. The answer is, if I click on the right button, is the definite assignment operator. You may have seen this where you do exclamation mark colon.

And at that point, even if you didn't initialize something in the constructor, TypeScript will quiet down and submit. All right, and the way I'm getting back to the home screen is I'm clicking on the word Solution, which takes us back there. All right, other requests?
>> Can we do utility types for 600?

>> Utility types for 600. All right, so in this category, I have stripped out an important part of the code. We're using utility type here, and you tell me what utility type am I using?
>> Record?
>> I believe that's correct, let's see. Record, congrats. So the subtle thing to notice here, there's a comma there, right?

So it's a lot of or or or, and then there's no pipe here. So it's red, green, or blue, those are the property names, and then the value type is number or string. But, certainly a challenging one to read. Okay, any other requests?
>> Those language features for 400.

>> Language features for 400, thank you, Mark. Name this language feature. And the more specific, the better. So saying a type is probably too general. It is a type.
>> Is it the implicit type, or inferred type?
>> There is no inference going on here. TypeScript doesn't have to guess anything.

>> Online, they're saying string literal.
>> String literal type, that is correct. It's a string literal type, right? It's only the special string red. All right, we can make this the last one.
>> Judith wants to go big here with-
>> Tools for 1000.
>> Tools for 1000.

>> Swinging big. A runtime written in Rust, that can run TypeScript code directly with no compile needed. I see the answer, Michael S in chat says Deno. Deno is a Node.js alternative written in Rust that can run your TypeScript code directly. It's pretty fast, I don't know anyone who's using it in production, but a cool project to look at.

Thank you for playing. Feel free to play with your team also. It's fairly easy. If you grab this deck, you can replace it with your own questions. Nice thing to do if you have an all hands, or something like that, and it's kind of fun way to test your knowledge.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now