Programming

TypeScript

What Is TypeScript?

TypeScript is a programming language that adds types to JavaScript. Microsoft created it. TypeScript code is turned into ordinary JavaScript. The browser and Node.js then run that JavaScript. TypeScript is not a second language that the browser understands on its own.

The main difference is types. You write whether a value is text, a number, or an object. A value that does not fit often shows up before the program runs.

TypeScript sits on top of JavaScript. Valid JavaScript can stay in a TypeScript file. The types add checking and better editor help.

What Is TypeScript Used For?

TypeScript is mainly used where JavaScript is used:

  • Large web applications
  • React, Angular, and Vue projects
  • Server-side code and APIs with Node.js
  • Libraries other people use
  • Code written by more than one person

Plain JavaScript can be enough for a small page. As a project grows, writing types helps catch mismatches earlier.

What Can You Do with TypeScript?

With TypeScript you can do most of the work JavaScript is used for:

  • An interactive web application
  • A server and an API
  • A library with written types
  • Form and data checks
  • A large frontend project

A simple example

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

console.log(greet("Nibras Code"));

This function accepts only text and writes a greeting to the console.

Is TypeScript Difficult to Learn?

If you already know a little JavaScript, moving to TypeScript is easier. Types can look like extra writing at first. The point is not to make the code heavy. It is to show a mismatched value early.

This order is useful at the start:

  1. JavaScript basics: variables, functions, and objects
  2. The string, number, and boolean types
  3. The type a function accepts and returns
  4. Objects and interfaces
  5. A union, which names more than one possible type
  6. A simple array type
  7. The build step that turns TypeScript into JavaScript

Adding types to small files is more useful than trying to memorize the whole language at once.

Advantages and Disadvantages of TypeScript

Advantages

  • Many mistakes show up before the program runs
  • The editor suggests names, fields, and functions more precisely
  • Large projects are easier to follow
  • It can be used together with existing JavaScript
  • It is open source and the language itself has no separate fee

Disadvantages

  • The code is turned into JavaScript before a browser runs it
  • Writing types can feel extra for a very small script
  • Types do not catch every logical mistake
  • Some type definitions are hard for a beginner to read

TypeScript Syntax and Basic Concepts

TypeScript syntax looks like JavaScript. The difference is that a type is written beside a variable or a function.

A typed variable

let name: string = "Ali";
let age: number = 20;

A function

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

The shape of an object

type User = {
    name: string;
    age: number;
};

const user: User = { name: "Ali", age: 20 };

TypeScript Code Examples

A greeting

const name: string = "Nibras Code";
console.log("Hello, " + name);

The sum of two numbers

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

console.log(add(10, 20));

A condition

const age: number = 20;

if (age >= 18) {
    console.log("Adult");
}

Frequently Asked Questions About TypeScript

What is TypeScript?

TypeScript adds types to JavaScript and is then turned into JavaScript.

Are TypeScript and JavaScript the same?

No. TypeScript adds a type layer on top of JavaScript. The browser runs the JavaScript that was produced.

Is TypeScript free?

Yes. TypeScript is open source, and the language itself has no separate fee.

Do I need to learn JavaScript first?

It is not required, but it helps. TypeScript does not replace JavaScript. It is built on it.

Does TypeScript run directly in the browser?

Usually no. It is turned into JavaScript first. That file then runs in the browser or in Node.js.

Does TypeScript catch every mistake?

No. It is good at showing a type mismatch. A wrong condition can still remain in the program.

Can TypeScript be used with React?

Yes. TypeScript is widely used in React projects.