Key feature difference between javascript and typescript

JavaScript and TypeScript are two popular programming languages for web development. They share some similarities but also have some key differences. In this blog post, we will explore the main differences between the two languages and provide example code to illustrate each point. We will also include comments in the code to help explain what each line means.

1. Type System: JavaScript is a dynamically typed language, meaning that data types are determined at runtime. TypeScript, on the other hand, is a statically typed language, meaning that data types are determined at compile-time. This means that TypeScript can catch errors before they occur at runtime. Here’s an example:

javascript

let num = "10"; // declare a variable and assign it a string value
num = num + 5; // concatenate a number to the string
console.log(num); // output: "105"

typescript

let num: number = "10"; // declare a variable and assign it a string value, but specify that it should be a number
num = num + 5; // try to add a number to the string - TypeScript will catch this error
console.log(num); // output: NaN (Not a Number)

In the JavaScript code, the variable num is initially assigned a string value, but then later on, a number is added to it. This will result in a concatenated string instead of a number. In the TypeScript code, the num variable is explicitly defined as a number, preventing this issue from occurring.

2. Tooling: JavaScript relies on third-party libraries to add additional functionality, while TypeScript has its own compiler and type checker, which can catch errors before they become runtime issues. Additionally, TypeScript provides better developer experience due to its ability to provide autocomplete and code analysis features in many integrated development environments (IDEs). Here’s an example:

JavaScript:

const fruits = ["apple", "banana", "orange"]; // declare an array of strings
console.log(fruits.map(fruit => fruit.toUpperCase())); // convert all elements to uppercase and output them

TypeScript

const fruits: string[] = ["apple", "banana", "orange"]; // declare an array of strings and specify that it should only contain strings
console.log(fruits.map(fruit => fruit.toUpperCase())); // convert all elements to uppercase and output them

In the JavaScript code, we have an array of fruits, and we want to convert all the elements to uppercase. We use the map() function to achieve this, but we don’t get any help from the IDE. In the TypeScript code, we define the fruits array as an array of strings, allowing the IDE to provide suggestions and autocomplete for methods like map().

3. Syntax: TypeScript has a stricter syntax than JavaScript, which can help prevent errors and improve code quality. Here’s an example:

JavaScript:

function multiply(a, b) { // define a function with two parameters
  return a * b; // return the product of the two parameters
}
console.log(multiply(2, "3")); // call the function with a number and a string

TypeScript

function multiply(a: number, b: number): number { // define a function with two number parameters and a return type of number
  return a * b; // return the product of the two parameters
}
console.log(multiply(2, "3")); // TypeScript will catch this error because we are trying to pass a string instead of a number

In the JavaScript code, the multiply() function takes two arguments, but we don’t specify their types. This can lead to unexpected behavior, as shown by passing a string as the second argument. In the TypeScript

Conclusion – JavaScript and TypeScript are both valuable languages for web development, but they differ in their type systems, tooling, and syntax. JavaScript is a dynamically typed language that relies on third-party libraries for additional functionality, while TypeScript is a statically typed language with its own compiler and type checker that catches errors before they become runtime issues. TypeScript also provides better developer experience due to its autocomplete and code analysis features. Additionally, TypeScript’s stricter syntax can help prevent errors and improve code quality. By understanding the differences between these two languages, developers can make an informed decision about which language to use for their specific project needs.