Understanding TypeScript

> For the complete documentation index, see [llms.txt](https://sandeepamaranath.gitbook.io/notes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sandeepamaranath.gitbook.io/notes/languages-and-frameworks/typescript.md). # Typescript 🚀 By Max - Udemy ## Overview of Typescript? 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

#### So one question to ask is, if typescript gives back JS in the end, then why we need typescript. What extra things TS can do that JS can't? * 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. #### How to install TS {% embed url="" %} ```javascript sudo npm install -g typescript ``` #### How to compile TS? Now we can use `tsc` command to compile TS file to JS

## Course Outline

## Getting Started 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 ```html Understanding TypeScript ``` 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 ```javascript npm install --save-dev lite-server ``` Add start script in package.json like this ```json { "name": "understanding-ts", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "lite-server" }, "author": "Maximilian Schwarzmüller", "license": "ISC", "devDependencies": { "lite-server": "^2.6.1" } } ``` Run \`npm start\` and you should see local server running. ## Typescript Basics and Basic Types ### 💥 💥 Core Types 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

{% hint style="info" %} 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. {% endhint %} #### Typescript types vs Javascript types

### Type Inference 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 ``` const n = 5 ``` 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.

### 🚀 Quiz

### 💥 Object type

### 💥 Array type

### 🐠 🐠 TS specific types

### 🐠 Tuple type

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.

{% hint style="info" %} There is a gotcha or bug I would say for tuple. See below image. {% endhint %}

### 🐠 Enum type Let's say we have role key and it should be only one of the defined values ``` Role could be either ADMIN or USER or OWNER ``` In this case we can use tuple.

### 🐠 Any type

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. ### 🐠 Union type

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` ### 🐠 Literal type

### 🐠 Type Aliases / Custom Types 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.