Language

Typescript Introduction

Introduction

TypeScript is a typed superset of JavaScript that adds static typing to the language. This means that the types of variables and expressions are known at compile time, which can help to prevent errors and improve code readability.

TypeScript is a popular language for front-end development, and it is also becoming increasingly popular for back-end development. It is supported by a wide range of tools and frameworks, and it has a large and active community.

Here are some of the key features of TypeScript:

  • Static typing: TypeScript adds static typing to JavaScript, which means that the types of variables and expressions are known at compile time. This can help to prevent errors and improve code readability.
  • Classes: TypeScript supports classes, which are a way to organize code into reusable blocks. Classes can have properties, methods, and constructors.
  • Interfaces: TypeScript supports interfaces, which are a way to define the contract for a class or object. Interfaces can be used to ensure that objects meet certain requirements.
  • Modules: TypeScript supports modules, which are a way to organize code into separate files. Modules can be imported into other modules, which makes it easy to reuse code.
  • Generics: TypeScript supports generics, which are a way to create functions and classes that can work with different types of data. Generics can be used to make code more reusable and flexible.

Grammar

Here is a more detailed introduction to TypeScript’s grammar, with examples:

  • Variables: Variables in TypeScript must be declared with a type. The type can be a primitive type, such as number, string, or boolean, or it can be a class type.
let x: number = 10;
let y: string = "Hello, world!";
let z: boolean = true;
  • Expressions: Expressions in TypeScript are evaluated to a value. The value can be a primitive value, such as a number or a string, or it can be an object.
const sum = x + y;
const message = "The sum is " + sum;
  • Statements: Statements are instructions that are executed by the TypeScript compiler. Statements can be expressions, declarations, or control flow statements.
let x = 10;
if (x > 0) {
  console.log("x is positive");
} else {
  console.log("x is negative");
}
  • Functions: Functions in TypeScript are blocks of code that can be reused. Functions can be declared with a parameter list and a return type.
function add(x: number, y: number): number {
  return x + y;
}
  • Classes: Classes in TypeScript are a way to organize code into reusable blocks. Classes can have properties, methods, and constructors.
class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log("Hello, my name is " + this.name);
  }
}
  • Interfaces: Interfaces in TypeScript are a way to define the contract for a class or object. Interfaces can be used to ensure that objects meet certain requirements.
interface Person {
  name: string;
  age: number;
}

class Customer implements Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}
  • Modules: Modules in TypeScript are a way to organize code into separate files. Modules can be imported into other modules, which makes it easy to reuse code.
// file1.ts
export function add(x: number, y: number): number {
  return x + y;
}

// file2.ts
import { add } from "./file1";

console.log(add(10, 20)); // 30
  • Generics: Generics in TypeScript are a way to create functions and classes that can work with different types of data. Generics can be used to make code more reusable and flexible.
function identity<T>(x: T): T {
  return x;
}

const result = identity<number>(10); // 10
const message = identity<string>("Hello, world!"); // "Hello, world!"

These are just a few of the key features of TypeScript’s grammar.

Compare

Here is a comparison of TypeScript and JavaScript, including grammar:

Feature TypeScript JavaScript
Static typing Yes No
Classes Yes Yes
Interfaces Yes No
Modules Yes No
Generics Yes No
Type inference Yes No
Null safety Yes No

TypeScript is a superset of JavaScript, which means that it supports all of the features of JavaScript and adds additional features, such as static typing, classes, interfaces, modules, generics, and type inference.

Here is a table that compares the grammar of TypeScript and JavaScript for some of the key features:

Feature TypeScript JavaScript
Variables let x: number = 10; var x = 10;
Expressions const sum = x + y; const sum = x + y;
Statements if (x > 0) { console.log("x is positive"); } if (x > 0) console.log("x is positive");
Functions function add(x: number, y: number): number { return x + y; } function add(x, y) { return x + y; }
Classes class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } sayHello() { console.log("Hello, my name is " + this.name); } } function Person(name, age) { this.name = name; this.age = age; } Person.prototype.sayHello = function() { console.log("Hello, my name is " + this.name); };
Interfaces interface Person { name: string; age: number; } No equivalent
Modules export function add(x: number, y: number): number { return x + y; } No equivalent
Generics function identity<T>(x: T): T { return x; } No equivalent

Summary

TypeScript is a powerful language that can be used to create high-quality code. It is a good choice for both front-end and back-end development, and it is supported by a wide range of tools and frameworks.

If you are interested in learning more about TypeScript, there are many resources available online. Here are a few: