Exploring the realm of TypeScript

Silas Adegoke
3 min readMay 17, 2024

--

Microsoft created TypeScript, a high-level programming language that is free and open-source and gives JavaScript a more robust type system. It works with front-end frameworks like React, Veu, and Angular. Node.js and TypeScript can also be utilized to create a backend. This illustrates the flexibility of the type system in TypeScript. TypeScript incorporates type checking into JavaScript code by design. This enables you to identify mistakes throughout the development process that would not otherwise be seen until the code is run.Here are a few typical situations where TypeScript raises JavaScript errors.

  1. Type Mismatches: Any value can be assigned to a variable in JavaScript. On the other hand, TypeScript lets you specify the expected type (number, text, object, etc.). Whereas JavaScript would just accept the assignment and might cause unexpected behavior later, TypeScript would produce an error during compilation if a value of the incorrect type was assigned.
let name: string = "John"; // Correct 
name = 30; // TypeScript Error: Type 'number' is not assignable to type 'string'Missing Variable Declarations: Variables can be used in JavaScript even before they are declared. Variables in TypeScript must have their types defined before they may be used. In addition to ensuring clarity regarding the intended use of variables, this helps prevent errors.

2. Missing Variable Declarations: Variables can be used in JavaScript even before they are declared. Variables in TypeScript must have their types defined before they may be used. In addition to ensuring clarity regarding the intended use of variables, this helps prevent errors.

let age = 25; // Works in JavaScript
console.log(age);

// This would cause a TypeScript error:
// let age: number; // Declaration
// console.log(age); // Use before declaration

3. Function Parameter and Return Type Mismatches: Functions in JavaScript are capable of accepting any number and kind of parameters and returning any value. You can specify the expected types for function parameters and return values in TypeScript. This makes the code easier to read and maintain, and TypeScript will identify any inconsistencies as errors.

function greet(name: string): string { // Define parameter and return type
return "Hello, " + name;
}

// This would cause a TypeScript error:
greet(30); // Argument type mismatch

// This would also cause an error:
function add(a: number, b: number) {
return a + " (wrong)"; // Return type mismatch
}

4. Property Access on Incompatible Types: Any object in JavaScript can have its attributes accessed, even if it doesn’t actually have them. When attempting to access a property, TypeScript determines whether the object type contains it. It will throw an error if it doesn’t.

let user: { name: string } = { name: "Alice" };
console.log(user.name); // Correct

// This would cause a TypeScript error:
console.log(user.age); // 'age' property doesn't exist on user type

Some of the Disadvantages of TypeScript includes:

  1. When working with complex scenarios, TypeScript can be exceedingly tough, especially for novice developers.
  2. More lines of code are needed.
  3. To operate well using TypeScript, developers must possess knowledge of the language. Since TypeScript is a superset of JavaScript, JavaScript developers frequently find it easier to grasp TypeScript more quickly.

Most developers prefer working with typeScript because of its static typing and ability to decrease errors that may be created by users or in the production environment , even though it may have some drawbacks. JavaScript is frequently used by clients to cut costs and time.

Advantages of TypeScript includes:

  1. Enhances Cooperation because type annotations increase readability and shorten the time needed for code review, making the code easier to grasp.
  2. TypeScript’s ability to specify and enforce types, which avoids common errors, makes it especially useful for large-scale applications.
  3. It lessens type conflicts, which lowers the quantity of bugs in the production environment.
  4. It also facilitates documentation, which helps developers comprehend and manage the system.
  5. It also adds predictability to an application because all variables and functions operate exactly as defined; for instance, a string variable can only hold strings, and a function that returns numbers can only return numbers, and so on.

--

--