Complete TypeScript Tutorial for Beginners
TypeScript is a popular programming language that is widely adopted for developing enterprise-level web applications. TypeScript is a superset of JavaScript and adds additional features to the language that makes the development process easier, more organized and maintainable.
If you are a beginner and want to learn TypeScript from scratch, this tutorial could be an excellent starting point for you.
Introduction to TypeScript
TypeScript is a typed language and provides advanced features such as classes, modules, interfaces, and much more on top of JavaScript.
TypeScript was developed and maintained by Microsoft and is open-source software. The language can be installed and used on Windows, Linux, and Mac operating systems.
One of the significant advantages of TypeScript is that it can be used with any modern browser, including Google Chrome, Mozilla Firefox, Microsoft Edge, and Safari.
Another significant feature of TypeScript is that it transpiles to JavaScript, which allows it to run on any browser and be interpreted by any tool that supports ECMAScript standards.
Setting up Your Environment
First, you need to install Node.js and npm, the package manager for Node.js. Once Node.js and npm are installed in your system, run the following command to install TypeScript globally:
“`bash
npm install -g typescript
“`
After installing TypeScript, you can verify the installation by running the following command:
“`bash
tsc –version
“`
If TypeScript is installed correctly, you should see the TypeScript version number in your terminal window.
Creating Your First TypeScript File
To create your first TypeScript file, create a directory on your system and navigate inside the directory. Create a new file called app.ts and add the following code:
“`typescript
function sayHello(name: string) {
console.log(`Hello ${name}!`);
}
let name = “TypeScript”;
sayHello(name);
“`
This code is a basic TypeScript program that declares a function called sayHello and a variable called name. The function takes a parameter called name of type string and logs a message to the console.
To compile the TypeScript code into JavaScript, open a terminal window and navigate to the directory where the app.ts file is located. Run the following command:
“`bash
tsc app.ts
“`
This command compiles the TypeScript code into JavaScript and creates a new file called app.js. Run the resulting app.js file using Node.js with the following command:
“`bash
node app.js
“`
The output of this program should be:
“`bash
Hello TypeScript!
“`
TypeScript Variables
Variables are used to store data in a program. In TypeScript, variables can be declared using the var, let, and const keywords.
The var keyword is used for declaring global, function, and block-scoped variables. The let keyword is used for declaring block-scoped variables, and the const keyword is used for declaring constants.
Here is an example:
“`typescript
// Global variable
var a = 10;
function f() {
// Function variable
var message = “Hello World”;
// Block-scoped variable
if (true) {
let b = 20;
const c = 30;
}
console.log(message);
console.log(a);
}
f();
“`
In this example, we declare a global variable a, a function variable message, and a block-scoped let variable b and a const variable c.
When we run the program, we see that the messages and the value of the global variable a are logged to the console.
TypeScript Data Types
TypeScript supports several data types, including number, string, boolean, null, undefined, and object.
Here is an example:
“`typescript
// Number
let a: number = 10;
// String
let b: string = “TypeScript”;
// Boolean
let c: boolean = true;
// Null and Undefined
let d: null = null;
let e: undefined = undefined;
// Object
let f: object = {name: “John”, age: 25};
“`
In this example, we declare variables of various data types using TypeScript.
TypeScript Interfaces
Interfaces are used to define contracts in TypeScript. A contract is a set of rules that an object must follow to be considered valid.
Here is an example:
“`typescript
interface Person {
name: string;
age: number;
address?: string;
}
function printPersonInfo(person: Person) {
console.log(`Name: ${person.name}, Age: ${person.age}`);
if (person.address !== undefined) {
console.log(`Address: ${person.address}`);
}
}
let person1: Person = {
name: “John”,
age: 25
};
let person2: Person = {
name: “Mary”,
age: 30,
address: “123 Main St.”
};
printPersonInfo(person1);
printPersonInfo(person2);
“`
In this example, we define an interface called Person that has three properties: name, age, and address. The address property is optional.
We declare a function called printPersonInfo that accepts a parameter of type Person. The function logs the name and age of the person to the console. If the person has an address, it also logs the address.
We declare two person objects, person1 and person2, both of type Person. We pass each object to the printPersonInfo function, which logs the information to the console.
TypeScript Classes
Classes are used to encapsulate functionality in TypeScript. A class is a blueprint for creating objects that have specific properties and methods.
Here is an example:
“`typescript
class Rectangle {
width: number;
height: number;
constructor(width: number, height: number) {
this.width = width;
this.height = height;
}
getArea(): number {
return this.width * this.height;
}
}
let rectangle = new Rectangle(10, 20);
console.log(rectangle.getArea());
“`
In this example, we define a class called Rectangle that has two properties: width and height. We declare a constructor that sets the width and height of the rectangle object.
We declare a method called getArea that returns the area of the rectangle. We instantiate a new rectangle object with the dimensions 10 and 20. We log the area of the rectangle to the console.
TypeScript Functions
Functions in TypeScript are similar to functions in JavaScript, but they can be typed to provide more strictness and maintainability.
Here is an example:
“`typescript
function add(a: number, b: number): number {
return a + b;
}
let result = add(10, 20);
console.log(result);
“`
In this example, we declare a function called add that takes two parameters of type number and returns a number. We call the function with the values 10 and 20 and log the result to the console.
FAQs
Q: What is TypeScript?
A: TypeScript is a typed superset of JavaScript that adds additional features to the language to make it easier to write and maintain enterprise-level applications.
Q: How do I install TypeScript?
A: You can install TypeScript using npm. Run the following command: npm install -g typescript
Q: What are the advantages of using TypeScript?
A: TypeScript provides advanced features such as classes, modules, interfaces, and much more on top of JavaScript. It is typed, which makes it easier to catch issues earlier in the development process. It is maintainable and provides better organization to code.
Q: Can TypeScript be used with any browser?
A: Yes, TypeScript can be used with any modern browser, including Google Chrome, Mozilla Firefox, Microsoft Edge, and Safari.
Q: How do I declare variables in TypeScript?
A: Variables in TypeScript can be declared using the var, let, and const keywords.
Q: What are interfaces in TypeScript?
A: Interfaces are used to define contracts in TypeScript. A contract is a set of rules that an object must follow to be considered valid.
Q: What are classes in TypeScript?
A: Classes are used to encapsulate functionality in TypeScript. A class is a blueprint for creating objects that have specific properties and methods.
Q: How are functions typed in TypeScript?
A: Functions in TypeScript can be typed to provide more strictness and maintainability. Parameters and return types can be specified in the function signature.