DEV Community

Cover image for What is TypeScript? 
Deepak Kumar
Deepak Kumar

Posted on • Originally published at dipakkr.co

2 1

What is TypeScript? 

TypeScript is a superset of JavaScript that facilitates writing robust applications by giving you type-safety and features such as modules, classes, and interfaces. Any valid javascript code will run as expected in Typescript.

It is highly recommended for building large and complex programs, as it reduces an entire class of bugs and refactoring mistakes. 

Typescript gives static type check ability which means it can detect and throw errors at compile-time instead of runtime. With the new type-check/safety features, it is easier to enhance code quality and reduce bugs in production. 

When Typescript code compiles, you can eliminate a lot of bugs. It like a suite of unit tests that run the moment you write code, and they catch the bugs even before you even run the tests. 

ShortComings of Javascript

1. Javascript allows accessing properties that are not present. 

In the code snippet below, despite having an error in obj properties(num22) it won't show any error in Native javascript while in TS it does.

 

const obj = { num1: 10, num2: 15 };
const multiply = obj.num1 * obj.num22 ;
Enter fullscreen mode Exit fullscreen mode

Alt Text

2. Static Type Checking

In .ts file, variable assigned once can't be re-initialized with another data type, thus it shows an error while in Native javascript, it works fine. 

TypeScript Vs Javascript

Features of TypeScript

We have already seen the two use cases of a static type language that how it can help in detecting removing potential bugs. 

1. Static Typing 

Detecting errors in code without running it is referred to as static checking.

Determining what's an error and what's not based on the kinds of values being operated on is known as static type checking.

function sum(a:number, b:number):number{
     return a+b;
}
sum(3, 5);
Enter fullscreen mode Exit fullscreen mode

2. Classes and Interfaces
Just like Classes, Interfaces can extend each other. This allows you to copy the members of one interface into another, which gives you more flexibility in how you separate your interfaces into reusable components.

interface Employee{
   firstName : string, 
   lastName : string, 
   employeeID : number
}
const p1 : Employee = {
    firstName : 'Bob',
    lastName :  'Dale',
    employeeID : 395
}
Enter fullscreen mode Exit fullscreen mode

3. Modules
Modules in TS are used just like Javascript. It can contain both code and declarations.

4. Compiles to JavaScript

TypeScript →  ES6 → Babel → ES5 
Enter fullscreen mode Exit fullscreen mode

Typescript compiles down to Native Javascript. So, all your javascript will be valid in TypeScript.  

To see how to run a Typescript file, click this LINK

tsc index.ts
// This will generate a `index.js` file
Enter fullscreen mode Exit fullscreen mode

Alt Text

Types in TypeScript

  • undefined, number, string, boolean, object, function, symbol

  • No int, double, or other non-native JS types. 
    Classes are standard JS prototypal classes. 

Additional Pointers

  • Typescript doesn't ship with a runtime. 

  • ES6 syntax is handled, but ES6 operations are not. 

That's all for today folks. 

NEXT POST → How to Setup and Run Typescript in NodeJS? 

Subscribe to my Newsletter

Liked what you read? Let's connect on Twitter

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay