Podcasts Technology Syntax - Tasty Web Development Treats TypeScript Fundamentals

TypeScript Fundamentals

Published: Feb. 3, 2021, 2 p.m.

b'

In this episode of Syntax, Scott and Wes talk about TypeScript fundamentals \\u2014 what it is, how you use it, why people love it so much, and more!

Sanity - Sponsor

Sanity.io\\xa0is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at\\xa0sanity.io/create. Get an awesome supercharged free developer plan on\\xa0sanity.io/syntax.

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.

Cloudinary - Sponsor

Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary\\u2019s APIs, SDKs, widgets, and integrations.

Show Notes

What is TypeScript?

03:12 - Types?

  • What are types and why should you care?
  • JS is a typed language, it\\u2019s just not strongly typed
    • JS does not care about reassignment of a variable to a new type
    • Does not care about your types, but they do exist

06:34 - The Fundamentals

  • You write your JavaScript code, but each time you create a variable, function, parameter, you \\u201ctype it\\u201d \\u2014 which means you describe what that data will look like.
    • Create a variable: Will it be a string? A number? A custom type of show?
    • Create a function: What params does it take? What type are they? What does it return?
  • Types allow your code to know if there are type errors that would present themselves to the user silently. These are small errors that can be compounded and go unnoticed.
    • This can allow you to prevent shipping code that has these errors by checking your code.
    • Some of the biggest benefits here come via errors in your text editor

13:30 - Explaining the types

  • You can create your own types
  • Strings
  • Numbers
    • We only have numbers in TS, no floats/ints
    • We do have BigInt though, but not something most people will use
  • Arrays
    • Will be a list of another type
  • Unions
    • This type will be one of the possible options
    • String of DRAFT PUBLISHED or ARCHIVED
  • Intersections
    • An intersection type combines multiple types into one
  • Objects
    • These are custom types where each property is its own type
  • Any
    • Explicit any
    • Implicit any
  • Language types
    • These things are technically just Objects, but they have their own types
    • Dates
    • Timeouts
    • DOM Elements / Nodes
  • Void
    • When a function returns nothing \\u2014 usually used with side effects like click handlers
  • Enum
    • A set of named constants
      • Used when you have a select amount of values \\u2014 I like to think of these as the select lists of TS
      • String unions are also used for this same thing

30:28 - Inference

  • Automatic detection of types
  • Typescript will try to infer your types based on their definition
  • Not every type can be inferred, leading to implicit anys and the need for explicit types

33:25 - Getting types

  • Most popular packages already have types \\u2014 you install them like\\xa0npm i @types/whatever
  • If a package doesn\\u2019t have types, you have to create them yourself, which can be annoying
    • MakeTypes
    • Console log a JSON.stringify(obj), and pipe it in
  • Node has types
  • Vanilla JS has types, for the language and all of the DOM - HTMLInputElement
  • React has types
  • Typing Node modules that don\\u2019t have types

Overall benefits

40:39 - Type hinting

  • With TS and your editor (VSCode) you\\u2019ll get more information about your code as you type it \\u2014 allowing you to know exactly what things expect
    • This seems like a small deal but in practice leads to being much more efficient

42:50 - Refactoring

  • Rename a function, type, or variable and it will be updated everywhere in the project!
  • Moving a function to a new file is actually part of TypeScript
  • Drag + Drop file, update imports

48:10 - Compiling

  • TSC\\xa0vs\\xa0Babel\\xa0/\\xa0Esbuild
  • Only TSC type checks
  • Compiling TS with babel will not allow you to break the build on type errors, you\\u2019ll need to run TSC in coordination or in the CI/CD

Links

\\xd7\\xd7\\xd7 SIIIIICK \\xd7\\xd7\\xd7 PIIIICKS \\xd7\\xd7\\xd7

Shameless Plugs

  • Scott:\\xa0ESM & Snowpack\\xa0- Sign up for the year and save 25%!
  • Wes:\\xa0All Courses\\xa0- Use the coupon code \\u2018Syntax\\u2019 for $10 off!

Tweet us your tasty treats!

'