TypeScript has forever altered the lives of JavaScript developers. Learn why TS is so awesome and the basic concepts required to be successful using it https://angularfirebase.com/typescript-the-basics/

Deep Dive https://github.com/basarat/typescript-book
TypeScript Docs https://www.typescriptlang.org/
2024-02-04T07:07:29.573Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
7233b3fd-132a-4124-b2d7-d41e30471796
929ff031bd30ee6e2ca3e3e6e1a0b98c8cfbdf93277b64004f1dd99b0bc3a0d3
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
I can pretty easily say that the one tool that's had the biggest impact on my productivity as a web developer is TypeScript.
And that's pretty amazing considering a few years ago I had no interest in learning it and was only exposed to it because I had a client that required an Angular app.
In today's video I'm gonna show you all the basic concepts needed to be successful with TypeScript and I'll throw in a few pro tips here and there that I find especially useful.
My If you're new here, like and subscribe and there will be a t shirt giveaway with this video.
All you have to do is leave a comment below and we'll pick a random winner next week.
I I want to start with a shout out to Basrat Syed who is the author of the TypeScript Deep Dive book.
It's my go to resource for advanced concepts and it's free and open source.
So originally I was assistant to even learn TypeScript because I wasn't super comfortable with strong type languages and I really try to avoid writing any more code than I have to, but this is a situation where writing a little more code upfront will pay big dividends as your project grows.
The biggest benefit is actually just tooling, which you get in your IDE like Versus Code.
When you use type annotations or work with libraries that are strong typed, your code will be automatically documented in the IDE, so you really have to refer back to online documentation for the libraries that you use.
In my addition, the compiler can catch bugs in advance which is a far more efficient way to refactor code.
I think this Reddit post says it best, would you rather have silly errors during or insanity inducing errors in production.
Another cool benefit of TypeScript is that there's virtually no learning curve if you know JavaScript.
My that's because it's a superset of JavaScript, so any valid JS code is also valid in TypeScript.
So you can learn it incrementally as you go.
And it also allows us to write our code with future JavaScript features without having to worry about whether or not this code will be supported in our environment because we can transpile my 2 multiple JavaScript flavors.
Now that you know TypeScript is awesome, let's go ahead and get started.
The first thing you wanna do is install TypeScript globally with npm.
My doing this will give you access to the TSC command which will run the TypeScript Compiler.
At the time of this video, I'm running version 3.1.
So the first thing we'll do is create an index dot TS file.
And TypeScript code on its own can't run anywhere.
It won't work in the browser or in Node.
Js or anything like that.
My what we do is use the TypeScript compiler to convert that TypeScript code to vanilla JavaScript.
Let's start by writing some plain JavaScript in our TypeScript file and then compile it.
My so we'll just say console log hello world, then we'll go down here to the command line and run tscindex.ts.
You'll notice that creates an index dot my JS file, that's our actual JavaScript code that we can run-in the browser or Node.
And because we just wrote plain JavaScript, that code is identical to what's in the index TS my own.
By default, TypeScript will compile to ES 3, which doesn't have support for async await.
So let's see what happens when we write an async function in our TSC file and then compile my life.
So you'll notice here that our code gets transpiled to this crazy looking JavaScript just so we can use asyncawait in our main TypeScript code.
My the Compiler is actually very sophisticated and there's a ton of different options that you can pass to it to customize its behavior.
You could pass these options in from my command line, but the standard way to do it is to create a tsconfig.json, which will automatically get picked up when you run tsc.
My the tsconfig can seem pretty overwhelming at first, but there's usually only a few options that you have to think about for the most part.
The first one is the target and this is the flavor of JavaScript that your code will be compiled to.
So if we set our target to ES next and then run TSC, you'll see that it compiles our code with AsyncAwait natively because it's targeting the latest version of JavaScript which supports that syntax.
My another option that we'll wanna set right away is watch true which will just recompile our code every time we save the file.
That'll just save us from rerunning that tsc command after every change.
My the next option we'll look at is lib which allows us to automatically include typings for certain environments such as the DOM or ES 2017.
My so if you're building a web application, you'd wanna include the DOM library, which allows TypeScript to compile your code with all of the native DOM classes without any compilation errors.
For example, if we go back to our code, we can use the URL class which is part of the DOM and we'll get autocomplete and IntelliSense on this class.
My so this is where the incredible tooling of TypeScript starts to come in.
If we hover over the class, we have integrated documentation as well as an error message telling us exactly why my code won't run.
And if we want a really explicit view of the interface, we can right click and go to the typings, then we'll have a view of every property and method that exists on this class.
My but usually that's not necessary because all this stuff will just auto complete for you as you start typing.
The next thing we'll look at is the use of third party libraries.
So let's go ahead and install Lodash with npm.
And you'll see that creates a Node modules folder with the source code for Lodash.
A lot of mainstream libraries like Firebase, my, for example, ship with type declarations automatically, but Lodash is not one of them.
So if we go into our index ts and import Lodash, we'll get a warning from TypeScript my saying that there are no declarations found, which means we're not going to get any autocomplete or IntelliSense in the IDE.
But the good news is there's a giant monorepo out there with community maintained types.
My apps.
If we go ahead and install the types in our development environment, we'll have autocomplete and IntelliSense for every Lodash function.
So so now that we know how the TypeScript compiler works, let's go ahead and write some code that uses type annotations.
There are 2 ways you can strong type your code, implicitly or explicitly.
So my, say, primitive number type.
Then if we go down here and try to assign a string value to this variable, it's going to give us an error because a string is not assignable to a number.
My if this code were a vanilla JavaScript, we wouldn't catch this bug until we actually run our code somewhere.
But with TypeScript, we know about it right away.
My unlike languages like C Sharp or Java, we can actually opt out of the type system by annotating our variable with any.
This just means that this variable can be assigned any value and the compiler won't type check it.
Ideally, you want to avoid doing things like this when possible, but it does give TypeScript a ton of flexibility.
My in the last example, we gave our variable an implicit number type.
But what if we don't have a value to assign to it upfront?
If we don't add any type annotations to it, it's going to be inferred as an Any type.
So we can assign both a string and a number to it.
If we want to annotate it with a type, we can just my colon followed by number which is one of the built in primitive types in JavaScript.
When we do that, we get an error under the string value because we can't assign it as that type.
My one tip that I'll give you here is that if you have an implicit type, don't bother explicitly strong typing it.
For example, here we're assigning a value that's a number, so adding the number my annotation is really just redundant.
So we've looked at some of the built in types in JavaScript, but you can also create your own types from scratch.
My first, you'll give the type a name which is typically in Pascal case.
And for right now, we'll just go ahead and arbitrarily assign our style type to a string.
My then we can declare a variable that's annotated with this style type.
And then we'll get feedback for this custom type instead of just a regular string.
My right now, this is super redundant.
But let's say our style type can only be bold or italic.
We can create a union type by separating them with a pipe.
And now, we can only assign this variable to these two specific values.
And we're not limited to just strings.
We could even extend this custom type with a number.
So that's pretty cool.
But more often than not, you'll be strong typing objects that have multiple properties with multiple different types.
Let's imagine we have 2 objects and we want to enforce that this object shape has a first and last name with string types.
My composing objects or class instances that don't have the correct shape is an easy way to create bugs in your program.
But with TypeScript, we can enforce the shape of an object with an interface.
My if we know that the shape of the person object will always be the same, then we can define an interface that defines the types on each property.
Now we can use this interface to strong type these objects directly or we could use it as the return value from a function or as an argument or anywhere else in our code.
My now sometimes an interface like this can be a little too restrictive, but you can actually maintain the required properties and then add any additional properties to be added by creating a key with a type of my string with a value type of any.
So now a first and last name will be required, but you can also add any additional property that you want to this object.
Now, let's go ahead and switch gears to functions.
Strong typing a function can be a little more complex because you have types for the arguments and also the return value.
My so here we just have a plain JavaScript function without any types that raises x to the power of y.
So currently, we could add string values as the arguments here and we wouldn't get any error from the compiler.
But obviously, this function is going to fail if we try to pass it any non number value.
My you can annotate arguments the same way we do with variables by just adding a colon and then the type after it.
And that will ensure that only numbers can be passed to this function.
My so the function implicitly has a number return value because we're using the native math JavaScript library.
But we can annotate specific return value type after the parenthesis and before the brackets.
So if we set that type to a string, you'll see it's underlined in red because it's returning a number.
To implement this function correctly, we can call to string which will then clear out that underlined error.
And in many cases, you might have functions that don't return a value or create some kind of side effect.
My in that case, you can type your function return value to void.
So you'll commonly see the void type on functions like event listeners or side effects that just don't return a value.
My view.
The next thing we'll look at is how to strong type an array.
So we'll start by creating an empty array and then pushing a few different values to it with different types.
My we can force this array to only have number types by doing a number type followed by brackets signifying that it's an array.
Now you can see we get an error every time we my try to push a value that's not a number.
This is especially useful when you're working with an array of objects and you wanna get some IntelliSense as you're iterating over those objects.
My for example, if we retrieved an array of people from our database, we could use our person interface to know the exact shape of those objects as they're retrieved.
My TypeScript also opens the door to a new data structure called a tuple.
These are found in other programming languages like Python.
And basically, they're just a fixed length array my where each item in that array has its own type.
So we can name our type my list and then we'll give each of its values a different type.
Currently, this is giving us an error because we're initial this array as an empty array, but the compiler is expecting all these values to be defined upfront.
So one thing you can do is make these values optional by putting a question mark after the type.
My and you can also use this question mark syntax in other places in TypeScript, for example, to make function arguments optional.
The last thing I wanna show you is TypeScript Generics.
X you may run into situations where you want to use a type internally inside of a class or function.
A good example is an RxJS observable which itself is just a class that has an internal value that you can observe.
So the capital t in this code represents a variable type that we can pass in my too strong type, this observable's internal value.
So this allows us to specify the internal type at some later point in our code.
My for example, we might have an observable of a number or maybe we have an observable of our person interface.
And we can also do this implicitly if we create a new observable of a number.
It's my going to implicitly have that internal number type.
So more often than not, you'll be using generics rather than creating them, but it's definitely an important thing to know.
I'm I'm gonna go ahead and wrap things up there.
Hopefully, this video gave you an idea of why TypeScript is so powerful, but we really only scratched the surface here.
I'd like to do a video on object oriented versus functional programming in TypeScript or possibly decorators, so let me know what you want to see next in the comments.
If this video helped you, please like and subscribe.
And if you want to my learn more, consider becoming a pro member at angularfirebase.com.
You'll get unlimited access to my full length courses, as well as project support board on Slack.
And, of course, I will mail you this laptop sticker that you see on the screen now.
Thanks for watching and I will talk to you soon.
My

Speaker 0: I can pretty easily say that the one tool that's had the biggest impact on my productivity as a web developer is TypeScript. And that's pretty amazing considering a few years ago I had no interest in learning it and was only exposed to it because I had a client that required an Angular app. In today's video I'm gonna show you all the basic concepts needed to be successful with TypeScript and I'll throw in a few pro tips here and there that I find especially useful. My If you're new here, like and subscribe and there will be a t shirt giveaway with this video. All you have to do is leave a comment below and we'll pick a random winner next week.

I I want to start with a shout out to Basrat Syed who is the author of the TypeScript Deep Dive book. It's my go to resource for advanced concepts and it's free and open source. So originally I was assistant to even learn TypeScript because I wasn't super comfortable with strong type languages and I really try to avoid writing any more code than I have to, but this is a situation where writing a little more code upfront will pay big dividends as your project grows. The biggest benefit is actually just tooling, which you get in your IDE like Versus Code. When you use type annotations or work with libraries that are strong typed, your code will be automatically documented in the IDE, so you really have to refer back to online documentation for the libraries that you use.

In my addition, the compiler can catch bugs in advance which is a far more efficient way to refactor code. I think this Reddit post says it best, would you rather have silly errors during or insanity inducing errors in production. Another cool benefit of TypeScript is that there's virtually no learning curve if you know JavaScript. My that's because it's a superset of JavaScript, so any valid JS code is also valid in TypeScript. So you can learn it incrementally as you go.

And it also allows us to write our code with future JavaScript features without having to worry about whether or not this code will be supported in our environment because we can transpile my 2 multiple JavaScript flavors. Now that you know TypeScript is awesome, let's go ahead and get started. The first thing you wanna do is install TypeScript globally with npm. My doing this will give you access to the TSC command which will run the TypeScript Compiler. At the time of this video, I'm running version 3.1.

So the first thing we'll do is create an index dot TS file. And TypeScript code on its own can't run anywhere. It won't work in the browser or in Node. Js or anything like that. My what we do is use the TypeScript compiler to convert that TypeScript code to vanilla JavaScript.

Let's start by writing some plain JavaScript in our TypeScript file and then compile it. My so we'll just say console log hello world, then we'll go down here to the command line and run tscindex.ts. You'll notice that creates an index dot my JS file, that's our actual JavaScript code that we can run-in the browser or Node. And because we just wrote plain JavaScript, that code is identical to what's in the index TS my own. By default, TypeScript will compile to ES 3, which doesn't have support for async await.

So let's see what happens when we write an async function in our TSC file and then compile my life. So you'll notice here that our code gets transpiled to this crazy looking JavaScript just so we can use asyncawait in our main TypeScript code. My the Compiler is actually very sophisticated and there's a ton of different options that you can pass to it to customize its behavior. You could pass these options in from my command line, but the standard way to do it is to create a tsconfig.json, which will automatically get picked up when you run tsc. My the tsconfig can seem pretty overwhelming at first, but there's usually only a few options that you have to think about for the most part.

The first one is the target and this is the flavor of JavaScript that your code will be compiled to. So if we set our target to ES next and then run TSC, you'll see that it compiles our code with AsyncAwait natively because it's targeting the latest version of JavaScript which supports that syntax. My another option that we'll wanna set right away is watch true which will just recompile our code every time we save the file. That'll just save us from rerunning that tsc command after every change. My the next option we'll look at is lib which allows us to automatically include typings for certain environments such as the DOM or ES 2017.

My so if you're building a web application, you'd wanna include the DOM library, which allows TypeScript to compile your code with all of the native DOM classes without any compilation errors. For example, if we go back to our code, we can use the URL class which is part of the DOM and we'll get autocomplete and IntelliSense on this class. My so this is where the incredible tooling of TypeScript starts to come in. If we hover over the class, we have integrated documentation as well as an error message telling us exactly why my code won't run. And if we want a really explicit view of the interface, we can right click and go to the typings, then we'll have a view of every property and method that exists on this class.

My but usually that's not necessary because all this stuff will just auto complete for you as you start typing. The next thing we'll look at is the use of third party libraries. So let's go ahead and install Lodash with npm. And you'll see that creates a Node modules folder with the source code for Lodash. A lot of mainstream libraries like Firebase, my, for example, ship with type declarations automatically, but Lodash is not one of them.

So if we go into our index ts and import Lodash, we'll get a warning from TypeScript my saying that there are no declarations found, which means we're not going to get any autocomplete or IntelliSense in the IDE. But the good news is there's a giant monorepo out there with community maintained types. My apps. If we go ahead and install the types in our development environment, we'll have autocomplete and IntelliSense for every Lodash function. So so now that we know how the TypeScript compiler works, let's go ahead and write some code that uses type annotations.

There are 2 ways you can strong type your code, implicitly or explicitly. So my, say, primitive number type. Then if we go down here and try to assign a string value to this variable, it's going to give us an error because a string is not assignable to a number. My if this code were a vanilla JavaScript, we wouldn't catch this bug until we actually run our code somewhere. But with TypeScript, we know about it right away.

My unlike languages like C Sharp or Java, we can actually opt out of the type system by annotating our variable with any. This just means that this variable can be assigned any value and the compiler won't type check it. Ideally, you want to avoid doing things like this when possible, but it does give TypeScript a ton of flexibility. My in the last example, we gave our variable an implicit number type. But what if we don't have a value to assign to it upfront?

If we don't add any type annotations to it, it's going to be inferred as an Any type. So we can assign both a string and a number to it. If we want to annotate it with a type, we can just my colon followed by number which is one of the built in primitive types in JavaScript. When we do that, we get an error under the string value because we can't assign it as that type. My one tip that I'll give you here is that if you have an implicit type, don't bother explicitly strong typing it.

For example, here we're assigning a value that's a number, so adding the number my annotation is really just redundant. So we've looked at some of the built in types in JavaScript, but you can also create your own types from scratch. My first, you'll give the type a name which is typically in Pascal case. And for right now, we'll just go ahead and arbitrarily assign our style type to a string. My then we can declare a variable that's annotated with this style type.

And then we'll get feedback for this custom type instead of just a regular string. My right now, this is super redundant. But let's say our style type can only be bold or italic. We can create a union type by separating them with a pipe. And now, we can only assign this variable to these two specific values.

And we're not limited to just strings. We could even extend this custom type with a number. So that's pretty cool. But more often than not, you'll be strong typing objects that have multiple properties with multiple different types. Let's imagine we have 2 objects and we want to enforce that this object shape has a first and last name with string types.

My composing objects or class instances that don't have the correct shape is an easy way to create bugs in your program. But with TypeScript, we can enforce the shape of an object with an interface. My if we know that the shape of the person object will always be the same, then we can define an interface that defines the types on each property. Now we can use this interface to strong type these objects directly or we could use it as the return value from a function or as an argument or anywhere else in our code. My now sometimes an interface like this can be a little too restrictive, but you can actually maintain the required properties and then add any additional properties to be added by creating a key with a type of my string with a value type of any.

So now a first and last name will be required, but you can also add any additional property that you want to this object. Now, let's go ahead and switch gears to functions. Strong typing a function can be a little more complex because you have types for the arguments and also the return value. My so here we just have a plain JavaScript function without any types that raises x to the power of y. So currently, we could add string values as the arguments here and we wouldn't get any error from the compiler.

But obviously, this function is going to fail if we try to pass it any non number value. My you can annotate arguments the same way we do with variables by just adding a colon and then the type after it. And that will ensure that only numbers can be passed to this function. My so the function implicitly has a number return value because we're using the native math JavaScript library. But we can annotate specific return value type after the parenthesis and before the brackets.

So if we set that type to a string, you'll see it's underlined in red because it's returning a number. To implement this function correctly, we can call to string which will then clear out that underlined error. And in many cases, you might have functions that don't return a value or create some kind of side effect. My in that case, you can type your function return value to void. So you'll commonly see the void type on functions like event listeners or side effects that just don't return a value.

My view. The next thing we'll look at is how to strong type an array. So we'll start by creating an empty array and then pushing a few different values to it with different types. My we can force this array to only have number types by doing a number type followed by brackets signifying that it's an array. Now you can see we get an error every time we my try to push a value that's not a number.

This is especially useful when you're working with an array of objects and you wanna get some IntelliSense as you're iterating over those objects. My for example, if we retrieved an array of people from our database, we could use our person interface to know the exact shape of those objects as they're retrieved. My TypeScript also opens the door to a new data structure called a tuple. These are found in other programming languages like Python. And basically, they're just a fixed length array my where each item in that array has its own type.

So we can name our type my list and then we'll give each of its values a different type. Currently, this is giving us an error because we're initial this array as an empty array, but the compiler is expecting all these values to be defined upfront. So one thing you can do is make these values optional by putting a question mark after the type. My and you can also use this question mark syntax in other places in TypeScript, for example, to make function arguments optional. The last thing I wanna show you is TypeScript Generics.

X you may run into situations where you want to use a type internally inside of a class or function. A good example is an RxJS observable which itself is just a class that has an internal value that you can observe. So the capital t in this code represents a variable type that we can pass in my too strong type, this observable's internal value. So this allows us to specify the internal type at some later point in our code. My for example, we might have an observable of a number or maybe we have an observable of our person interface.

And we can also do this implicitly if we create a new observable of a number. It's my going to implicitly have that internal number type. So more often than not, you'll be using generics rather than creating them, but it's definitely an important thing to know. I'm I'm gonna go ahead and wrap things up there. Hopefully, this video gave you an idea of why TypeScript is so powerful, but we really only scratched the surface here.

I'd like to do a video on object oriented versus functional programming in TypeScript or possibly decorators, so let me know what you want to see next in the comments. If this video helped you, please like and subscribe. And if you want to my learn more, consider becoming a pro member at angularfirebase.com. You'll get unlimited access to my full length courses, as well as project support board on Slack. And, of course, I will mail you this laptop sticker that you see on the screen now.

Thanks for watching and I will talk to you soon. My
I can pretty easily say that the one tool that's had the biggest impact on my productivity as a web developer is TypeScript. And that's pretty amazing considering a few years ago I had no interest in learning it and was only exposed to it because I had a client that required an Angular app. In today's video I'm gonna show you all the basic concepts needed to be successful with TypeScript and I'll throw in a few pro tips here and there that I find especially useful. My If you're new here, like and subscribe and there will be a t shirt giveaway with this video.
visualization
graphic design
software
All you have to do is leave a comment below and we'll pick a random winner next week.
I I want to start with a shout out to Basrat Syed who is the author of the TypeScript Deep Dive book. It's my go to resource for advanced concepts and it's free and open source. So originally I was assistant to even learn TypeScript because I wasn't super comfortable with strong type languages and I really try to avoid writing any more code than I have to, but this is a situation where writing a little more code upfront will pay big dividends as your project grows. The biggest benefit is actually just tooling, which you get in your IDE like Versus Code. When you use type annotations or work with libraries that are strong typed, your code will be automatically documented in the IDE, so you really have to refer back to online documentation for the libraries that you use. In my addition, the compiler can catch bugs in advance which is a far more efficient way to refactor code. I think this Reddit post says it best, would you rather have silly errors during or insanity inducing errors in production. Another cool benefit of TypeScript is that there's virtually no learning curve if you know JavaScript.
software
deep learning
software development
languages
programming
My that's because it's a superset of JavaScript, so any valid JS code is also valid in TypeScript.
So you can learn it incrementally as you go. And it also allows us to write our code with future JavaScript features without having to worry about whether or not this code will be supported in our environment because we can transpile my 2 multiple JavaScript flavors. Now that you know TypeScript is awesome, let's go ahead and get started. The first thing you wanna do is install TypeScript globally with npm. My doing this will give you access to the TSC command which will run the TypeScript Compiler. At the time of this video, I'm running version 3.1. So the first thing we'll do is create an index dot TS file. And TypeScript code on its own can't run anywhere. It won't work in the browser or in Node.
programming
software
Js or anything like that. My what we do is use the TypeScript compiler to convert that TypeScript code to vanilla JavaScript. Let's start by writing some plain JavaScript in our TypeScript file and then compile it.
My so we'll just say console log hello world, then we'll go down here to the command line and run tscindex.ts. You'll notice that creates an index dot my JS file, that's our actual JavaScript code that we can run-in the browser or Node. And because we just wrote plain JavaScript, that code is identical to what's in the index TS my own. By default, TypeScript will compile to ES 3, which doesn't have support for async await. So let's see what happens when we write an async function in our TSC file and then compile my life. So you'll notice here that our code gets transpiled to this crazy looking JavaScript just so we can use asyncawait in our main TypeScript code. My the Compiler is actually very sophisticated and there's a ton of different options that you can pass to it to customize its behavior.
programming
You could pass these options in from my command line, but the standard way to do it is to create a tsconfig.json, which will automatically get picked up when you run tsc. My the tsconfig can seem pretty overwhelming at first, but there's usually only a few options that you have to think about for the most part.
The first one is the target and this is the flavor of JavaScript that your code will be compiled to. So if we set our target to ES next and then run TSC, you'll see that it compiles our code with AsyncAwait natively because it's targeting the latest version of JavaScript which supports that syntax. My another option that we'll wanna set right away is watch true which will just recompile our code every time we save the file. That'll just save us from rerunning that tsc command after every change. My the next option we'll look at is lib which allows us to automatically include typings for certain environments such as the DOM or ES 2017.
software
programming
My so if you're building a web application, you'd wanna include the DOM library, which allows TypeScript to compile your code with all of the native DOM classes without any compilation errors. For example, if we go back to our code, we can use the URL class which is part of the DOM and we'll get autocomplete and IntelliSense on this class.
My so this is where the incredible tooling of TypeScript starts to come in. If we hover over the class, we have integrated documentation as well as an error message telling us exactly why my code won't run. And if we want a really explicit view of the interface, we can right click and go to the typings, then we'll have a view of every property and method that exists on this class.
programming
My but usually that's not necessary because all this stuff will just auto complete for you as you start typing. The next thing we'll look at is the use of third party libraries. So let's go ahead and install Lodash with npm. And you'll see that creates a Node modules folder with the source code for Lodash. A lot of mainstream libraries like Firebase, my, for example, ship with type declarations automatically, but Lodash is not one of them. So if we go into our index ts and import Lodash, we'll get a warning from TypeScript my saying that there are no declarations found, which means we're not going to get any autocomplete or IntelliSense in the IDE.
But the good news is there's a giant monorepo out there with community maintained types. My apps. If we go ahead and install the types in our development environment, we'll have autocomplete and IntelliSense for every Lodash function. So so now that we know how the TypeScript compiler works, let's go ahead and write some code that uses type annotations. There are 2 ways you can strong type your code, implicitly or explicitly. So my, say, primitive number type. Then if we go down here and try to assign a string value to this variable, it's going to give us an error because a string is not assignable to a number.
languages
programming
My if this code were a vanilla JavaScript, we wouldn't catch this bug until we actually run our code somewhere. But with TypeScript, we know about it right away. My unlike languages like C Sharp or Java, we can actually opt out of the type system by annotating our variable with any. This just means that this variable can be assigned any value and the compiler won't type check it. Ideally, you want to avoid doing things like this when possible, but it does give TypeScript a ton of flexibility.
programming
My in the last example, we gave our variable an implicit number type. But what if we don't have a value to assign to it upfront? If we don't add any type annotations to it, it's going to be inferred as an Any type. So we can assign both a string and a number to it. If we want to annotate it with a type, we can just my colon followed by number which is one of the built in primitive types in JavaScript. When we do that, we get an error under the string value because we can't assign it as that type. My one tip that I'll give you here is that if you have an implicit type, don't bother explicitly strong typing it. For example, here we're assigning a value that's a number, so adding the number my annotation is really just redundant. So we've looked at some of the built in types in JavaScript, but you can also create your own types from scratch. My first, you'll give the type a name which is typically in Pascal case. And for right now, we'll just go ahead and arbitrarily assign our style type to a string.
My then we can declare a variable that's annotated with this style type. And then we'll get feedback for this custom type instead of just a regular string. My right now, this is super redundant. But let's say our style type can only be bold or italic. We can create a union type by separating them with a pipe. And now, we can only assign this variable to these two specific values. And we're not limited to just strings.
languages
We could even extend this custom type with a number. So that's pretty cool. But more often than not, you'll be strong typing objects that have multiple properties with multiple different types. Let's imagine we have 2 objects and we want to enforce that this object shape has a first and last name with string types.
My composing objects or class instances that don't have the correct shape is an easy way to create bugs in your program. But with TypeScript, we can enforce the shape of an object with an interface. My if we know that the shape of the person object will always be the same, then we can define an interface that defines the types on each property. Now we can use this interface to strong type these objects directly or we could use it as the return value from a function or as an argument or anywhere else in our code.
geometry
My now sometimes an interface like this can be a little too restrictive, but you can actually maintain the required properties and then add any additional properties to be added by creating a key with a type of my string with a value type of any. So now a first and last name will be required, but you can also add any additional property that you want to this object. Now, let's go ahead and switch gears to functions. Strong typing a function can be a little more complex because you have types for the arguments and also the return value. My so here we just have a plain JavaScript function without any types that raises x to the power of y.
So currently, we could add string values as the arguments here and we wouldn't get any error from the compiler. But obviously, this function is going to fail if we try to pass it any non number value. My you can annotate arguments the same way we do with variables by just adding a colon and then the type after it.
programming
And that will ensure that only numbers can be passed to this function. My so the function implicitly has a number return value because we're using the native math JavaScript library. But we can annotate specific return value type after the parenthesis and before the brackets. So if we set that type to a string, you'll see it's underlined in red because it's returning a number. To implement this function correctly, we can call to string which will then clear out that underlined error. And in many cases, you might have functions that don't return a value or create some kind of side effect. My in that case, you can type your function return value to void. So you'll commonly see the void type on functions like event listeners or side effects that just don't return a value. My view. The next thing we'll look at is how to strong type an array. So we'll start by creating an empty array and then pushing a few different values to it with different types. My we can force this array to only have number types by doing a number type followed by brackets signifying that it's an array.
Now you can see we get an error every time we my try to push a value that's not a number. This is especially useful when you're working with an array of objects and you wanna get some IntelliSense as you're iterating over those objects. My for example, if we retrieved an array of people from our database, we could use our person interface to know the exact shape of those objects as they're retrieved. My TypeScript also opens the door to a new data structure called a tuple. These are found in other programming languages like Python. And basically, they're just a fixed length array my where each item in that array has its own type. So we can name our type my list and then we'll give each of its values a different type.
databases
data
languages
Currently, this is giving us an error because we're initial this array as an empty array, but the compiler is expecting all these values to be defined upfront. So one thing you can do is make these values optional by putting a question mark after the type. My and you can also use this question mark syntax in other places in TypeScript, for example, to make function arguments optional. The last thing I wanna show you is TypeScript Generics. X you may run into situations where you want to use a type internally inside of a class or function. A good example is an RxJS observable which itself is just a class that has an internal value that you can observe. So the capital t in this code represents a variable type that we can pass in my too strong type, this observable's internal value. So this allows us to specify the internal type at some later point in our code. My for example, we might have an observable of a number or maybe we have an observable of our person interface. And we can also do this implicitly if we create a new observable of a number. It's my going to implicitly have that internal number type. So more often than not, you'll be using generics rather than creating them, but it's definitely an important thing to know. I'm I'm gonna go ahead and wrap things up there.
Hopefully, this video gave you an idea of why TypeScript is so powerful, but we really only scratched the surface here. I'd like to do a video on object oriented versus functional programming in TypeScript or possibly decorators, so let me know what you want to see next in the comments. If this video helped you, please like and subscribe. And if you want to my learn more, consider becoming a pro member at angularfirebase.com. You'll get unlimited access to my full length courses, as well as project support board on Slack. And, of course, I will mail you this laptop sticker that you see on the screen now. Thanks for watching and I will talk to you soon. My
electronics
visualization
graphic design
women
animation
acting
youtube
I can pretty easily say that the one tool that's had the biggest impact on my productivity as a web developer is TypeScript. And that's pretty amazing considering a few years ago I had no interest in learning it and was only exposed to it because I had a client that required an Angular app. In today's video I'm gonna show you all the basic concepts needed to be successful with TypeScript and I'll throw in a few pro tips here and there that I find especially useful. My If you're new here, like and subscribe and there will be a t shirt giveaway with this video. All you have to do is leave a comment below and we'll pick a random winner next week. I I want to start with a shout out to Basrat Syed who is the author of the TypeScript Deep Dive book. It's my go to resource for advanced concepts and it's free and open source. So originally I was assistant to even learn TypeScript because I wasn't super comfortable with strong type languages and I really try to avoid writing any more code than I have to, but this is a situation where writing a little more code upfront will pay big dividends as your project grows. The biggest benefit is actually just tooling, which you get in your IDE like Versus Code. When you use type annotations or work with libraries that are strong typed, your code will be automatically documented in the IDE, so you really have to refer back to online documentation for the libraries that you use. In my addition, the compiler can catch bugs in advance which is a far more efficient way to refactor code. I think this Reddit post says it best, would you rather have silly errors during or insanity inducing errors in production. Another cool benefit of TypeScript is that there's virtually no learning curve if you know JavaScript. My that's because it's a superset of JavaScript, so any valid JS code is also valid in TypeScript. So you can learn it incrementally as you go. And it also allows us to write our code with future JavaScript features without having to worry about whether or not this code will be supported in our environment because we can transpile my 2 multiple JavaScript flavors. Now that you know TypeScript is awesome, let's go ahead and get started. The first thing you wanna do is install TypeScript globally with npm. My doing this will give you access to the TSC command which will run the TypeScript Compiler. At the time of this video, I'm running version 3.1. So the first thing we'll do is create an index dot TS file. And TypeScript code on its own can't run anywhere. It won't work in the browser or in Node. Js or anything like that. My what we do is use the TypeScript compiler to convert that TypeScript code to vanilla JavaScript. Let's start by writing some plain JavaScript in our TypeScript file and then compile it. My so we'll just say console log hello world, then we'll go down here to the command line and run tscindex.ts. You'll notice that creates an index dot my JS file, that's our actual JavaScript code that we can run-in the browser or Node. And because we just wrote plain JavaScript, that code is identical to what's in the index TS my own. By default, TypeScript will compile to ES 3, which doesn't have support for async await. So let's see what happens when we write an async function in our TSC file and then compile my life. So you'll notice here that our code gets transpiled to this crazy looking JavaScript just so we can use asyncawait in our main TypeScript code. My the Compiler is actually very sophisticated and there's a ton of different options that you can pass to it to customize its behavior. You could pass these options in from my command line, but the standard way to do it is to create a tsconfig.json, which will automatically get picked up when you run tsc. My the tsconfig can seem pretty overwhelming at first, but there's usually only a few options that you have to think about for the most part. The first one is the target and this is the flavor of JavaScript that your code will be compiled to. So if we set our target to ES next and then run TSC, you'll see that it compiles our code with AsyncAwait natively because it's targeting the latest version of JavaScript which supports that syntax. My another option that we'll wanna set right away is watch true which will just recompile our code every time we save the file. That'll just save us from rerunning that tsc command after every change. My the next option we'll look at is lib which allows us to automatically include typings for certain environments such as the DOM or ES 2017. My so if you're building a web application, you'd wanna include the DOM library, which allows TypeScript to compile your code with all of the native DOM classes without any compilation errors. For example, if we go back to our code, we can use the URL class which is part of the DOM and we'll get autocomplete and IntelliSense on this class. My so this is where the incredible tooling of TypeScript starts to come in. If we hover over the class, we have integrated documentation as well as an error message telling us exactly why my code won't run. And if we want a really explicit view of the interface, we can right click and go to the typings, then we'll have a view of every property and method that exists on this class. My but usually that's not necessary because all this stuff will just auto complete for you as you start typing. The next thing we'll look at is the use of third party libraries. So let's go ahead and install Lodash with npm. And you'll see that creates a Node modules folder with the source code for Lodash. A lot of mainstream libraries like Firebase, my, for example, ship with type declarations automatically, but Lodash is not one of them. So if we go into our index ts and import Lodash, we'll get a warning from TypeScript my saying that there are no declarations found, which means we're not going to get any autocomplete or IntelliSense in the IDE. But the good news is there's a giant monorepo out there with community maintained types. My apps. If we go ahead and install the types in our development environment, we'll have autocomplete and IntelliSense for every Lodash function. So so now that we know how the TypeScript compiler works, let's go ahead and write some code that uses type annotations. There are 2 ways you can strong type your code, implicitly or explicitly. So my, say, primitive number type. Then if we go down here and try to assign a string value to this variable, it's going to give us an error because a string is not assignable to a number. My if this code were a vanilla JavaScript, we wouldn't catch this bug until we actually run our code somewhere. But with TypeScript, we know about it right away. My unlike languages like C Sharp or Java, we can actually opt out of the type system by annotating our variable with any. This just means that this variable can be assigned any value and the compiler won't type check it. Ideally, you want to avoid doing things like this when possible, but it does give TypeScript a ton of flexibility. My in the last example, we gave our variable an implicit number type. But what if we don't have a value to assign to it upfront? If we don't add any type annotations to it, it's going to be inferred as an Any type. So we can assign both a string and a number to it. If we want to annotate it with a type, we can just my colon followed by number which is one of the built in primitive types in JavaScript. When we do that, we get an error under the string value because we can't assign it as that type. My one tip that I'll give you here is that if you have an implicit type, don't bother explicitly strong typing it. For example, here we're assigning a value that's a number, so adding the number my annotation is really just redundant. So we've looked at some of the built in types in JavaScript, but you can also create your own types from scratch. My first, you'll give the type a name which is typically in Pascal case. And for right now, we'll just go ahead and arbitrarily assign our style type to a string. My then we can declare a variable that's annotated with this style type. And then we'll get feedback for this custom type instead of just a regular string. My right now, this is super redundant. But let's say our style type can only be bold or italic. We can create a union type by separating them with a pipe. And now, we can only assign this variable to these two specific values. And we're not limited to just strings. We could even extend this custom type with a number. So that's pretty cool. But more often than not, you'll be strong typing objects that have multiple properties with multiple different types. Let's imagine we have 2 objects and we want to enforce that this object shape has a first and last name with string types. My composing objects or class instances that don't have the correct shape is an easy way to create bugs in your program. But with TypeScript, we can enforce the shape of an object with an interface. My if we know that the shape of the person object will always be the same, then we can define an interface that defines the types on each property. Now we can use this interface to strong type these objects directly or we could use it as the return value from a function or as an argument or anywhere else in our code. My now sometimes an interface like this can be a little too restrictive, but you can actually maintain the required properties and then add any additional properties to be added by creating a key with a type of my string with a value type of any. So now a first and last name will be required, but you can also add any additional property that you want to this object. Now, let's go ahead and switch gears to functions. Strong typing a function can be a little more complex because you have types for the arguments and also the return value. My so here we just have a plain JavaScript function without any types that raises x to the power of y. So currently, we could add string values as the arguments here and we wouldn't get any error from the compiler. But obviously, this function is going to fail if we try to pass it any non number value. My you can annotate arguments the same way we do with variables by just adding a colon and then the type after it. And that will ensure that only numbers can be passed to this function. My so the function implicitly has a number return value because we're using the native math JavaScript library. But we can annotate specific return value type after the parenthesis and before the brackets. So if we set that type to a string, you'll see it's underlined in red because it's returning a number. To implement this function correctly, we can call to string which will then clear out that underlined error. And in many cases, you might have functions that don't return a value or create some kind of side effect. My in that case, you can type your function return value to void. So you'll commonly see the void type on functions like event listeners or side effects that just don't return a value. My view. The next thing we'll look at is how to strong type an array. So we'll start by creating an empty array and then pushing a few different values to it with different types. My we can force this array to only have number types by doing a number type followed by brackets signifying that it's an array. Now you can see we get an error every time we my try to push a value that's not a number. This is especially useful when you're working with an array of objects and you wanna get some IntelliSense as you're iterating over those objects. My for example, if we retrieved an array of people from our database, we could use our person interface to know the exact shape of those objects as they're retrieved. My TypeScript also opens the door to a new data structure called a tuple. These are found in other programming languages like Python. And basically, they're just a fixed length array my where each item in that array has its own type. So we can name our type my list and then we'll give each of its values a different type. Currently, this is giving us an error because we're initial this array as an empty array, but the compiler is expecting all these values to be defined upfront. So one thing you can do is make these values optional by putting a question mark after the type. My and you can also use this question mark syntax in other places in TypeScript, for example, to make function arguments optional. The last thing I wanna show you is TypeScript Generics. X you may run into situations where you want to use a type internally inside of a class or function. A good example is an RxJS observable which itself is just a class that has an internal value that you can observe. So the capital t in this code represents a variable type that we can pass in my too strong type, this observable's internal value. So this allows us to specify the internal type at some later point in our code. My for example, we might have an observable of a number or maybe we have an observable of our person interface. And we can also do this implicitly if we create a new observable of a number. It's my going to implicitly have that internal number type. So more often than not, you'll be using generics rather than creating them, but it's definitely an important thing to know. I'm I'm gonna go ahead and wrap things up there. Hopefully, this video gave you an idea of why TypeScript is so powerful, but we really only scratched the surface here. I'd like to do a video on object oriented versus functional programming in TypeScript or possibly decorators, so let me know what you want to see next in the comments. If this video helped you, please like and subscribe. And if you want to my learn more, consider becoming a pro member at angularfirebase.com. You'll get unlimited access to my full length courses, as well as project support board on Slack. And, of course, I will mail you this laptop sticker that you see on the screen now. Thanks for watching and I will talk to you soon. My
I
i
can
can
pretty
pretty
easily
easily
say
say
that
that
the
the
one
one
tool
tool
that's
that's
had
had
the
the
biggest
biggest
impact
impact
on
on
my
my
productivity
productivity
as
as
a
a
web
web
developer
developer
is
is
TypeScript.
typescript
And
and
that's
that's
pretty
pretty
amazing
amazing
considering
considering
a
a
few
few
years
years
ago
ago
I
i
had
had
no
no
interest
interest
in
in
learning
learning
it
it
and
and
was
was
only
only
exposed
exposed
to
to
it
it
because
because
I
i
had
had
a
a
client
client
that
that
required
required
an
an
Angular
angular
app.
app
In
in
today's
today's
video
video
I'm
i'm
gonna
gonna
show
show
you
you
all
all
the
the
basic
basic
concepts
concepts
needed
needed
to
to
be
be
successful
successful
with
with
TypeScript
typescript
and
and
I'll
i'll
throw
throw
in
in
a
a
few
few
pro
pro
tips
tips
here
here
and
and
there
there
that
that
I
i
find
find
especially
especially
useful.
useful
My
my
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe
subscribe
and
and
there
there
will
will
be
be
a
a
t
t
shirt
shirt
giveaway
giveaway
with
with
this
this
video.
video
All
all
you
you
have
have
to
to
do
do
is
is
leave
leave
a
a
comment
comment
below
below
and
and
we'll
we'll
pick
pick
a
a
random
random
winner
winner
next
next
week.
week
I
i
I
i
want
want
to
to
start
start
with
with
a
a
shout
shout
out
out
to
to
Basrat
basrat
Syed
syed
who
who
is
is
the
the
author
author
of
of
the
the
TypeScript
typescript
Deep
deep
Dive
dive
book.
book
It's
it's
my
my
go
go
to
to
resource
resource
for
for
advanced
advanced
concepts
concepts
and
and
it's
it's
free
free
and
and
open
open
source.
source
So
so
originally
originally
I
i
was
was
assistant
assistant
to
to
even
even
learn
learn
TypeScript
typescript
because
because
I
i
wasn't
wasn't
super
super
comfortable
comfortable
with
with
strong
strong
type
type
languages
languages
and
and
I
i
really
really
try
try
to
to
avoid
avoid
writing
writing
any
any
more
more
code
code
than
than
I
i
have
have
to,
to
but
but
this
this
is
is
a
a
situation
situation
where
where
writing
writing
a
a
little
little
more
more
code
code
upfront
upfront
will
will
pay
pay
big
big
dividends
dividends
as
as
your
your
project
project
grows.
grows
The
the
biggest
biggest
benefit
benefit
is
is
actually
actually
just
just
tooling,
tooling
which
which
you
you
get
get
in
in
your
your
IDE
ide
like
like
Versus
versus
Code.
code
When
when
you
you
use
use
type
type
annotations
annotations
or
or
work
work
with
with
libraries
libraries
that
that
are
are
strong
strong
typed,
typed
your
your
code
code
will
will
be
be
automatically
automatically
documented
documented
in
in
the
the
IDE,
ide
so
so
you
you
really
really
have
have
to
to
refer
refer
back
back
to
to
online
online
documentation
documentation
for
for
the
the
libraries
libraries
that
that
you
you
use.
use
In
in
my
my
addition,
addition
the
the
compiler
compiler
can
can
catch
catch
bugs
bugs
in
in
advance
advance
which
which
is
is
a
a
far
far
more
more
efficient
efficient
way
way
to
to
refactor
refactor
code.
code
I
i
think
think
this
this
Reddit
reddit
post
post
says
says
it
it
best,
best
would
would
you
you
rather
rather
have
have
silly
silly
errors
errors
during
during
or
or
insanity
insanity
inducing
inducing
errors
errors
in
in
production.
production
Another
another
cool
cool
benefit
benefit
of
of
TypeScript
typescript
is
is
that
that
there's
there's
virtually
virtually
no
no
learning
learning
curve
curve
if
if
you
you
know
know
JavaScript.
javascript
My
my
that's
that's
because
because
it's
it's
a
a
superset
superset
of
of
JavaScript,
javascript
so
so
any
any
valid
valid
JS
js
code
code
is
is
also
also
valid
valid
in
in
TypeScript.
typescript
So
so
you
you
can
can
learn
learn
it
it
incrementally
incrementally
as
as
you
you
go.
go
And
and
it
it
also
also
allows
allows
us
us
to
to
write
write
our
our
code
code
with
with
future
future
JavaScript
javascript
features
features
without
without
having
having
to
to
worry
worry
about
about
whether
whether
or
or
not
not
this
this
code
code
will
will
be
be
supported
supported
in
in
our
our
environment
environment
because
because
we
we
can
can
transpile
transpile
my
my
2
2
multiple
multiple
JavaScript
javascript
flavors.
flavors
Now
now
that
that
you
you
know
know
TypeScript
typescript
is
is
awesome,
awesome
let's
let's
go
go
ahead
ahead
and
and
get
get
started.
started
The
the
first
first
thing
thing
you
you
wanna
wanna
do
do
is
is
install
install
TypeScript
typescript
globally
globally
with
with
npm.
npm
My
my
doing
doing
this
this
will
will
give
give
you
you
access
access
to
to
the
the
TSC
tsc
command
command
which
which
will
will
run
run
the
the
TypeScript
typescript
Compiler.
compiler
At
at
the
the
time
time
of
of
this
this
video,
video
I'm
i'm
running
running
version
version
3.1.
3.1
So
so
the
the
first
first
thing
thing
we'll
we'll
do
do
is
is
create
create
an
an
index
index
dot
dot
TS
ts
file.
file
And
and
TypeScript
typescript
code
code
on
on
its
its
own
own
can't
can't
run
run
anywhere.
anywhere
It
it
won't
won't
work
work
in
in
the
the
browser
browser
or
or
in
in
Node.
node
Js
js
or
or
anything
anything
like
like
that.
that
My
my
what
what
we
we
do
do
is
is
use
use
the
the
TypeScript
typescript
compiler
compiler
to
to
convert
convert
that
that
TypeScript
typescript
code
code
to
to
vanilla
vanilla
JavaScript.
javascript
Let's
let's
start
start
by
by
writing
writing
some
some
plain
plain
JavaScript
javascript
in
in
our
our
TypeScript
typescript
file
file
and
and
then
then
compile
compile
it.
it
My
my
so
so
we'll
we'll
just
just
say
say
console
console
log
log
hello
hello
world,
world
then
then
we'll
we'll
go
go
down
down
here
here
to
to
the
the
command
command
line
line
and
and
run
run
tscindex.ts.
tscindex.ts
You'll
you'll
notice
notice
that
that
creates
creates
an
an
index
index
dot
dot
my
my
JS
js
file,
file
that's
that's
our
our
actual
actual
JavaScript
javascript
code
code
that
that
we
we
can
can
run-in
run-in
the
the
browser
browser
or
or
Node.
node
And
and
because
because
we
we
just
just
wrote
wrote
plain
plain
JavaScript,
javascript
that
that
code
code
is
is
identical
identical
to
to
what's
what's
in
in
the
the
index
index
TS
ts
my
my
own.
own
By
by
default,
default
TypeScript
typescript
will
will
compile
compile
to
to
ES
es
3,
3
which
which
doesn't
doesn't
have
have
support
support
for
for
async
async
await.
await
So
so
let's
let's
see
see
what
what
happens
happens
when
when
we
we
write
write
an
an
async
async
function
function
in
in
our
our
TSC
tsc
file
file
and
and
then
then
compile
compile
my
my
life.
life
So
so
you'll
you'll
notice
notice
here
here
that
that
our
our
code
code
gets
gets
transpiled
transpiled
to
to
this
this
crazy
crazy
looking
looking
JavaScript
javascript
just
just
so
so
we
we
can
can
use
use
asyncawait
asyncawait
in
in
our
our
main
main
TypeScript
typescript
code.
code
My
my
the
the
Compiler
compiler
is
is
actually
actually
very
very
sophisticated
sophisticated
and
and
there's
there's
a
a
ton
ton
of
of
different
different
options
options
that
that
you
you
can
can
pass
pass
to
to
it
it
to
to
customize
customize
its
its
behavior.
behavior
You
you
could
could
pass
pass
these
these
options
options
in
in
from
from
my
my
command
command
line,
line
but
but
the
the
standard
standard
way
way
to
to
do
do
it
it
is
is
to
to
create
create
a
a
tsconfig.json,
tsconfig.json
which
which
will
will
automatically
automatically
get
get
picked
picked
up
up
when
when
you
you
run
run
tsc.
tsc
My
my
the
the
tsconfig
tsconfig
can
can
seem
seem
pretty
pretty
overwhelming
overwhelming
at
at
first,
first
but
but
there's
there's
usually
usually
only
only
a
a
few
few
options
options
that
that
you
you
have
have
to
to
think
think
about
about
for
for
the
the
most
most
part.
part
The
the
first
first
one
one
is
is
the
the
target
target
and
and
this
this
is
is
the
the
flavor
flavor
of
of
JavaScript
javascript
that
that
your
your
code
code
will
will
be
be
compiled
compiled
to.
to
So
so
if
if
we
we
set
set
our
our
target
target
to
to
ES
es
next
next
and
and
then
then
run
run
TSC,
tsc
you'll
you'll
see
see
that
that
it
it
compiles
compiles
our
our
code
code
with
with
AsyncAwait
asyncawait
natively
natively
because
because
it's
it's
targeting
targeting
the
the
latest
latest
version
version
of
of
JavaScript
javascript
which
which
supports
supports
that
that
syntax.
syntax
My
my
another
another
option
option
that
that
we'll
we'll
wanna
wanna
set
set
right
right
away
away
is
is
watch
watch
true
true
which
which
will
will
just
just
recompile
recompile
our
our
code
code
every
every
time
time
we
we
save
save
the
the
file.
file
That'll
that'll
just
just
save
save
us
us
from
from
rerunning
rerunning
that
that
tsc
tsc
command
command
after
after
every
every
change.
change
My
my
the
the
next
next
option
option
we'll
we'll
look
look
at
at
is
is
lib
lib
which
which
allows
allows
us
us
to
to
automatically
automatically
include
include
typings
typings
for
for
certain
certain
environments
environments
such
such
as
as
the
the
DOM
dom
or
or
ES
es
2017.
2017
My
my
so
so
if
if
you're
you're
building
building
a
a
web
web
application,
application
you'd
you'd
wanna
wanna
include
include
the
the
DOM
dom
library,
library
which
which
allows
allows
TypeScript
typescript
to
to
compile
compile
your
your
code
code
with
with
all
all
of
of
the
the
native
native
DOM
dom
classes
classes
without
without
any
any
compilation
compilation
errors.
errors
For
for
example,
example
if
if
we
we
go
go
back
back
to
to
our
our
code,
code
we
we
can
can
use
use
the
the
URL
url
class
class
which
which
is
is
part
part
of
of
the
the
DOM
dom
and
and
we'll
we'll
get
get
autocomplete
autocomplete
and
and
IntelliSense
intellisense
on
on
this
this
class.
class
My
my
so
so
this
this
is
is
where
where
the
the
incredible
incredible
tooling
tooling
of
of
TypeScript
typescript
starts
starts
to
to
come
come
in.
in
If
if
we
we
hover
hover
over
over
the
the
class,
class
we
we
have
have
integrated
integrated
documentation
documentation
as
as
well
well
as
as
an
an
error
error
message
message
telling
telling
us
us
exactly
exactly
why
why
my
my
code
code
won't
won't
run.
run
And
and
if
if
we
we
want
want
a
a
really
really
explicit
explicit
view
view
of
of
the
the
interface,
interface
we
we
can
can
right
right
click
click
and
and
go
go
to
to
the
the
typings,
typings
then
then
we'll
we'll
have
have
a
a
view
view
of
of
every
every
property
property
and
and
method
method
that
that
exists
exists
on
on
this
this
class.
class
My
my
but
but
usually
usually
that's
that's
not
not
necessary
necessary
because
because
all
all
this
this
stuff
stuff
will
will
just
just
auto
auto
complete
complete
for
for
you
you
as
as
you
you
start
start
typing.
typing
The
the
next
next
thing
thing
we'll
we'll
look
look
at
at
is
is
the
the
use
use
of
of
third
third
party
party
libraries.
libraries
So
so
let's
let's
go
go
ahead
ahead
and
and
install
install
Lodash
lodash
with
with
npm.
npm
And
and
you'll
you'll
see
see
that
that
creates
creates
a
a
Node
node
modules
modules
folder
folder
with
with
the
the
source
source
code
code
for
for
Lodash.
lodash
A
a
lot
lot
of
of
mainstream
mainstream
libraries
libraries
like
like
Firebase,
firebase
my,
my
for
for
example,
example
ship
ship
with
with
type
type
declarations
declarations
automatically,
automatically
but
but
Lodash
lodash
is
is
not
not
one
one
of
of
them.
them
So
so
if
if
we
we
go
go
into
into
our
our
index
index
ts
ts
and
and
import
import
Lodash,
lodash
we'll
we'll
get
get
a
a
warning
warning
from
from
TypeScript
typescript
my
my
saying
saying
that
that
there
there
are
are
no
no
declarations
declarations
found,
found
which
which
means
means
we're
we're
not
not
going
going
to
to
get
get
any
any
autocomplete
autocomplete
or
or
IntelliSense
intellisense
in
in
the
the
IDE.
ide
But
but
the
the
good
good
news
news
is
is
there's
there's
a
a
giant
giant
monorepo
monorepo
out
out
there
there
with
with
community
community
maintained
maintained
types.
types
My
my
apps.
apps
If
if
we
we
go
go
ahead
ahead
and
and
install
install
the
the
types
types
in
in
our
our
development
development
environment,
environment
we'll
we'll
have
have
autocomplete
autocomplete
and
and
IntelliSense
intellisense
for
for
every
every
Lodash
lodash
function.
function
So
so
so
so
now
now
that
that
we
we
know
know
how
how
the
the
TypeScript
typescript
compiler
compiler
works,
works
let's
let's
go
go
ahead
ahead
and
and
write
write
some
some
code
code
that
that
uses
uses
type
type
annotations.
annotations
There
there
are
are
2
2
ways
ways
you
you
can
can
strong
strong
type
type
your
your
code,
code
implicitly
implicitly
or
or
explicitly.
explicitly
So
so
my,
my
say,
say
primitive
primitive
number
number
type.
type
Then
then
if
if
we
we
go
go
down
down
here
here
and
and
try
try
to
to
assign
assign
a
a
string
string
value
value
to
to
this
this
variable,
variable
it's
it's
going
going
to
to
give
give
us
us
an
an
error
error
because
because
a
a
string
string
is
is
not
not
assignable
assignable
to
to
a
a
number.
number
My
my
if
if
this
this
code
code
were
were
a
a
vanilla
vanilla
JavaScript,
javascript
we
we
wouldn't
wouldn't
catch
catch
this
this
bug
bug
until
until
we
we
actually
actually
run
run
our
our
code
code
somewhere.
somewhere
But
but
with
with
TypeScript,
typescript
we
we
know
know
about
about
it
it
right
right
away.
away
My
my
unlike
unlike
languages
languages
like
like
C
c
Sharp
sharp
or
or
Java,
java
we
we
can
can
actually
actually
opt
opt
out
out
of
of
the
the
type
type
system
system
by
by
annotating
annotating
our
our
variable
variable
with
with
any.
any
This
this
just
just
means
means
that
that
this
this
variable
variable
can
can
be
be
assigned
assigned
any
any
value
value
and
and
the
the
compiler
compiler
won't
won't
type
type
check
check
it.
it
Ideally,
ideally
you
you
want
want
to
to
avoid
avoid
doing
doing
things
things
like
like
this
this
when
when
possible,
possible
but
but
it
it
does
does
give
give
TypeScript
typescript
a
a
ton
ton
of
of
flexibility.
flexibility
My
my
in
in
the
the
last
last
example,
example
we
we
gave
gave
our
our
variable
variable
an
an
implicit
implicit
number
number
type.
type
But
but
what
what
if
if
we
we
don't
don't
have
have
a
a
value
value
to
to
assign
assign
to
to
it
it
upfront?
upfront
If
if
we
we
don't
don't
add
add
any
any
type
type
annotations
annotations
to
to
it,
it
it's
it's
going
going
to
to
be
be
inferred
inferred
as
as
an
an
Any
any
type.
type
So
so
we
we
can
can
assign
assign
both
both
a
a
string
string
and
and
a
a
number
number
to
to
it.
it
If
if
we
we
want
want
to
to
annotate
annotate
it
it
with
with
a
a
type,
type
we
we
can
can
just
just
my
my
colon
colon
followed
followed
by
by
number
number
which
which
is
is
one
one
of
of
the
the
built
built
in
in
primitive
primitive
types
types
in
in
JavaScript.
javascript
When
when
we
we
do
do
that,
that
we
we
get
get
an
an
error
error
under
under
the
the
string
string
value
value
because
because
we
we
can't
can't
assign
assign
it
it
as
as
that
that
type.
type
My
my
one
one
tip
tip
that
that
I'll
i'll
give
give
you
you
here
here
is
is
that
that
if
if
you
you
have
have
an
an
implicit
implicit
type,
type
don't
don't
bother
bother
explicitly
explicitly
strong
strong
typing
typing
it.
it
For
for
example,
example
here
here
we're
we're
assigning
assigning
a
a
value
value
that's
that's
a
a
number,
number
so
so
adding
adding
the
the
number
number
my
my
annotation
annotation
is
is
really
really
just
just
redundant.
redundant
So
so
we've
we've
looked
looked
at
at
some
some
of
of
the
the
built
built
in
in
types
types
in
in
JavaScript,
javascript
but
but
you
you
can
can
also
also
create
create
your
your
own
own
types
types
from
from
scratch.
scratch
My
my
first,
first
you'll
you'll
give
give
the
the
type
type
a
a
name
name
which
which
is
is
typically
typically
in
in
Pascal
pascal
case.
case
And
and
for
for
right
right
now,
now
we'll
we'll
just
just
go
go
ahead
ahead
and
and
arbitrarily
arbitrarily
assign
assign
our
our
style
style
type
type
to
to
a
a
string.
string
My
my
then
then
we
we
can
can
declare
declare
a
a
variable
variable
that's
that's
annotated
annotated
with
with
this
this
style
style
type.
type
And
and
then
then
we'll
we'll
get
get
feedback
feedback
for
for
this
this
custom
custom
type
type
instead
instead
of
of
just
just
a
a
regular
regular
string.
string
My
my
right
right
now,
now
this
this
is
is
super
super
redundant.
redundant
But
but
let's
let's
say
say
our
our
style
style
type
type
can
can
only
only
be
be
bold
bold
or
or
italic.
italic
We
we
can
can
create
create
a
a
union
union
type
type
by
by
separating
separating
them
them
with
with
a
a
pipe.
pipe
And
and
now,
now
we
we
can
can
only
only
assign
assign
this
this
variable
variable
to
to
these
these
two
two
specific
specific
values.
values
And
and
we're
we're
not
not
limited
limited
to
to
just
just
strings.
strings
We
we
could
could
even
even
extend
extend
this
this
custom
custom
type
type
with
with
a
a
number.
number
So
so
that's
that's
pretty
pretty
cool.
cool
But
but
more
more
often
often
than
than
not,
not
you'll
you'll
be
be
strong
strong
typing
typing
objects
objects
that
that
have
have
multiple
multiple
properties
properties
with
with
multiple
multiple
different
different
types.
types
Let's
let's
imagine
imagine
we
we
have
have
2
2
objects
objects
and
and
we
we
want
want
to
to
enforce
enforce
that
that
this
this
object
object
shape
shape
has
has
a
a
first
first
and
and
last
last
name
name
with
with
string
string
types.
types
My
my
composing
composing
objects
objects
or
or
class
class
instances
instances
that
that
don't
don't
have
have
the
the
correct
correct
shape
shape
is
is
an
an
easy
easy
way
way
to
to
create
create
bugs
bugs
in
in
your
your
program.
program
But
but
with
with
TypeScript,
typescript
we
we
can
can
enforce
enforce
the
the
shape
shape
of
of
an
an
object
object
with
with
an
an
interface.
interface
My
my
if
if
we
we
know
know
that
that
the
the
shape
shape
of
of
the
the
person
person
object
object
will
will
always
always
be
be
the
the
same,
same
then
then
we
we
can
can
define
define
an
an
interface
interface
that
that
defines
defines
the
the
types
types
on
on
each
each
property.
property
Now
now
we
we
can
can
use
use
this
this
interface
interface
to
to
strong
strong
type
type
these
these
objects
objects
directly
directly
or
or
we
we
could
could
use
use
it
it
as
as
the
the
return
return
value
value
from
from
a
a
function
function
or
or
as
as
an
an
argument
argument
or
or
anywhere
anywhere
else
else
in
in
our
our
code.
code
My
my
now
now
sometimes
sometimes
an
an
interface
interface
like
like
this
this
can
can
be
be
a
a
little
little
too
too
restrictive,
restrictive
but
but
you
you
can
can
actually
actually
maintain
maintain
the
the
required
required
properties
properties
and
and
then
then
add
add
any
any
additional
additional
properties
properties
to
to
be
be
added
added
by
by
creating
creating
a
a
key
key
with
with
a
a
type
type
of
of
my
my
string
string
with
with
a
a
value
value
type
type
of
of
any.
any
So
so
now
now
a
a
first
first
and
and
last
last
name
name
will
will
be
be
required,
required
but
but
you
you
can
can
also
also
add
add
any
any
additional
additional
property
property
that
that
you
you
want
want
to
to
this
this
object.
object
Now,
now
let's
let's
go
go
ahead
ahead
and
and
switch
switch
gears
gears
to
to
functions.
functions
Strong
strong
typing
typing
a
a
function
function
can
can
be
be
a
a
little
little
more
more
complex
complex
because
because
you
you
have
have
types
types
for
for
the
the
arguments
arguments
and
and
also
also
the
the
return
return
value.
value
My
my
so
so
here
here
we
we
just
just
have
have
a
a
plain
plain
JavaScript
javascript
function
function
without
without
any
any
types
types
that
that
raises
raises
x
x
to
to
the
the
power
power
of
of
y.
y
So
so
currently,
currently
we
we
could
could
add
add
string
string
values
values
as
as
the
the
arguments
arguments
here
here
and
and
we
we
wouldn't
wouldn't
get
get
any
any
error
error
from
from
the
the
compiler.
compiler
But
but
obviously,
obviously
this
this
function
function
is
is
going
going
to
to
fail
fail
if
if
we
we
try
try
to
to
pass
pass
it
it
any
any
non
non
number
number
value.
value
My
my
you
you
can
can
annotate
annotate
arguments
arguments
the
the
same
same
way
way
we
we
do
do
with
with
variables
variables
by
by
just
just
adding
adding
a
a
colon
colon
and
and
then
then
the
the
type
type
after
after
it.
it
And
and
that
that
will
will
ensure
ensure
that
that
only
only
numbers
numbers
can
can
be
be
passed
passed
to
to
this
this
function.
function
My
my
so
so
the
the
function
function
implicitly
implicitly
has
has
a
a
number
number
return
return
value
value
because
because
we're
we're
using
using
the
the
native
native
math
math
JavaScript
javascript
library.
library
But
but
we
we
can
can
annotate
annotate
specific
specific
return
return
value
value
type
type
after
after
the
the
parenthesis
parenthesis
and
and
before
before
the
the
brackets.
brackets
So
so
if
if
we
we
set
set
that
that
type
type
to
to
a
a
string,
string
you'll
you'll
see
see
it's
it's
underlined
underlined
in
in
red
red
because
because
it's
it's
returning
returning
a
a
number.
number
To
to
implement
implement
this
this
function
function
correctly,
correctly
we
we
can
can
call
call
to
to
string
string
which
which
will
will
then
then
clear
clear
out
out
that
that
underlined
underlined
error.
error
And
and
in
in
many
many
cases,
cases
you
you
might
might
have
have
functions
functions
that
that
don't
don't
return
return
a
a
value
value
or
or
create
create
some
some
kind
kind
of
of
side
side
effect.
effect
My
my
in
in
that
that
case,
case
you
you
can
can
type
type
your
your
function
function
return
return
value
value
to
to
void.
void
So
so
you'll
you'll
commonly
commonly
see
see
the
the
void
void
type
type
on
on
functions
functions
like
like
event
event
listeners
listeners
or
or
side
side
effects
effects
that
that
just
just
don't
don't
return
return
a
a
value.
value
My
my
view.
view
The
the
next
next
thing
thing
we'll
we'll
look
look
at
at
is
is
how
how
to
to
strong
strong
type
type
an
an
array.
array
So
so
we'll
we'll
start
start
by
by
creating
creating
an
an
empty
empty
array
array
and
and
then
then
pushing
pushing
a
a
few
few
different
different
values
values
to
to
it
it
with
with
different
different
types.
types
My
my
we
we
can
can
force
force
this
this
array
array
to
to
only
only
have
have
number
number
types
types
by
by
doing
doing
a
a
number
number
type
type
followed
followed
by
by
brackets
brackets
signifying
signifying
that
that
it's
it's
an
an
array.
array
Now
now
you
you
can
can
see
see
we
we
get
get
an
an
error
error
every
every
time
time
we
we
my
my
try
try
to
to
push
push
a
a
value
value
that's
that's
not
not
a
a
number.
number
This
this
is
is
especially
especially
useful
useful
when
when
you're
you're
working
working
with
with
an
an
array
array
of
of
objects
objects
and
and
you
you
wanna
wanna
get
get
some
some
IntelliSense
intellisense
as
as
you're
you're
iterating
iterating
over
over
those
those
objects.
objects
My
my
for
for
example,
example
if
if
we
we
retrieved
retrieved
an
an
array
array
of
of
people
people
from
from
our
our
database,
database
we
we
could
could
use
use
our
our
person
person
interface
interface
to
to
know
know
the
the
exact
exact
shape
shape
of
of
those
those
objects
objects
as
as
they're
they're
retrieved.
retrieved
My
my
TypeScript
typescript
also
also
opens
opens
the
the
door
door
to
to
a
a
new
new
data
data
structure
structure
called
called
a
a
tuple.
tuple
These
these
are
are
found
found
in
in
other
other
programming
programming
languages
languages
like
like
Python.
python
And
and
basically,
basically
they're
they're
just
just
a
a
fixed
fixed
length
length
array
array
my
my
where
where
each
each
item
item
in
in
that
that
array
array
has
has
its
its
own
own
type.
type
So
so
we
we
can
can
name
name
our
our
type
type
my
my
list
list
and
and
then
then
we'll
we'll
give
give
each
each
of
of
its
its
values
values
a
a
different
different
type.
type
Currently,
currently
this
this
is
is
giving
giving
us
us
an
an
error
error
because
because
we're
we're
initial
initial
this
this
array
array
as
as
an
an
empty
empty
array,
array
but
but
the
the
compiler
compiler
is
is
expecting
expecting
all
all
these
these
values
values
to
to
be
be
defined
defined
upfront.
upfront
So
so
one
one
thing
thing
you
you
can
can
do
do
is
is
make
make
these
these
values
values
optional
optional
by
by
putting
putting
a
a
question
question
mark
mark
after
after
the
the
type.
type
My
my
and
and
you
you
can
can
also
also
use
use
this
this
question
question
mark
mark
syntax
syntax
in
in
other
other
places
places
in
in
TypeScript,
typescript
for
for
example,
example
to
to
make
make
function
function
arguments
arguments
optional.
optional
The
the
last
last
thing
thing
I
i
wanna
wanna
show
show
you
you
is
is
TypeScript
typescript
Generics.
generics
X
x
you
you
may
may
run
run
into
into
situations
situations
where
where
you
you
want
want
to
to
use
use
a
a
type
type
internally
internally
inside
inside
of
of
a
a
class
class
or
or
function.
function
A
a
good
good
example
example
is
is
an
an
RxJS
rxjs
observable
observable
which
which
itself
itself
is
is
just
just
a
a
class
class
that
that
has
has
an
an
internal
internal
value
value
that
that
you
you
can
can
observe.
observe
So
so
the
the
capital
capital
t
t
in
in
this
this
code
code
represents
represents
a
a
variable
variable
type
type
that
that
we
we
can
can
pass
pass
in
in
my
my
too
too
strong
strong
type,
type
this
this
observable's
observable's
internal
internal
value.
value
So
so
this
this
allows
allows
us
us
to
to
specify
specify
the
the
internal
internal
type
type
at
at
some
some
later
later
point
point
in
in
our
our
code.
code
My
my
for
for
example,
example
we
we
might
might
have
have
an
an
observable
observable
of
of
a
a
number
number
or
or
maybe
maybe
we
we
have
have
an
an
observable
observable
of
of
our
our
person
person
interface.
interface
And
and
we
we
can
can
also
also
do
do
this
this
implicitly
implicitly
if
if
we
we
create
create
a
a
new
new
observable
observable
of
of
a
a
number.
number
It's
it's
my
my
going
going
to
to
implicitly
implicitly
have
have
that
that
internal
internal
number
number
type.
type
So
so
more
more
often
often
than
than
not,
not
you'll
you'll
be
be
using
using
generics
generics
rather
rather
than
than
creating
creating
them,
them
but
but
it's
it's
definitely
definitely
an
an
important
important
thing
thing
to
to
know.
know
I'm
i'm
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
Hopefully,
hopefully
this
this
video
video
gave
gave
you
you
an
an
idea
idea
of
of
why
why
TypeScript
typescript
is
is
so
so
powerful,
powerful
but
but
we
we
really
really
only
only
scratched
scratched
the
the
surface
surface
here.
here
I'd
i'd
like
like
to
to
do
do
a
a
video
video
on
on
object
object
oriented
oriented
versus
versus
functional
functional
programming
programming
in
in
TypeScript
typescript
or
or
possibly
possibly
decorators,
decorators
so
so
let
let
me
me
know
know
what
what
you
you
want
want
to
to
see
see
next
next
in
in
the
the
comments.
comments
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
want
want
to
to
my
my
learn
learn
more,
more
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase.com.
angularfirebase.com
You'll
you'll
get
get
unlimited
unlimited
access
access
to
to
my
my
full
full
length
length
courses,
courses
as
as
well
well
as
as
project
project
support
support
board
board
on
on
Slack.
slack
And,
and
of
of
course,
course
I
i
will
will
mail
mail
you
you
this
this
laptop
laptop
sticker
sticker
that
that
you
you
see
see
on
on
the
the
screen
screen
now.
now
Thanks
thanks
for
for
watching
watching
and
and
I
i
will
will
talk
talk
to
to
you
you
soon.
soon
My
my
success
The speakers discuss the benefits of TypeScript, including its ability to create a web app and transcribe code, and explain the process of installing it globally on a browser or queries. They also provide tips for creating a web app, including installing it on a browser or queries, and discuss the use of third party libraries and the type system for writing code. They then explain how to customize behavior in code using tsc command, validating the target, and watching true. The speakers also discuss the use of third party libraries and the use of the type system for writing code. They end with a discussion on objects oriented and a video on object oriented, as well as a link to a book.
TypeScript - The Basics
I can pretty easily say that the one tool that's had the biggest impact on my productivity as a web developer is TypeScript. And that's pretty amazing considering a few years ago I had no interest in learning it and was only exposed to it because I had a client that required an Angular app. In today's video I'm gonna show you all the basic concepts needed to be successful with TypeScript and I'll throw in a few pro tips here and there that I find especially useful. My If you're new here, like and subscribe and there will be a t shirt giveaway with this video. All you have to do is leave a comment below and we'll pick a random winner next week. I I want to start with a shout out to Basrat Syed who is the author of the TypeScript Deep Dive book. It's my go to resource for advanced concepts and it's free and open source. So originally I was assistant to even learn TypeScript because I wasn't super comfortable with strong type languages and I really try to avoid writing any more code than I have to, but this is a situation where writing a little more code upfront will pay big dividends as your project grows. The biggest benefit is actually just tooling, which you get in your IDE like Versus Code. When you use type annotations or work with libraries that are strong typed, your code will be automatically documented in the IDE, so you really have to refer back to online documentation for the libraries that you use. In my addition, the compiler can catch bugs in advance which is a far more efficient way to refactor code. I think this Reddit post says it best, would you rather have silly errors during or insanity inducing errors in production. Another cool benefit of TypeScript is that there's virtually no learning curve if you know JavaScript. My that's because it's a superset of JavaScript, so any valid JS code is also valid in TypeScript. So you can learn it incrementally as you go. And it also allows us to write our code with future JavaScript features without having to worry about whether or not this code will be supported in our environment because we can transpile my 2 multiple JavaScript flavors. Now that you know TypeScript is awesome, let's go ahead and get started. The first thing you wanna do is install TypeScript globally with npm. My doing this will give you access to the TSC command which will run the TypeScript Compiler. At the time of this video, I'm running version 3.1. So the first thing we'll do is create an index dot TS file. And TypeScript code on its own can't run anywhere. It won't work in the browser or in Node. Js or anything like that. My what we do is use the TypeScript compiler to convert that TypeScript code to vanilla JavaScript. Let's start by writing some plain JavaScript in our TypeScript file and then compile it. My so we'll just say console log hello world, then we'll go down here to the command line and run tscindex.ts. You'll notice that creates an index dot my JS file, that's our actual JavaScript code that we can run-in the browser or Node. And because we just wrote plain JavaScript, that code is identical to what's in the index TS my own. By default, TypeScript will compile to ES 3, which doesn't have support for async await. So let's see what happens when we write an async function in our TSC file and then compile my life. So you'll notice here that our code gets transpiled to this crazy looking JavaScript just so we can use asyncawait in our main TypeScript code. My the Compiler is actually very sophisticated and there's a ton of different options that you can pass to it to customize its behavior. You could pass these options in from my command line, but the standard way to do it is to create a tsconfig.json, which will automatically get picked up when you run tsc. My the tsconfig can seem pretty overwhelming at first, but there's usually only a few options that you have to think about for the most part. The first one is the target and this is the flavor of JavaScript that your code will be compiled to. So if we set our target to ES next and then run TSC, you'll see that it compiles our code with AsyncAwait natively because it's targeting the latest version of JavaScript which supports that syntax. My another option that we'll wanna set right away is watch true which will just recompile our code every time we save the file. That'll just save us from rerunning that tsc command after every change. My the next option we'll look at is lib which allows us to automatically include typings for certain environments such as the DOM or ES 2017. My so if you're building a web application, you'd wanna include the DOM library, which allows TypeScript to compile your code with all of the native DOM classes without any compilation errors. For example, if we go back to our code, we can use the URL class which is part of the DOM and we'll get autocomplete and IntelliSense on this class. My so this is where the incredible tooling of TypeScript starts to come in. If we hover over the class, we have integrated documentation as well as an error message telling us exactly why my code won't run. And if we want a really explicit view of the interface, we can right click and go to the typings, then we'll have a view of every property and method that exists on this class. My but usually that's not necessary because all this stuff will just auto complete for you as you start typing. The next thing we'll look at is the use of third party libraries. So let's go ahead and install Lodash with npm. And you'll see that creates a Node modules folder with the source code for Lodash. A lot of mainstream libraries like Firebase, my, for example, ship with type declarations automatically, but Lodash is not one of them. So if we go into our index ts and import Lodash, we'll get a warning from TypeScript my saying that there are no declarations found, which means we're not going to get any autocomplete or IntelliSense in the IDE. But the good news is there's a giant monorepo out there with community maintained types. My apps. If we go ahead and install the types in our development environment, we'll have autocomplete and IntelliSense for every Lodash function. So so now that we know how the TypeScript compiler works, let's go ahead and write some code that uses type annotations. There are 2 ways you can strong type your code, implicitly or explicitly. So my, say, primitive number type. Then if we go down here and try to assign a string value to this variable, it's going to give us an error because a string is not assignable to a number. My if this code were a vanilla JavaScript, we wouldn't catch this bug until we actually run our code somewhere. But with TypeScript, we know about it right away. My unlike languages like C Sharp or Java, we can actually opt out of the type system by annotating our variable with any. This just means that this variable can be assigned any value and the compiler won't type check it. Ideally, you want to avoid doing things like this when possible, but it does give TypeScript a ton of flexibility. My in the last example, we gave our variable an implicit number type. But what if we don't have a value to assign to it upfront? If we don't add any type annotations to it, it's going to be inferred as an Any type. So we can assign both a string and a number to it. If we want to annotate it with a type, we can just my colon followed by number which is one of the built in primitive types in JavaScript. When we do that, we get an error under the string value because we can't assign it as that type. My one tip that I'll give you here is that if you have an implicit type, don't bother explicitly strong typing it. For example, here we're assigning a value that's a number, so adding the number my annotation is really just redundant. So we've looked at some of the built in types in JavaScript, but you can also create your own types from scratch. My first, you'll give the type a name which is typically in Pascal case. And for right now, we'll just go ahead and arbitrarily assign our style type to a string. My then we can declare a variable that's annotated with this style type. And then we'll get feedback for this custom type instead of just a regular string. My right now, this is super redundant. But let's say our style type can only be bold or italic. We can create a union type by separating them with a pipe. And now, we can only assign this variable to these two specific values. And we're not limited to just strings. We could even extend this custom type with a number. So that's pretty cool. But more often than not, you'll be strong typing objects that have multiple properties with multiple different types. Let's imagine we have 2 objects and we want to enforce that this object shape has a first and last name with string types. My composing objects or class instances that don't have the correct shape is an easy way to create bugs in your program. But with TypeScript, we can enforce the shape of an object with an interface. My if we know that the shape of the person object will always be the same, then we can define an interface that defines the types on each property. Now we can use this interface to strong type these objects directly or we could use it as the return value from a function or as an argument or anywhere else in our code. My now sometimes an interface like this can be a little too restrictive, but you can actually maintain the required properties and then add any additional properties to be added by creating a key with a type of my string with a value type of any. So now a first and last name will be required, but you can also add any additional property that you want to this object. Now, let's go ahead and switch gears to functions. Strong typing a function can be a little more complex because you have types for the arguments and also the return value. My so here we just have a plain JavaScript function without any types that raises x to the power of y. So currently, we could add string values as the arguments here and we wouldn't get any error from the compiler. But obviously, this function is going to fail if we try to pass it any non number value. My you can annotate arguments the same way we do with variables by just adding a colon and then the type after it. And that will ensure that only numbers can be passed to this function. My so the function implicitly has a number return value because we're using the native math JavaScript library. But we can annotate specific return value type after the parenthesis and before the brackets. So if we set that type to a string, you'll see it's underlined in red because it's returning a number. To implement this function correctly, we can call to string which will then clear out that underlined error. And in many cases, you might have functions that don't return a value or create some kind of side effect. My in that case, you can type your function return value to void. So you'll commonly see the void type on functions like event listeners or side effects that just don't return a value. My view. The next thing we'll look at is how to strong type an array. So we'll start by creating an empty array and then pushing a few different values to it with different types. My we can force this array to only have number types by doing a number type followed by brackets signifying that it's an array. Now you can see we get an error every time we my try to push a value that's not a number. This is especially useful when you're working with an array of objects and you wanna get some IntelliSense as you're iterating over those objects. My for example, if we retrieved an array of people from our database, we could use our person interface to know the exact shape of those objects as they're retrieved. My TypeScript also opens the door to a new data structure called a tuple. These are found in other programming languages like Python. And basically, they're just a fixed length array my where each item in that array has its own type. So we can name our type my list and then we'll give each of its values a different type. Currently, this is giving us an error because we're initial this array as an empty array, but the compiler is expecting all these values to be defined upfront. So one thing you can do is make these values optional by putting a question mark after the type. My and you can also use this question mark syntax in other places in TypeScript, for example, to make function arguments optional. The last thing I wanna show you is TypeScript Generics. X you may run into situations where you want to use a type internally inside of a class or function. A good example is an RxJS observable which itself is just a class that has an internal value that you can observe. So the capital t in this code represents a variable type that we can pass in my too strong type, this observable's internal value. So this allows us to specify the internal type at some later point in our code. My for example, we might have an observable of a number or maybe we have an observable of our person interface. And we can also do this implicitly if we create a new observable of a number. It's my going to implicitly have that internal number type. So more often than not, you'll be using generics rather than creating them, but it's definitely an important thing to know. I'm I'm gonna go ahead and wrap things up there. Hopefully, this video gave you an idea of why TypeScript is so powerful, but we really only scratched the surface here. I'd like to do a video on object oriented versus functional programming in TypeScript or possibly decorators, so let me know what you want to see next in the comments. If this video helped you, please like and subscribe. And if you want to my learn more, consider becoming a pro member at angularfirebase.com. You'll get unlimited access to my full length courses, as well as project support board on Slack. And, of course, I will mail you this laptop sticker that you see on the screen now. Thanks for watching and I will talk to you soon. My
The speakers discuss the benefits of TypeScript, including its ability to create a web app and transcribe code, and explain the process of installing it globally on a browser or queries. They also provide tips for creating a web app, including installing it on a browser or queries, and discuss the use of third party libraries and the type system for writing code. They then explain how to customize behavior in code using tsc command, validating the target, and watching true. The speakers also discuss the use of third party libraries and the use of the type system for writing code. They end with a discussion on objects oriented and a video on object oriented, as well as a link to a book.