In this TypeScript tutorial for beginners, we will be discussing the basics of TypeScript language, its installation, and setup.
Then we will write our first program using typescript and will learn the data types and other features of the language.
In case you are interested in a step by step typescript tutorial then navigate to our tutorial space:
Topics Covered
👨🏫What is TypeScript? – A Quick Intro
TypeScript is an open-source object-oriented programming language developed and maintained by Microsoft. It’s a superset of JavaScript.
TypeScript is designed for the development of large applications and transpiles to JavaScript.
github.com/Microsoft/TypeScript
🤷♀️Why TypeScript?
Before learning or using any programming or scripting language you should always be aware of the need.
Why do we need to learn TypeScript?
As we already know that TypeScript transpiles to JavaScript as browsers can only understand JavaScript.
So you might be thinking that what’s the need of adding an extra layer if the executable code is going to be JavaScript itself?
⭐There are many benefits of using TypeScript, listing down a few of them.
👉 TypeScript integrates well with React, Vue, and Angular.
👉 TypeScript is a statically typed language and this makes the code easier to refactor. Statically typed programming languages are those in which the type of a variable is known at compile-time instead of at run-time.
👉 TypeScript is easier to read and access. Helps in code maintainability.
💡 In my previous project, we were using TypeScript with React and our files were having .tsx extension and not .jsx. Also, the compiler we used to transpile TypeScript code to JavaScript was Babel.
⏩TypeScript vs JavaScript
The difference between TypeScript and JavaScript are mentioned below:
| TypeScript | JavaScript |
|---|---|
| Object-oriented programming language | Object-based scripting language |
| Statically typed | Dynamically typed |
| Has interfaces | No concept of interfaces |
| Can declare variables with data types | variables are declared with the ‘var’ keyword |
| File extension: .tsx or .ts | File extension: .js |
😎TypeScript Tutorial – Installation
There are two ways to install typescript:
- Using npm (Node Package Manager)
- Install the TypeScript plugin in your IDE
✅Install typescript using npm
You must have node.js installed on your machine. If you don’t have it installed, you can install it from here.
Now, to install typescript just head over to the command prompt and type the following command:
> npm install -g typescript
-g stands for the global level. We are installing typescript at the global level on our machine.
You can check the version of TypeScript and verify if it is installed on your machine with the help of the command below:
> tsc -v
✅Install the TypeScript plugin in your IDE
You can also install a typescript plugin available for your IDE. You can use IDE of your choices such as VS Code, Visual Studio, Atom, or Sublime Text.
Sharing the links for plugins for the above-mentioned code editors:
For most of the IDEs, you can install typescript by opening up the package manager and then search for ‘typescript’ and install it boom!! 💣
You can download typescript from the official site:
👉 https://www.typescriptlang.org/#download-links
🎲TypeScript Playground
Suppose you want to try out some TypeScript code without having to worry about installing it on your system. You may use the online playground for that.
💻Your First TypeScript Program
Let’s start with our first program. Open any editor of your choice and type the code given below:
function greeting(input){
return "Hello, " + input;
}
let user = "DotNetCrunch";
console.log(greeting(user));
This will result in displaying “Hello DotNetCrunch” in the browser’s console.
Hello DotNetCrunch✍Declaring a variable in TypeScript
TypeScript follows the same rules as JavaScript for variable declarations. Variables can be declared using: var, let, and const.
Examples:
var x = 10; let user = "DotNetCrunch"; const PI = 3.14;
🧿TypeScript Tutorial – DataTypes
Types can be divided into 3 categories – Any, Built-in, and User-defined.
To assign a type in Typescript, you need a colon: then the name of the type, an equal sign =, and the value of that variable.
For example:
let name: String = "DotNetCrunch";
1. Any
This is the superset for all the data types available. It means that the variable could be of any type. It will override the type checking.
We need to define the type of the variable but at the time of writing the application, we might not be sure about the value. The value might come from dynamic content.
let dynamicValue: any = 4;
In the above example, I have just assigned 4 but the value might come dynamically and it could be a String or boolean instead of a number.
2. Built-in
The Built-in types include string, number, boolean, undefined, null, and void.
String
String in TypeScript is similar to those in JavaScript. They are defined with single or double quotes.
let x: string = "Welcome to DotNetCrunch"; let y: string = 'Learn TypeScript Basics';
Number
The number represents the integer data type. It supports decimal, hexadecimal, octal, and binary literal.
let x: number = 0.789; let y: number = 0xdnet; let z: number = 0b0110;
Boolean
Boolean data type represents true or false similar to that of JavaScript.
let isAdmin: boolean = true; let isError: boolean = false;
Undefined & Null
The undefined value is a primitive value used when a variable has not been assigned a value.
The null value is a primitive value that represents the null, empty, or non-existent reference.
💡 As a best practice, you should always use undefined and not null.
Void
In programming languages like C# or Java, we use void as a return type for the function that doesn’t return anything. It works similarly in TypeScript. It is a subtype of undefined.
💡 The ‘void’ type can have undefined or null as a value whereas ‘never’ cannot have any value.
Never
It indicates that the value will never occur. It is used when you are sure that something is never going to happen.
👉 Read more on never
3. User-defined
The user-defined types include array, enum, interface, class, union, and tuple.
Array
Arrays in TypeScript are similar to those in JavaScript. An array can be declared in two ways: using square brackets or using angle brackets.
Example:
let smiley: string[] = ['🙂','😃','🤣'];
OR
let smiley: Array<string> = ['🙂','😃','🤣'];
Enum
Enum is a way of giving more friendly names to the numeric values. They allow us to declare a set of named constants.
Example:
enum DayOfWeek { Mon, Tue, Wed, Thu, Fri, Sat, Sun }
let d: Day = DayOfWeek.Sat;
Interface
An interface defines how the data is being used. It is a way to define contacts within your code. We can define properties and methods inside an interface. In the TypeScript interface, arrow functions are also supported.
Example:
interface IStudent {
studentId: number;
studentName: string;
getResult: (studentId: number) => number; // arrow function
getBatchName(number): string;
}
Class
TypeScript supports object-oriented programming. So, we can use classes and objects into typescript as we do it in any other object-oriented programming language like C# or Java.
Example:
class Student {
studentId: number;
studentName: string;
constructor(id: number, name: string) {
this.studentId = id;
this.studentName = name;
}
getResult(studentId: number) : number {
// logic to calculate & return result...
}
}
Union
In TypeScript, we can use more than one data type for a variable or a function. This data type is known as the Union.
let iD: string | number; iD = 123; // OK iD = "D007"; // OK iD = true; // Compiler Error
Tuple
A tuple is a data type that holds two sets of values of different data types. In the example given below, we are storing both number and string types of data in the same variable.
Example:
let city: [number, string] = [1, "Mumbai"];
TypeScript Tutorial – Modifiers
There are 3 types of access modifiers in TypeScript: public, private, and protected.
Public
By default, all the members of a class are public in TypeScript.
Private
When any of the class members are declared private, it is only accessible within the class scope.
Protected
The protected members are similar to private access modifiers, except that they are accessible in the derived class.
This is all as far as TypeScript Tutorial for Beginners is concerned.
As a beginner now you are well versed with TypeScript.
TypeScript Tutorial – Further Reading
If you want to learn more about TypeScript then please refer to these resources.
TypeScript Books
You may refer to any of these books in order to learn TypeScript in depth.
  |
  |
  |
  |
  |
TypeScript Courses
Below are a few top-rated courses on TypeScript.
1. Understanding TypeScript – 2021 Edition
2. Typescript: The Complete Developer’s Guide
📢TypeScript For Beginners 2022
Learn all that you need to get started with TypeScript in a short time.
The course will help you learn TypeScript step by step. Sections are broken down into lectures, where each lecture contains several related topics that are packed with easy-to-understand explanations and real-world examples.
The course is designed for beginners and intermediate-level professionals who want to learn TypeScript and use it for building applications.
