Yousra's blog
The Power of TypeScript

The Power of TypeScript

Yousra Kamal's photo
Yousra Kamal
·

4 min read

🔷What is TypeScript?

TypeScript is an open-source programming language developed by Microsoft. It is a strict syntactical superset of JavaScript, which means that any valid JavaScript code is also valid TypeScript code.

🔷Why TypeScript?

JavaScript is a loosely typed language. It can be difficult to understand what types of data are being passed around in JavaScript.

In JavaScript, function parameters and variables don't have any information! So developers need to look at documentation or guess based on the implementation.

TypeScript allows specifying the types of data being passed around within the code and can report errors when the types don't match. Here are some TypeScript features.

  • Static Typing: In JavaScript, variables can change types during runtime, which can lead to unexpected behaviour and bugs that are difficult to trace. TypeScript allows developers to declare types for variables, function parameters, and return values.
function add(a: number, b: number): number {
  return a + b;
}

In this example, the add function takes two parameters of type number and returns a value of type number. TypeScript will catch any attempts to pass non-numeric values or assign the result to a non-numeric variable.

  • Interfaces and Classes: TypeScript introduces concepts like interfaces and classes. This makes it easier to create reusable and well-structured code.
interface User {
  name: string;
  age: number;
}

const newUser: User = {
name: "Sami";
 age: 19;
}

🔷Benefits of TypeScript:

  • Enhanced Code Quality: TypeScript's static typing catches errors at compile-time, reducing the chances of runtime errors. This leads to more stable applications.

  • Improved Developer Experience: Developers using TypeScript enjoy features like auto-completion, intelligent code suggestions, and error checking, resulting in faster development and fewer frustrating debugging sessions.

  • Better Collaboration: TypeScript's type annotations make code more self-explanatory, improving collaboration among team members. It's easier to understand and work with code when you know the expected types of data.

🔷TypeScript types:

Typescript types include the three commonly used primitive types in JavaScript: String. Number. Boolean. others include:

  • Type: any:

any is a type that disables type checking and effectively allows all types to be used.

let something: any = "Hello World!"; 
something = 23;
something = true; 
// no error as it can be "any" type

any can be a useful way to get past errors since it disables type checking, but TypeScript will not be able to provide type safety, and tools which rely on type data, such as auto-completion, will not work.

  • TypeScript Arrays:

TypeScript supports arrays, similar to JavaScript. There are two ways to declare an array:

// 1. Using square brackets. 
let fruits: string[] = ['Apple', 'Orange', 'Banana'];

//2. Using a generic array type, Array<elementType>.
let fruits: Array<string> = ['Apple', 'Orange', 'Banana'];

  • TypeScript Object Types:

TypeScript has a specific syntax for typing objects.

 const car: { type: string, model: string, year: number } = {
  type: "Toyota",
  model: "Corolla",
  year: 2009
};

Object types like this can also be written separately, and even be reused.

  • TypeScript Enums:

Enums or enumerations are a new data type supported in TypeScript. In simple words, enums allow us to declare a set of named constants i.e. a collection of related values that can be numeric or string values.

Numeric Enum:

Numeric enums are number-based enums i.e. they store string values as numbers. By default, enums will initialize the first value to 0 and add 1 to each additional value:

enum PrintMedia {
  Newspaper, //Newspaper = 0
  Newsletter, //Newsletter = 1
  Magazine, //Magazine = 2
  Book //Book = 3
}

String Enum:

String enums are similar to numeric enums, except that the enum values are initialized with string values rather than numeric values.

enum PrintMedia {
    Newspaper = "NEWSPAPER",
    Newsletter = "NEWSLETTER",
    Magazine = "MAGAZINE",
    Book = "BOOK"
}
// Access String Enum 
PrintMedia.Newspaper; //returns NEWSPAPER

🔷Conclusion

TypeScript has revolutionized web development by addressing many of JavaScript's shortcomings. Its static typing, enhanced tooling, and improved developer experience make it a valuable addition to any project, from small applications to large-scale systems.

TypeScriptJavaScript