TypeScript Fundamentals — Getting a Bit Deeper

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

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

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're serving a few dozen streams or a few million. Visit mux.com/syntax.

Show Notes

Deep end stuff

03:30 - any vs unknown

06:20 - never

https://twitter.com/Igorbdsq/status/1351681019196436482 09:14 - .d.ts
Definition files
Usually for existing libraries that don't have types
Can be generated or hand-written
Also really handy for pure JS projects, you still get good autocomplete because of these

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
, Request
- stringified
- added headers

29:48 - Type assertion (type casting)

Type assertion is when you want to tell TypeScript "Hey I know better than you".
Two ways:
- as keyword (most popular)
  - someValue as HTMLParagraphElement
  - Tagged before
    - someValue

34:14 - TypeScript without TypeScript ( JSDoc / TSDoc)

Really nice!
You can also add comments / descriptions
https://github.com/developit/redaxios/blob/master/src/index.js

40:08 - Interfaces vs Types

Interfaces have better perf
https://twitter.com/wesbos/status/1362418379919937545
https://blog.logrocket.com/types-vs-interfaces-in-typescript/
What do you default to?

How we write TypeScript

44:27 - Interface or Types

Scott - Types
Wes - Interfaces

44:50 - any 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('.thing') as HTMLVideoElement; or querySelector('.thing');
Scott - querySelector('.thing');
Wes - querySelector('.thing');

××× SIIIIICK ××× PIIIICKS ×××

Scott: Powerowl 16 Battery Recharger
Wes: Fairywill Pro P11

Shameless Plugs

Scott: Level 2 Node Authentication - Sign up for the year and save 25%!
Wes: Beginner Javascript - Use the coupon code 'Syntax' for $10 off!

Tweet us your tasty treats!

Scott's Instagram
LevelUpTutorials Instagram
Wes' Instagram
Wes' Twitter
Wes' Facebook
Scott's Twitter
Make sure to include @SyntaxFM in your tweets

Playing: 348: TypeScript Fundamentals — Getting a Bit Deeper

Is JSDoc Better than TypeScript?

Nothing in CSS - 0 vs 0px, no, none, hidden, initial and unset

Supper Club × Matt Rothenberg and Idan Gazit on Github Next

The New Syntax Site × Ingest, Stack, AI and more

JavaScript.exe - Standalone Executables

Supper Club × Bramus Van Damme on CSS

Potluck × JR Devs & Copilot × CSS Variable Limitations × SvelteKit

Why Is node_modules So Big?

Supper Club × Adam Argyle on What's New in CSS

Where Should You Host Your App? Hosting Providers Compared

WTF Are Signals And Why Is Everyone So Hot On Them All Of The Sudden?

Supper Club × Dylan Jhaveri - Video for the Web and MUX

UI Elements - Basics, Best Practice, and Built Ins

Bluesky + AT Protocol

Supper Club × Zach Lloyd from Warp

RPC in JavaScript!

Supper Club × Privacy, Cookie Banners, GDPR with Donata and Hans Skillrud

Potluck × Crypto × SEO × Status Pages × Learning Tools

CSS Color Functions

Supper Club × ESLint with Nicholas Zakas

Can Vanilla CSS Replace Sass Yet?

Modals, Popups, Popovers, Lightboxes

Supper Club × Nate Weinert and Tamagui

600th Episode! Major Announcement and Swag Giveaway!

oAuth APIs Explained

Supper Club × Fabian Kägy - Modern WordPress - Blocks, Page builders, Headless, Custom Fields

Stump’d Gameshow! Answering Coding Interview Questions from AI

The New Import Map Standard

Supper Club × Web Components and Lit with Justin Fagnani of Google

Potluck × Testing Animations × Tools for Learning × Coding Related Injuries

Coding with the Open AI / Chat GPT API

Supper Club × The Role Of UX Designers In Humanizing The Future with Travis Neilson

Potluck × Learning Web Dev × Video Streaming × Mono Repos

HTTPS + Tunnel Your Localhost - Cloudflare Tunnels, Ngrok, and more!

Supper Club × Next.js on AWS + Serverless with Dax Raad

New Syntax Website Brainstorm! IRL!

Web Streams Explained

Supper Club × Digital Nomad with Eric Sartorius

Fundamentals × What Makes a Website Slow?

Node in the Browser × WebContainers + NodeBox

Supper Club × Visual Coding Languages With Steve Sewell

AI and Coding with ChatGPT

Clean vs Sloppy Code

Supper Club × Astro 2.0 with Fred Schott

Warp Terminal × Next Gen Terminals

Logging

Supper Club × Solid.js with Ryan Carniato

Potluck × Native Web Components × JS Class Mixins × Application Secrets

Save us from Config File Hell

Supper Club × Qwik framework from Miško Hevery, the Creator of Angular

Converting JS to TypeScript

Polish and Perf

Supper Club × Rust In Action with Tim McNamara

Node.js CJS → ESM

CSS Wishlist

Supper Club × Caleb Porzio

We React to State of JS 2022

Container Queries Explained

Supper Club × Simen Svale Skogsrud and Espen Hovlandsdal from Sanity

Potluck × JS Modules × HTML Tags × Recession × Budgeting

Buy It or Build It? A Service is Not a Solution

Supper Club × Katherine Mello on Liberal Arts → Coding, Bootcamps, and Sustainability

2023 Goals × Learning and Doing

TypeScript Fundamentals × Satisfies and as const

Supper Club × Sarah Drasner on Engineering Management

Our Predictions for 2023

TypeScript Fundamentals × Type Narrowing, Guards, and Predicates

Supper Club × Polypane with Kilian Valkhof

Were We Wrong? 2022 Predictions Revisited

Desktop Apps in JS × Electron and Tauri

Supper Club × Switching into Coding and climbing the Pommade ladder with Kenneth Lyerly

Potluck × Twitter Thoughts × Business Models × Senior Developer

“Serverless” Databases

Supper Club × Remotion React Video with Jonny Burger

JavaScript in 2022

Rendering Methods Explained

Supper Club × Coding at Disney with Vu Le

Code Styles × Readable Rules and Petty Preferences

GitHub Next Projects