Typescript 🚀
By Max - Udemy
Last updated
By Max - Udemy
Last updated
Tool used only for development (to catch programmer bugs or human mistakes while writing code), and it doesn't do anything else apart from making developer life easy. Once it's compiled into JS, then the underlying JS code will not have any of this TS features the developer wrote. Browsers or JS engines can't understand typescript. So during run time, it's still the JS that gets executed, but we can be sure that the JS (we get after compiled by TS) will not have bugs or will have very less bugs (as TS might have caught during development and would have made the developer to write clean code).
JS superset
Language that's built on JS
Adds new features + advantages to JS
BROWSERS CAN'T EXECUTE TS
It's a better version of JS
It's not only a programming language but also a tool, a compiler to run over typescript code and compiles it to JavaScript
Result of writing TS Code is JavaScript, but we didn't write that JS, we wrote TS
The TS compiler compiles these new features (TS code) to JS "workarounds"
So in the end it gives you nicer syntax and easier way of doing somethings and then it will compile this nicer easier way to more complex JS snippets which we would have to write otherwise
Of course it can't add what's not possible in JS
The other main feature of TS is, it add types which will make it possible to catch errors before it converts into JS. That way, when it compiles, it means that we have checked all the types and all JS code is good without any bugs or confusions that could otherwise occur when running that JS in browser
Let's say we write plain JS code like this. We can get into logical mistake like below. This is not an error but the logical mistake that a developer could do
This is how TS solves it. It lets developer know first before converting the code into JS
of course we could make some additional checks to prevent this in JS like this, but ts can prevent us from falling into this in the first place
TS can check if we are passing numbers and not strings. TS could throw error if we pass strings in place of numbers.
Now we can use tsc command to compile TS file to JS
In Vs code, to start a project, you can just create a .ts file and write some console log statement. To run that (to compile and get js file), run tsc jsfile.js and that gives you js file.
You can also have an index.html file and inside that, have a script tag that points to js file with defer key like this
Now, to run this and for hot reloading (when you change sometime in ts file), and for it to automatically compile and give new output in browser console, install a dependency called lite-server like this
Add start script in package.json like this
Run `npm start` and you should see local server running.
For both JS and TS
Let's look at this code
Now, what if number1 is made '5' string instead of number by mistake? We get 52.8 instead of 7.8. To avoid this, we need to specify what type the n1 and n2 should accept. If we say n1 and n2 to be of number type, then we can't pass string but should pass number and we can then avoid that bug.
Just be aware of this below issue which happens when you open ts and js files at the same time
If some error happens during development that is detected by TS, like lets say you are passing a string to number type, then the TS will yell at you and show the error that is happening during compilation, but by default, TS creates corresponding JS file (even if it knows it has an error and DOESN'T stop the compilation and doesn't stop creating JS file).
This is the default behaviour and we will later see how to stop creating JS file when a TS compilation error occurs.
Why we have types only on params and not on definitions like here?
Because TS will have something called type inference by default (automatic type detection) . Type inference means, TS auto detects the type as soon as something is assigned to a variable. Let's say
TS understands that 'n' will be a number as it is assigned with number. And also, it's a constant, meaning this can't change. We have assigned number 5 to n so it knows 'n' is a number and it's not going to change.
When we want an array of two elements to have fixed structure, eg. first element should always be string and second should always be number, then we use tuple.
Note that the tuple will be a normal array after compiling in JS.
There is a gotcha or bug I would say for tuple. See below image.
Let's say we have role key and it should be only one of the defined values
In this case we can use tuple.
This is the default type. TS will never yell at you when you use any, but the problem is we are not using the power of type script and we might make some mistakes if we use any type. So we need to be careful and use this if it's absolutely necessary.
If you have some variable which you don't know what value will be assigned to it then you can use this, but it's always better to make a proper decision before hand.
one or the other type. In the above example, we can pass either number or a string to input1 and input2. We can have many more unions like number | string | boolean
When working with union types, it's annoying always to define like this string | boolean | number in multiple places. We might want to create a new type which then stores this union type. We can do this with type aliases.
Now what if return type is a function itself.
So it would be good if we let TS know how the function should look like, for example, how the function args are and what the return type is
Gotcha (see below image)
unknown should also not be used always but is better than any type
never is another type that functions can return.
