Get Started with TypeScript: A Beginner's Guide with Code Samples

author

Aneh Thakur

. 3 min read

Follow

TypeScript is a programming language that is a superset of JavaScript. It is a typed, object-oriented language that is compiled into plain JavaScript, making it easy to use with any web application.

Here are some key points to understand about TypeScript:

  • Types: TypeScript introduces a type system to JavaScript, which allows you to specify the types of variables, function arguments, and return values. This can help catch mistakes at compile time, and also provide better code completion and type checking in your editor.
  • Classes: TypeScript supports classes, which are a way to define objects with properties and methods. Classes can also have inheritance, which allows one class to inherit from another and extend its functionality.
  • Interfaces: Interfaces are a way to define a contract for an object, specifying what properties and methods it should have. This can be useful for creating reusable code, and for enforcing a certain structure in your codebase.
  • Modules: TypeScript supports modules, which allow you to organize your code into reusable units. This can be useful for creating more maintainable and scalable applications.
  • Decorators: TypeScript introduces decorators, which are a way to annotate and modify classes, properties, and methods at runtime. This can be useful for adding functionality to your code in a declarative way.
  • Compilation: TypeScript code is compiled into plain JavaScript, which means that it can run in any modern web browser. The TypeScript compiler can also produce source maps, which allow you to debug your TypeScript code directly, even if it has been compiled into JavaScript.

Overall, TypeScript is a powerful tool for building large, scalable applications. It can help you catch mistakes early on, and provide better code completion and type-checking in your editor. It also has a number of other features, such as classes, interfaces, modules, and decorators, that can make it easier to write and maintain your code.

Here is an example of how you might use some of the features of TypeScript in a small program:

// Declare a class with a property and a method
class Person {
  name: string;

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

  greet(): string {
    return "Hello, my name is " + this.name;
  }
}

// Create an instance of the class and call the method
const person = new Person("John");
console.log(person.greet());  // Output: "Hello, my name is John"

// Declare an interface for a shape with a property and a method
interface Shape {
  sides: number;
  area(): number;
}

// Declare a class that implements the interface
class Square implements Shape {
  sides: number;
  length: number;

  constructor(length: number) {
    this.sides = 4;
    this.length = length;
  }

  area(): number {
    return this.length * this.length;
  }
}

// Create an instance of the class and call the method
const square = new Square(4);
console.log(square.area());  // Output: 16

// Declare a function that takes a string and returns a string
function greet(name: string): string {
  return "Hello, " + name;
}

// Call the function and log the result
console.log(greet("John"));  // Output: "Hello, John"

// This will cause an error, because the function is expecting a string
console.log(greet(42));

In this example, we have declared a class Person with a property name and a method greet. We have also declared an interface Shape with a property sides and a method area, and a class Square that implements this interface. Finally, we have declared a function greet that takes a string and returns a string.

We can create an instance of the Person class and call its greet method and we can create an instance of the Square class and call its area method. We can also call the greet function with a string argument, but if we try to call it with a non-string argument, TypeScript will give us an error.

What is any in typescript?

In TypeScript, the any type is a type that can be used to represent any value. It is a way to opt out of type checking for a value so that you can assign any value to a variable without getting a type error.

Here is an example of how you might use the any type in TypeScript:

let x: any;

x = 1;  // x is now a number
console.log(x);  // Output: 1

x = "hello";  // x is now a string
console.log(x);  // Output: "hello"

x = true;  // x is now a boolean
console.log(x);  // Output: true

In this example, we have declared a variable x with the type any. This means that we can assign any value x without getting a type error. We can assign a number, a string, and a boolean to x, and it will accept them all without complaint.

Using the any type can be useful in some cases, such as when you are working with third-party libraries that do not have type definitions, or when you are working with dynamic data that you do not want to explicitly type. However, it is generally a good idea to avoid using any it whenever possible, as it can make it harder to catch mistakes in your code and can reduce the benefits of using a type system.



More Stories from Trinitytuts Tech

Monetize react native app with Google Admob

Aneh Thakur.2 min read
Monetize react native app with Google Admob

Deploying React & Node.js App using GitHub Actions CI/CD

Aneh Thakur.5 min read
Deploying React & Node.js App using GitHub Actions CI/CD

What is DevOps?

Aneh Thakur.1 min read
What is DevOps?

Different between find(), filter() and map() in javascript

Aneh Thakur.2 min read

All about MongoDB

Aneh Thakur.3 min read
All about MongoDB