Skip to content
← back to home

TypeScript in 100 Seconds

Fireship

youtube· 2:22standard

1.Introduction to TypeScript and Static Type Checking

0:00 / 0:42

This chapter introduces TypeScript as a tool to validate JavaScript code ahead of time using static type checking. It highlights how JavaScript's dynamic nature can lead to runtime errors and explains how TypeScript prevents these by extending JavaScript with types, providing immediate feedback in the IDE.

  • TypeScript
  • Static Type Checking
  • Dynamic Language
  • Superset

What's inside this course

  1. 0:00

    1. Introduction to TypeScript and Static Type Checking

    This chapter introduces TypeScript as a tool to validate JavaScript code ahead of time using static type checking. It highlights how JavaScript's dynamic nature can lead to runtime errors and explains how TypeScript prevents these by extending JavaScript with types, providing immediate feedback in the IDE.

  2. 0:42

    2. TypeScript Compilation and Transpilation

    This chapter explains how TypeScript behaves like a compiled language, using JavaScript as its compilation target. It demonstrates the use of the `tsc` command to transpile TypeScript files into vanilla JavaScript, allowing developers to use modern JavaScript features while targeting older browser environments. It also mentions the `tsconfig` file for compiler customization.

  3. 1:54

    3. Annotating and Inferring Types in TypeScript

    This chapter focuses on how TypeScript achieves static typing through type annotation and inference. It covers explicit type declarations for variables, implicit type inference, and the 'any' type for opting out of type checking. The chapter also demonstrates how to strongly type arrays and define custom types and interfaces for objects, highlighting the benefits of autocomplete in IDEs.

Every chapter ends with a checkpoint (quiz, flashcards, retell, diagram, or prediction) and the course closes with a final boss-fight. More courses →

Full transcript of “TypeScript in 100 Seconds”

— 88 segments
0:00[Music]
0:00typescript validate your javascript
0:02ahead of time with static type checking
0:04javascript is a dynamic language where
0:06we can do all kinds of crazy things
0:08like reference variables that don't
0:10exist or work with objects of an unknown
0:12shape the code is interpreted by a
0:13browser
0:14but if your code is broken you won't
0:15catch it until runtime when the browser
0:17rows an error
0:18typescript prevents errors like this
0:20from ever happening by extending
0:21javascript with types
0:22the language is a strict superset of
0:24javascript which means when you open up
0:26a ts file you can write plain javascript
0:28with all of its extra features
0:30being completely optional but notice in
0:32the code here how the ide
0:33is providing feedback about using a
0:35variable that doesn't exist
0:37instead of fixing this issue weeks later
0:38in a stack trace after the company has
0:40lost millions of dollars we can fix it
0:42right here right now
0:43the reason we get this instant feedback
0:45is because typescript behaves like a
0:47compiled language
0:48where javascript is the compilation
0:50target you can run the typescript
0:51compiler
0:52using the tsc command it will take the
0:54ts file and transpile it into vanilla
0:56javascript
0:57and you can choose any flavor of
0:58javascript you want if you need to
1:00target ancient browsers
1:01and that means you can use the latest
1:03and greatest syntax features of
1:04javascript without having to worry if
1:06they'll be supported in an older
1:07environment your typescript project will
1:09likely have a ts config file
1:11which provides an infinite number of
1:12ways to customize the behavior of the
1:14compiler
1:15but the primary goal of typescript is to
1:17enable static typing
1:18one way it achieves that is by allowing
1:20you to annotate your code with types
1:22we can strongly type a variable using a
1:24colon followed by its type like a string
1:27boolean or number
1:28that's known as an explicit type if we
1:30then try to assign its value as the
1:32wrong type we get an error
1:33alternatively if we set an initial value
1:35it will implicitly infer the type
1:37however there may be cases where you
1:39want to opt out of this behavior
1:40in which case you can annotate with the
1:42any type that allows you to loosely type
1:45or opt out of type checking when working
1:47with an array
1:48use brackets to strongly type a list in
1:50addition you can define your own custom
1:52types and interfaces
1:53which is especially powerful when
1:55working with objects the car interface
1:57here defines various types
1:58of the properties on an object we can
2:00then apply the interface to a plain
2:02javascript object
2:03the beauty of having strongly typed code
2:05is that we get autocomplete everywhere
2:07in our ide
2:08we don't have to jump back and forth to
2:09documentation or dig through stack
2:11traces to figure out why our code's not
2:13working
2:13if you like typescript as much as i do
2:15consider becoming a pro member at
2:16fireship io for the next few days
2:18everything will be 40 off including
2:20lifetime memberships thanks for watching
2:22and i will see you in the next one