TypeScript Fundamental Comparison Rules

Being a superset of JavaScript, TypeScript expands upon its core principles and syntax while incorporating static typing features. Here are some basic criteria for comparing TypeScript to JavaScript:

• Static Typing
• Type Annotations
• Type Inference
• Compile-time Checking
• Interfaces and Custom Types
• Enum
• Classes
• Module System
• Tooling
• Backward Compatibility

Static Typing:

TypeScript: You may specify the data types for variables, function parameters, and return values thanks to TypeScript’s introduction of static typing. This aids in the compilation-time detection of type-related problems.

let age: number = 60;
let name: string = "Gk";

JavaScript: JavaScript is dynamically typed, thus you don’t need to explicitly specify data types. Runtime type determination might result in runtime errors if handled incorrectly.

let age = 30;
let name = "GK";

Type Annotations:

TypeScript: Letage: number = 30; or function subtract(a: number, b: number): number … are examples of type annotations that can be used to annotate variables, function parameters, and return types.

function subtract(a: number, b: number): number {
return a - b;
}

JavaScript: Variables and function parameters in JavaScript are declared without explicittype declarations because the language lacks built-in type annotations.

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

Type Inference:

TypeScript: If no explicit type annotations are provided, TypeScript can infer the types. If age were set to 30, for instance, it would be obvious that the type was an integer.

let age = 30; // TypeScript infers `age` as `number`

JavaScript: Type inference must be done at runtime because Java Script does not performit.

let age = 30; // Type of `age` is determined at runtime

Compile-time Checking:

TypeScript: Type inference must be done at runtime because JavaScript does not perform it.
JavaScript: Due to type checking performed by JavaScript at runtime, errors may occur and not be discovered until execution.

Interfaces and Custom Types:

TypeScript: Using interfaces or the type keyword, TypeScript lets you define your own types. This makes it possible to develop structured contracts for both data and objects.

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

let example: Example  = {
name: "Gk",
age: 25
};

JavaScript: You must express purpose using object structures, comments, and documentation because JavaScript doesn’t have native support for constructing custom types.

// In JavaScript, you rely on object structures and documentation
let example = {
name: "AV",
age: 25
};

Enum:

TypeScript: Enums are a technique to define a collection of named constant values and are available in TypeScript.

enum ColorGroup {
Red,
Green,
Blue
}

let selectedColor: ColorGroup = ColorGroup.Blue;

JavaScript: Since enums are not natively supported in JavaScript, you often utilize simple objects or constants.

// JavaScript without enums
const ColorGroup = {
Red: 0,
Green: 1,
Blue: 2
};

let selectedColor = ColorGroup.Green;

Classes:

TypeScript: TypeScript supports inheritance and access modifiers like public, private, and protected as well as class-based object-oriented programming.

class PersonInfo {
constructor(public name: string, public age: number) {}

greet() {
return `Hello, my name is ${this.name} and I'm ${this.age} years old.`;
}
}

let personInfo = new PersonInfo("Bob", 30);
console.log(personInfo.greet());

JavaScript: Although classes are supported in JavaScript as well (ECMAScript 2015), they are less feature-rich than TypeScript.

// JavaScript class
class PersonInfo {
constructor(name, age) {
this.name = name;
this.age = age;
}

greet() {
return `Hello, my name is ${this.name} and I'm ${this.age} years old.`;
}
}

let personInfo = new PersonInfo("Bob", 30);
console.log(personInfo.greet());

Module System:

TypeScript: TypeScript has built-in support for module declaration and resolution and is compatible with current module systems like CommonJS, ES6 modules, and AMD.
JavaScript: Modules are supported by JavaScript as well, although the implementation is dependent on the environment (such as Node.js or the browser) and might call for additional tooling.

Tooling:

TypeScript: The TypeScript compiler (tsc) converts TypeScript code into JavaScript. Rich static analysis and code intelligence are provided, and it interfaces effectively with well-known code editors like Visual Studio Code.
JavaScript: JavaScript relies on runtime error handling and debugging and is directly executed by browsers or Node.js.

Backward Compatibility:

TypeScript: To ensure compatibility with vintage browsers and settings, TypeScript code can be transpiled into earlier JavaScript versions.
JavaScript: The base is JavaScript, and without transpilation or polyfills, newer language capabilities might not be accessible in legacy contexts.

You can also discover a lot about Javascript by exploring different topics.

Note: We welcome your feedback at Easy Coding School. Please don’t hesitate to share your suggestions or any issues you might have with the article!