Introduction to TypeScript basics
Typescript is an object-oriented programming language and is also open source. It was created and maintained by Microsoft and comes under the Apache 2 license. Typescript was introduced by a core member of the C# language development team. Typescript is also considered as the superset of Javascript and it compiles the code into plain javascript. This language is used for application scale Javascript development and can be executed on any operating system, browser, or host. For running typescript codes on browser, a compiler is needed to generate a javascript file. Typescript is an ES6 version of Javascript including additional features. This article explains Typescript basics with explanations of different concepts of Typescript. This article would help beginners in understanding the basics of Typescript.
Installation
For using Typescript, first, it should be installed on your local computer. Typescript can be installed with NPM. Typescript can be installed with NPM using the following command.
npm install -g typescript
Typescript would be installed globally using this command which will help you in using it in any project. After installing Typescript, one can start creating a new file using the code editor and make sure that the extension of the file is .ts.
Typescript codes cannot be executed on browsers as it doesn’t understand typescript codes. So, after writing the typescript code, it needs to be changed into javascript. The command written below can be used:
tsc <your_file_name>.ts
The above command would create a Javascript code and translate the original Typescript code into JS automatically.
Strong Typing
Now, we can move forward to deriving variables as string, Boolean, number, array, and other data types. Examples of strong typing are given below:
- let name: string; // This command can be used for creating variables as string data types to store alphabets.
- let isChecked: boolean; // This command can be used for creating variables as Boolean data type; here the output can be true or false.
- let age: number; // This command can be used for creating variables as a number data type to store numerical values.
- let array: number[]; // This command can be used for creating variables that can store an array of numbers.
let data: any; // This command can be used for creating variables with any data type. This data type can be changed to any other data type while writing the program.
Object-Oriented Features
- Class & Interface
One of the most important feature of Typescript is that its follows object-oriented programming. In Typescript, we can define classes and interfaces, For example:
class Course {
Course_Name: String;
Course_Code: number;
duration: number;
Students_ID: number[]
Getcoursedetails() {
// write further codes
}
}
Here, a class Course has been created, and moving further in the code, one can create multiple instances with new keyword.
let Tableau = new Course(); // Here, a new instance of Course class is created.
Once the Course() object is created, there is no need for declaring its type once again. Typescript does it automatically.
- Constructors
If anyone understands object-oriented programming then they would be knowing about constructor(). Each and every class has its default constructor method and can be called by creating an instance of that class.
class Course {
Course_name: String;
Course_Code: number;
constructor(Course_name?: string, Course_Code?: number) {
this.Course_name = Course_name;
this.Course_Code = Course_Code;
}
getcoursedetails() {
// write further codes
}
}
The questions marks used above marks the parameters optional.
- Access Modifiers
Access modifiers are used in object-oriented programming to restrict or permit the access of variables from outside the class. The three major types of access modifiers are as follows:
- Public — Public access modifier is used to permit the access of variables from outside the class.
- Private — Private access modifier restricts the access of variables from outside the class.
- Protected — Protected access modifiers permits the access of variables within the class or to its derived classes.
class Course {
private Course_name: String;
private Course_Code: number;
constructor(Course_name?: string, Course_Code?: number) {
this.Course_name = Course_name;
this.Course_Code = Course_Code;
}
getcoursedetails() {
// write further codes}
}
- Static type-checking
When a code is written, saved, and re-run; we may see some errors and those errors can be dugged easily sometimes but not always. Debugging can take much of the time and can also involve numerous editing and change in code.
Static type checker is a tool that helps in finding the bugs before running the code. The shapes and behaviours of the code and the values it may give can be seen by static types of systems. This way, typescript helps us in telling when we are going off track in our codes.
Types for Tooling
As we learned from the above segment that Typescript can detect bugs even before we run the code. Now, there is more feature which makes Typescript easier to use. Typescript can also prevent the coder from making errors while writing the code. The information is with typescript that the properties which we are accessing for different variables are correct or not. Typescript also starts suggesting particular properties which we can use, once Typescript is informed. This means that Typescript is also very much flexible for editing codes, now the type checker can help us with its error messages and will help in completion of the code while we write the code in the editor. This is called tooling in typescript and is very much useful for writing error-free codes.
Text Editors which can be used for Typescript
Initially, only Microsoft Visual Studio supported Typescript, but now there are various text editors and IDE available which supports Typescript through plugins or natively. Some of the text editors are listed below:
- Webstorm’s latest version
- Vim
- Emacs
- Atom
- Visual Studio Code
- Official plugin for Sublime Text.
Conclusion
On the basis of this article, we understood Typescript and its basic concepts. This article explains each and every concept in detail and with examples. The concepts explained in this article can be used by beginners in starting their journey with Typescript.
Recommended Articles
This is a guide to TypeScript basics. Here we discuss the Definition, Object-Oriented Features, Types for Tooling. You may also have a look at the following articles to learn more –
