Professional TypeScript Masterclass Lessons

1.Introduction
free
⏱️ 1:54
2.Setup
free
⏱️ 5:44
3.Primitive Types
free
⏱️ 1:42
4.Instance Types
free
⏱️ 1:52
5.Arrays And Tuples
free
⏱️ 1:38
6.Objects
free
⏱️ 1:33
7.const declarations
free
⏱️ 1:03
8.Function Types
free
⏱️ 1:57
9.Structural Typing
free
⏱️ 2:10
10.Classes in TypeScript
free
⏱️ 1:48
11.Target Compiler Option
free
⏱️ 2:37
12.Generics
⏱️ 3:02
13.Special Types any And unknown
⏱️ 2:00
14.JavaScript to TypeScript
⏱️ 1:32
15.Frontend Projects
⏱️ 3:49
16.Type Assertions
⏱️ 2:15
17.Type Casting
⏱️ 1:16
18.Modules
⏱️ 1:55
19.Type Declarations
⏱️ 4:25
20.Creating NPM packages
⏱️ 3:20
21.Async Await
⏱️ 3:05
22.Running in NodeJS
⏱️ 1:40
23.Lexical this
⏱️ 2:34
24.readonly Modifier
⏱️ 1:59
25.Union Types
⏱️ 2:57
26.Literal Types
⏱️ 2:58
27.Type Narrowing
⏱️ 4:19
28.Discriminated Unions
⏱️ 3:29
29.Class Parameter Properties
⏱️ 1:02
30.Strict Compiler Option
⏱️ 6:18
31.null vs undefined
⏱️ 4:19
32.Intersection Types
⏱️ 2:03
33.Optional Modifier
⏱️ 2:47
34.Non Null Assertion Operator
⏱️ 3:40
35.Interfaces
⏱️ 2:28
36.Interface Declaration Merging
⏱️ 1:01
37.Types vs Interfaces
⏱️ 2:16
38.never Type
⏱️ 3:00
39.implements Keyword
⏱️ 1:25
40.Definite Assignment Assertion
⏱️ 2:31
41.User Defined Type Guards
⏱️ 2:02
42.Assertion Functions
⏱️ 3:42
43.Function Overloading
⏱️ 4:15
44.Call Signatures
⏱️ 2:53
45.Abstract Classes
⏱️ 1:53
46.Index Signatures
⏱️ 3:08
47.Readonly Arrays and Tuples
⏱️ 2:58
48.Double Assertions
⏱️ 2:20
49.const Assertions
⏱️ 3:55
50.this Parameter
⏱️ 2:33
51.Generic Constraints
⏱️ 2:43
52.typeof Type Operator
⏱️ 2:12
53.Lookup Types
⏱️ 3:12
54.keyof Type Operator
⏱️ 3:55
55.Conditional Types
⏱️ 4:39
56.Contitional Types with Unions and never
⏱️ 3:32
57.infer Keyword and `ReturnType<T>`
⏱️ 3:47
58.Mapped Types
⏱️ 2:48
59.Mapped Type Modifiers
⏱️ 3:37
60.Template Literal Type
⏱️ 4:28
61.Partial<T>
⏱️ 1:27
62.Required<T>
⏱️ 1:36
63.Readonly<T>
⏱️ 1:34
64.Record<K, T>
⏱️ 4:05
65.Project References
⏱️ 4:18
66.undefined vs. optional
⏱️ 2:48
67.satisfies Operator
⏱️ 2:42
68.PropertyKey Type
⏱️ 0:57
69.ThisType<T>
⏱️ 4:11
70.Awaited<T>
⏱️ 4:12
71.String Manipulation Types
⏱️ 3:36
72.Mapped Types as Clauses
⏱️ 4:01
73.Union vs Intersection Mental Model
⏱️ 3:36
74.Enums are Bad
⏱️ 8:11

Setup

Check Successful Node Install

Ensure that you can run the following commands:

log versions
node --version
npm --version
npx --version

Setup TypeScript Project

Setup directory:

mkdir intro
npm init -y
npm i typescript

Create a new TypeScript config:

npx tsc --init --rootDir src --outDir lib

Setup IDE

Install Visual Studio Code.

Compiling TypeScript

In watch mode (live compiling on every change).

npx tsc --watch

Running Generated JavaScript

node lib/index.js

See Type Checking

Some valid code:

let message: string = 'Hello world';
message += ' again';
console.log(message);

Some invalid code:

let message: string = 123;
message += ' again';
console.log(message);
javascript
typescript
react
playwright

Enjoy free content straight from your inbox 💌

No spam, unsubscribe at any time.

Transcript

00:00

Now in order to get started with TypeScript, the first thing that we need to do is to install the node js runtime. Node JS is a standard development tool used for developing both backend as well as frontend applications for JavaScript as well as TypeScript. Now, in order to install node js, open up your browser and head on over to node js.org. Now, the homepage will try to give you a version of node js that you should download and install for your operating system. But in case you want to look at all the available options, you can head on over to the download page and then select the installer specific to your requirements.

00:34

Now, once you have the installer downloaded and execute it, you can verify that the installation succeeded by opening up the command prompt or terminal and running the command node minus minus version. Now the specific version of node js that I have displayed over here is actually not that important as the features that we will be using throughout this course are not actually version specific. Now the node JS installation also installs two additional executables and we will be using them throughout this course so we can verify that they are working correctly as well by running NP space minus minus version,

01:08

and similarly NPX space minus minus version. And that's it for node js installation. Now let's go ahead and use node js to create our first TypeScript project. We open up a new terminal session, create a new directory specific to our project, and then use the NPM innate command to create a new node JS package. We additionally pass in the command line flag minus Y to select the default options. No GS packages are the standard way to do front end as well as backend software development with JavaScript.

01:42

Now because we are using TypeScript, we will additionally install TypeScript by running the command NPMI TypeScript. This will install the TypeScript compiler TSC into this particular package. We can run the version of TSC that comes bundled with TypeScript within this package by using N-P-X-T-S-C. And then for command line flags for TSC, we pass in minus minus in it to initialize a new TS config. A Ts config or J file is used to store TypeScript configuration options. Now, for our initial options, we use minus minus root TIR

02:17

to specify that all our source code will be located in the SRC folder and then a minus minus out TIR lib to indicate that our output JavaScript code should be generated into the lib folder. Now once this command executes, it notifies us that it's created a Ts config J file. Now before we start writing TypeScript code, let's talk about IDs. Now my recommended IDE for starting web development is vs. Code we use Studio Code is by Microsoft, the creators of TypeScript, and it is available for free for Windows

02:50

as well as Mac and Linux. You can go to code or visual studio.com and you can download it from the homepage or you can head on Over to the download section and get an installer that is more specific to your requirements. Now, once you have Visual Studio Code downloaded and installed, you can use it to open up the project folder that we created earlier. Now, let's go ahead and create our first TypeScript source code file. Under source index ts for our basic example, we will create a message variable of type string

03:22

that we will initialize to the value Hello world and use the built-in JavaScript runtime method consult log to log this message to the terminal. Now, TypeScript cannot be executed by node js or the browsers by itself. The first step is to actually take the TypeScript source code and compile it to JavaScript that node GS and browsers can execute. Now, in order to compile the TypeScript files into JavaScript files, we open up the terminal and execute N-P-X-D-S-C and we will start the TypeScript compiler in watch mode with minus minus watch.

03:57

This means that if you make any modifications to our source code, it'll recompile them on the fly. Now, on its initial compile, it's already generated the output JavaScript into the Lib folder. So far our source index or TS file TypeScript has gone ahead and generated lib index js file. And as you can see, the index ts and the index js file are quite similar. The key difference between the index Ts and the index js file is that the type annotation for the message variable that is

04:29

colon string has been removed when the TAs file has been transformed to JavaScript file. Now, once we have the JavaScript file, we can open up a new terminal and use node to execute this JavaScript file using node lib, index orts, and you can see that it simply logs out the message. Now because we left the TypeScript compiler running in watch mode, if you make any modifications to the TypeScript source code, for example, add additional text to the message variable, the compiler immediately generates the new JavaScript. And if you execute the new code using Node, you can see

05:04

that we get the updated result. Now, as we've hinted before, the key difference between TypeScript and JavaScript is simply these type annotations, for example, the annotation for string. What this means is that if we try to assign something like a number to a variable that is annotated at string, we get an immediate compile time error instead of something going weird at time. So even if you are someone who is new to JavaScript, TypeScript is a great way to get started on your JavaScript journey as it will help ensure

05:35

that your code never has any syntactic or type errors. And with that said, congratulations on finishing the first lesson.

Professional TypeScript Masterclass

Professional TypeScript Masterclass

1.Introduction
free
⏱️ 1:54
2.Setup
free
⏱️ 5:44
3.Primitive Types
free
⏱️ 1:42
4.Instance Types
free
⏱️ 1:52
5.Arrays And Tuples
free
⏱️ 1:38
6.Objects
free
⏱️ 1:33
7.const declarations
free
⏱️ 1:03
8.Function Types
free
⏱️ 1:57
9.Structural Typing
free
⏱️ 2:10
10.Classes in TypeScript
free
⏱️ 1:48
11.Target Compiler Option
free
⏱️ 2:37
12.Generics
⏱️ 3:02
13.Special Types any And unknown
⏱️ 2:00
14.JavaScript to TypeScript
⏱️ 1:32
15.Frontend Projects
⏱️ 3:49
16.Type Assertions
⏱️ 2:15
17.Type Casting
⏱️ 1:16
18.Modules
⏱️ 1:55
19.Type Declarations
⏱️ 4:25
20.Creating NPM packages
⏱️ 3:20
21.Async Await
⏱️ 3:05
22.Running in NodeJS
⏱️ 1:40
23.Lexical this
⏱️ 2:34
24.readonly Modifier
⏱️ 1:59
25.Union Types
⏱️ 2:57
26.Literal Types
⏱️ 2:58
27.Type Narrowing
⏱️ 4:19
28.Discriminated Unions
⏱️ 3:29
29.Class Parameter Properties
⏱️ 1:02
30.Strict Compiler Option
⏱️ 6:18
31.null vs undefined
⏱️ 4:19
32.Intersection Types
⏱️ 2:03
33.Optional Modifier
⏱️ 2:47
34.Non Null Assertion Operator
⏱️ 3:40
35.Interfaces
⏱️ 2:28
36.Interface Declaration Merging
⏱️ 1:01
37.Types vs Interfaces
⏱️ 2:16
38.never Type
⏱️ 3:00
39.implements Keyword
⏱️ 1:25
40.Definite Assignment Assertion
⏱️ 2:31
41.User Defined Type Guards
⏱️ 2:02
42.Assertion Functions
⏱️ 3:42
43.Function Overloading
⏱️ 4:15
44.Call Signatures
⏱️ 2:53
45.Abstract Classes
⏱️ 1:53
46.Index Signatures
⏱️ 3:08
47.Readonly Arrays and Tuples
⏱️ 2:58
48.Double Assertions
⏱️ 2:20
49.const Assertions
⏱️ 3:55
50.this Parameter
⏱️ 2:33
51.Generic Constraints
⏱️ 2:43
52.typeof Type Operator
⏱️ 2:12
53.Lookup Types
⏱️ 3:12
54.keyof Type Operator
⏱️ 3:55
55.Conditional Types
⏱️ 4:39
56.Contitional Types with Unions and never
⏱️ 3:32
57.infer Keyword and `ReturnType<T>`
⏱️ 3:47
58.Mapped Types
⏱️ 2:48
59.Mapped Type Modifiers
⏱️ 3:37
60.Template Literal Type
⏱️ 4:28
61.Partial<T>
⏱️ 1:27
62.Required<T>
⏱️ 1:36
63.Readonly<T>
⏱️ 1:34
64.Record<K, T>
⏱️ 4:05
65.Project References
⏱️ 4:18
66.undefined vs. optional
⏱️ 2:48
67.satisfies Operator
⏱️ 2:42
68.PropertyKey Type
⏱️ 0:57
69.ThisType<T>
⏱️ 4:11
70.Awaited<T>
⏱️ 4:12
71.String Manipulation Types
⏱️ 3:36
72.Mapped Types as Clauses
⏱️ 4:01
73.Union vs Intersection Mental Model
⏱️ 3:36
74.Enums are Bad
⏱️ 8:11