In this article, we are going learn about What is Typescript? What does it do? Installation process. After reading this article you will have a little bit idea of what is Typescript.
This is going to be a full series of typescript where you will learn from basic topics like string, boolean to more complex like Type Aliases, enums, Interface, generics, and etc.
Table of Contents
What is Typescript?
TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor. Catch errors early in your editor. TypeScript code converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js or Deno, and in your apps. TypeScript understands JavaScript and uses type inference to give you great tooling without additional code.
- Typescript is a superset of JavaScript.
- TypeScript provides various other features, like interfaces, type aliases, abstract classes, function overloading, tuple, generics, etc.
- It allows you to code in a manner so that your code faces much less error in the run time or production.
Don't use typescript if your project is small. You need to use the superpower of the typescript if you are using it to make your code bug and error-free. It's all about the Type safety.
> 2 + "2"
> '22' // ans
> null + 2
> 2
> undefined + 2
> NaN
This should not be done as it makes the issue bigger.
What does typescript do?
It does static checking - whenever you are writing the code, then the code is constantly monitored by IDE to check if you are making any syntax error or something but not in JS. Whatever you write, it's ok.
But when you run the code in your environment, then it throws the error. It would be very helpful to get the idea of whether what you are doing is correct or not as you write the code.
Analyze the code as we type. That's it.
How does Development Process work?
You write all your code in TS format and that code is converted to JavaScript. TS is a development tool and your project still run JS as the browser doesn't understand Typescript.
That's why when you install the TS package then you download it as a dev dependency.
TS Playground: Here you can play with typescript and check how it is converted.
let car = {
module: "xyz",
color: "red",
};
// ❌ ERROR: Property 'price' does not exist on type '{ module: string; color: string; }'.
car.price;
As the above code shows in the example we are trying to get the price which does not exist in the object and it shows the error before running the code.
let num1 = 2;
let num2 = "2"
// 👇 It works but shouldn't be done right?
let sum = num1 + num2; // "22"
The above code does not show any kind of error and when you run it will show you the result as 22 which we don't want. It is allowed, but we can bypass that by defining each variable as a type. We will look at the in later in this article.
Install Typescript
There are two different installations for the project you can use-
Global Installation
In this, you install the Typescript as the global package. you can do that by simply running the following command in your terminal window-
npm install -g typescript
TypeScript in Your Project
When you install typescript for your projects such as for React or Angular then their typescript config file is required what kind of setting you want or not. Use the following command to install the typescript to your project-
npm install typescript --save-dev
For more info visit here
Wrapping up
In this article I explained what Typescript is and how it works and how you can install it in your system.
This is a series of Typescript that will help you to learn Typescript from the scratch. If you enjoyed this article, then don't forget to give ❤️ and Bookmark 🏷️for later use and if you have any questions or feedback then don't hesitate to drop them in the comments below. I'll see in the next one.
Connect with me
| GitHub | Website | Newsletter | Support | |||
|---|---|---|---|---|---|---|
 |
 |
 |
 |
 |
 |
 |
Top comments (17)
That's actually the point of typescript. It adds a type system but since its transpiled into javascript, they can implement latest ES6 syntax without breaking browser compatability.
Some of the features typescript had before javascript are classes, logical assignment operators, decorators (still not implemented in js afaik), optional chaining, etc.
You are correct. TypeScript add static typing to your JavaScript code, while still maintaining compatibility with older versions of browsers. That's why you can use latest feature because eventually it will be transpiled to JavaScript. But I think mostly people use it because it can catch type errors at compile-time, rather than runtime.
Sure, but I was just pointing out your statement was objectively incorrect. Overall great post!
Thanks mate, I have changed the statement. :)
Type safety is not really the reason for swtiching to TypeScript. If that was the only one, you'd be better off just using JSDoc and a good IDE.
I agree with you that there are several reasons to use Typescript and Type safety is one of them.
It took a while for me to understand, that Typescript is not for runtime, it is for devtime 😇
Yes exactly, it lets you catch errors before you go to production.
TypeScript do not have types, it has type annotatations which is the worst of both worlds. No real type safety and slow development speed. if you want types, use a statically typed language, like rust or C++ and compile it to webassembly. If you want development speed and a flexibility, use JS.
I partially agree with your statement. Yes, TypeScript does have types and type annotations, but it can provide real type safety. What TypeScript does is that it add types & type annotations functionality to JavaScript and It can also compile the code to JavaScript. In fact, many developers use TypeScript specifically for the type safety.
TypeScript cannot provide typesafety. Please do some low level programming before you say something so misleading like TypeScript has type safety, because it is simply incorrect - if you know how a computer works. Types has a fixed memory layout and a set of CPU instructions that effectively can operate onpon that type.
In TypeScript can you cast a picture to an integer, in real typed language cannot you do it. This is what typesafety means, you should be able to trust the most basic primitives at least.
Correct me if am wrong here:
You stated that in typescript you can cast a picture to an integer.
Can you explain how can you do that in typescript?
Example: typescriptlang.org/play?#code/GYVw...
This was happening because your
cb()function returninganyvalue. That's why it's not recommended to useanytype.typescriptlang.org/play?#code/GYVw...
But if you do like this then you will get error:
typescriptlang.org/play?#code/FAMw...
Turn on your brain please. I know how to fix so TypeScript catches the error, but this is not about making sure TypeScript catches the error, but instead make sure you can call a function and trust it returns the type you expect. And my example proves YOU CANNOT TRUST IT. Everything within a function is an implementation detail.
That's what I am saying when you create a function
cb()I can't trust on that function because it can return anything which is the main problem. That's why when you usecb() as numberit doesn't show any kind of error.If you want to trust a function to return what you expect, then you have to define them well (not like
cb()for sure).From a developer perspective, everytime you call a function should you 99.99% of the time never need to worry about the implementation. So you should never go to its definition to see how a function is implemented. See it is a black box. The only thing you should care about is its parameters and return type and be able to trust the compiler to enforce it (like every statically typed language does, duh). Keep that now in mind.
In JavaScript you know you must check the return value, if it is important. In short words, you cannot fool it. If the JavaScript engine says a value is a number, it is with the only exception it may be "NaH", which is simple to check for. Now let's compare it to TypeScript.
TypeScript compiler and all annotations don´t provide this essential type safety, but sure in hell they advertising like it is even it is not the case. This makes people upset. Of course, there is probably some tools that adds it on top of TypeScript, but by default TypeScript do not provide type safety because of this single reason. Maybe type safety equals no type safety.
Now let's take compare it to say Rust or C++. The compiler will enforce a strict memory layout and all CPU instructions will be very specific, so even if the developer want to return anything else but an number, they can´t. It is literally IMPOSSIBLE to return anything but an integer in a C++ program, if the declaration says it should return an integer. Do you see the difference?
Rust/C++ => Real type safety, you can trust the types.
TypeScript => No type safety, but says it has it, but you can return anything really (My example proves it).
JavaScript => No type safety, you can return anything.