Podcasts Technology Syntax - Tasty Web Development Treats TypeScript Fundamentals Getting a Bit Deeper

TypeScript Fundamentals Getting a Bit Deeper

Published: April 28, 2021, 1 p.m.

In this episode of Syntax, Scott and Wes continue their discussion of TypeScript Fundamentals with a deeper diver into more advanced use cases.

Deque - Sponsor

Deque\u2019s axe DevTools makes accessibility testing easy and doesn\u2019t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at\xa0deque.com/syntax. No credit card needed.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It\u2019s an exception tracker, a session re-player and a performance monitor. Get 14 days free at\xa0logrocket.com/syntax.

Mux - Sponsor

Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you\u2019re serving a few dozen streams or a few million. Visit\xa0mux.com/syntax.

Show Notes Deep end stuff

03:30 -\xa0any vs unknown

06:20 -\xa0never

13:25 - Type generation

  • Can be generated from GraphQL, or Schemas, or from JSON Output

17:20 - TypeScript generics (variables)

  • Kind of like functions, they return something different based on what you pass it
  • makeFood
  • makeFood
  • This function makes food and shares lots of the same functionality between making a pizza and sandwich
    • If the only thing that differs is the type returned, we can use generics
    • You often see this as a single char T
    • It can be anything
    • Promise is a generic
    • querySelector uses generics

21:48 - Promises / Async + Await

  • Functions now return a Promise type, but with a generic
  • Promise
  • Promise
  • Promise>, Request, Request
    • stringified
    • added headers

29:48 - Type assertion (type casting)

  • Type assertion is when you want to tell TypeScript \u201cHey I know better than you\u201d.
  • Two ways:
    • as keyword (most popular)
      • someValue as HTMLParagraphElement
      • Tagged before
        • someValue

34:14 - TypeScript without TypeScript (JSDoc\xa0/\xa0TSDoc)

40:08 - Interfaces vs Types

How we write TypeScript

44:27 - Interface or Types

  • Scott - Types
  • Wes - Interfaces

44:50 -\xa0any vs unknown

  • Scott - any
  • Wes - unknown / any

46:52 - Any (No Implicit or Implicit Allowed)

  • Scott - No implicit any
  • Wes - No implicit any

48:31 - Return types (Implicit or Explicit)

  • Scott - Explicit always
  • Wes - Not always

50:49 - Compile (TSC, Strip TS)

  • Scott - Strip
  • Wes - Both

52:38 - Type Assertion (as or )

  • Scott - as
  • Wes - as

53:09 - Arrays (Dog[] or Array)

  • Scott - Dog[]
  • Wes - Dog[]

54:02 - Assert or Generic (if both work)

  • querySelector(\u2019.thing\u2019) as HTMLVideoElement; or querySelector(\u2019.thing\u2019);
  • Scott - querySelector(\u2019.thing\u2019);
  • Wes - querySelector(\u2019.thing\u2019);
Links \xd7\xd7\xd7 SIIIIICK \xd7\xd7\xd7 PIIIICKS \xd7\xd7\xd7 Shameless Plugs Tweet us your tasty treats!