TypeScript vs JavaScript

JavaScript is a programming language widely used for building interactive websites and applications.

let name = "Rahul";

console.log(name);

JavaScript can run in browsers and in environments such as Node.js.

TypeScript is a programming language based on JavaScript. It adds a static type system and other features that help developers write and maintain larger applications.

let name: string = "Rahul";

console.log(name);

The main relationship can be represented as:

JavaScript
     ↑
TypeScript adds additional features
     ↑
TypeScript code
     ↓
JavaScript

TypeScript extends JavaScript rather than replacing it.

One of the biggest differences is type checking. TypeScript allows you to explicitly specify the type of a value.

let age: number = 20;

JavaScript does not require this type annotation.

let age = 20;

TypeScript can detect incorrect assignments during development.

let age: number = 20;

age = "Twenty";

The second assignment causes a type error because age is declared as a number.

JavaScript variables do not normally require explicit type declarations.

let value = 100;

value = "Hello";

JavaScript allows the variable to hold a value of a different type.

TypeScript can specify the expected type of a variable.

let value: number = 100;

Now TypeScript expects value to contain a number.

JavaScript files normally use the .js extension.

app.js
script.js

TypeScript files normally use the .ts extension.

app.ts
student.ts

React applications can use JSX with JavaScript. Such files commonly use the .jsx extension.

App.jsx

When JSX is used with TypeScript, the file normally uses the .tsx extension.

App.tsx

JavaScript can generally be executed directly by JavaScript environments. TypeScript needs to be transformed into JavaScript before normal execution.

TypeScript
     ↓
TypeScript Compiler
     ↓
JavaScript
     ↓
Execution

The TypeScript compiler is commonly called tsc. It checks TypeScript code and can generate JavaScript output.

tsc app.ts

This command compiles the TypeScript file.

TypeScript can detect many type-related problems while developing an application.

function add(a: number, b: number): number {
    return a + b;
}

add(10, "20");

TypeScript can identify that the second argument does not match the expected number type.

A JavaScript function can be written without parameter type annotations.

function add(a, b) {
    return a + b;
}

The developer does not explicitly specify the parameter types here.

TypeScript allows parameter and return types to be specified.

function add(
    a: number,
    b: number
): number {
    return a + b;
}

This makes the expected input and output clear.

JavaScript allows objects to be created without explicitly describing their structure.

let student = {
    name: "Amit",
    age: 20
};

TypeScript can describe the expected structure of an object.

let student: {
    name: string;
    age: number;
} = {
    name: "Amit",
    age: 20
};

This helps maintain consistent object structures.

TypeScript provides interfaces for describing the structure of objects.

interface Student {
    name: string;
    age: number;
}

let student: Student = {
    name: "Amit",
    age: 20
};

Interfaces are not a standard JavaScript type-system feature.

TypeScript provides editors with information about the types and structure of the code.

This can improve:

• Autocomplete
• Code suggestions
• Error highlighting
• Navigation
• Refactoring

JavaScript is dynamically typed, which gives developers flexibility when working with values.

let value = 10;

value = "Hello";

The variable can be assigned a different type of value.

TypeScript allows developers to define expected types and detect many incorrect operations during development.

let price: number = 500;

// Type error
price = "Five Hundred";

This can help prevent certain mistakes before the application runs.

JavaScript knowledge makes learning TypeScript easier because TypeScript is based on JavaScript.

You can gradually add TypeScript concepts such as:

• Type annotations
• Interfaces
• Type aliases
• Generics
• Union types

TypeScript can be used with React to provide types for components, props, state, events, and other application data.

interface User {
    name: string;
    age: number;
}

The interface can describe the structure of data used by a component.

TypeScript is also commonly used with React Native applications. It can help describe the types of component properties, navigation parameters, API responses, and application state.

interface User {
    id: number;
    name: string;
}

JavaScript

function greet(name) {
    return "Hello " + name;
}

TypeScript

function greet(name: string): string {
    return "Hello " + name;
}

The TypeScript version explicitly describes the parameter and return type.

JavaScript

let numbers = [10, 20, 30];

TypeScript

let numbers: number[] = [10, 20, 30];

The TypeScript version explicitly states that the array contains numbers.

JavaScript

function multiply(a, b) {
    return a * b;
}

TypeScript

function multiply(
    a: number,
    b: number
): number {
    return a * b;
}

TypeScript makes the expected parameter and return types explicit.

JavaScript is an essential language for web development and is also important for React and React Native development.

TypeScript builds on JavaScript knowledge. Therefore, learning JavaScript first and then learning TypeScript provides a strong foundation.

JavaScript:

let studentName = "Rahul";
let marks = 85;

console.log(studentName);
console.log(marks);

TypeScript:

let studentName: string = "Rahul";
let marks: number = 85;

console.log(studentName);
console.log(marks);

Both examples perform the same basic task, but TypeScript explicitly specifies the data types.

The easiest way to remember the difference is:

JavaScript
= Dynamic typing + JavaScript features

TypeScript
= JavaScript + Static typing + Additional type features