TypeScript is a superset of JavaScript that adds optional static typing and other features to the language. It can help you write more reliable and maintainable code, especially for larger projects. In this tutorial, we'll cover the basics of TypeScript and how to get started with it.
Installing TypeScript
The first step is to install TypeScript on your machine. You can do this using npm (Node Package Manager) by running the following command:
npm install -g typescriptThis will install TypeScript globally on your machine.
Creating a TypeScript File
To create a TypeScript file, simply create a new file with a .ts extension. For example, app.ts. In this file, you can write TypeScript code just like you would write JavaScript.
Basic Syntax
Let's start with some basic TypeScript syntax. Here is an example of a variable declaration in TypeScript:
let message: string = "Hello, World!";In this example, we're declaring a variable named message with the type string. We're also assigning it the value "Hello, World!".
TypeScript also supports function declarations:
function greet(name: string): void {
console.log(`Hello, ${name}!`);
}In this example, we're declaring a function named greet that takes a parameter named name with the type string. The function doesn't return anything, so we're using the void type.
Type Annotations
TypeScript allows you to annotate variables and functions with types. This helps catch errors at compile time instead of runtime. Here's an example:
function add(a: number, b: number): number {
return a + b;
}
let result: number = add(1, 2);
console.log(result); // Output: 3In this example, we're declaring a function named add that takes two parameters, a and b, both of which are of type number. The function returns a value of type number. We're also declaring a variable named result with the type number, and assigning it the value of calling the add function with the arguments 1 and 2.
Interfaces
Interfaces in TypeScript allow you to define a contract that a class or object must follow. Here's an example:
interface Person {
name: string;
age: number;
}
function greet(person: Person): void {
console.log(`Hello, ${person.name}! You are ${person.age} years old.`);
}
let john: Person = { name: "John", age: 30 };
greet(john); // Output: Hello, John! You are 30 years old.In this example, we're defining an interface named Person that has two properties, name and age, both of which are of type string and number, respectively. We're then declaring a function named greet that takes a parameter of type Person. We're also declaring a variable named john with the type Person, and assigning it an object that matches the Person interface. We're then calling the greet function with the john object as an argument.
Classes
Classes in TypeScript work similarly to classes in other object-oriented languages. Here's an example:
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
move(distance: number): void {
console.log(`${this.name} moved ${distance} meters.`);
}
}
class Dog extends Animal {
bark(): void {
console.log(`${this.name} barked!`);
}
}
let myDog: Dog = new Dog("Rex");
myDog.move(10); // Output: Rex moved 10 meters.
myDog.bark(); // Output: Rex barked!In this example, we're defining a class named `Animal` that has a property named `name`, and a method named `move` that takes a parameter of type `number`. We're also defining a subclass of `Animal` named `Dog` that has an additional method named `bark`. We're then creating an instance of the `Dog` class named `myDog` with the `name` of "Rex". We're then calling the `move` method with the argument `10`, and the `bark` method.
Conclusion
This is just a brief introduction to the basics of TypeScript. There are many more features and concepts to learn, but understanding these basics is a good starting point. TypeScript can help you write more reliable and maintainable code, especially for larger projects. Happy coding!