In this tutorial, we will focus on sharing the most essential knowledge about TypeScript. We will learn what TypeScript is, how it works, and Types of data to keep in mind when learning TypeScript.
What is TypeScript?
The TypeScript programming language is an open-source project by Microsoft. It is a strict superset of JavaScript and adds optional static type functionality to the language, developed by the father of C#, Anders Hejlsberg.
In the 2012s, he and his colleagues developed TypeScript so that associates could write large projects in Javascript. Overcoming the disadvantages of Javascript such as adding Interface, Type or Class in Javascript code. Turn Javascript from Free-typed to Static Typed during development.
The essence of TypeScript is to compile code written by programmers into Javascript. However, TypeScript will check the input and values of the function just before it is compiled, so a lot of unexpected errors are avoided.
TypeScript uses all the features of ECMAScript 2015 (ES6) such as classes, modules.
How to use Typescript?
Before using Typescript, you need to install them. Two simple ways to install, they are:
- Install Typescript through Node.js package manager (npm)
- Install Typescript with the Visual Studio plugin.
Specifically, open Terminal, type the following command:
npm i -g typescript
And, you can program Typescript and compile them as .ts files and use the following command to translate:
tsc main.ts
When the operations are complete, you just need to open up the Visual Studio code and start playing with TypeScript.
Tutorial
TypeScript Variables
TypeScript adheres to the same way of setting variables as JavaScript. Variables can be declared using the keywords: var, let and const.
The var keyword in Typescript has the same functionality and scope as Javascript.
The let keyword was introduced in the latest version of JS (ES6). In the new version ES6 introduces 2 new keywords, let and const, to overcome the inadequacies in declaring variables with var.
Example of variable declaration with the let keyword:
let devName = "Tiffdoan";
// or
let devName:string = "Tiffdoan";
The let keyword is declared in the same way as var. But unlike the var keyword, when we declare let, its access scope is only within a block of code.
Let variables must be declared before use, and var can be used first and declared later.
Const variables are declared syntactically like let and var. The difference of const is that the value of the const variable is immutable, it is a constant.
In TypeScript we have 3 types of access modifiers: public, private and protected.
When a variable or method is declared public, it can be accessed anywhere.
class devName {
public devCode: number;
devName: string;
}
let dev = new devName();
dev.devCode = 100;
dev.devName = "Tiffdoan";
When a variable or method is declared private, it will be accessible only within that class and not from outside.
class devName {
private devCode: number;
devName: string;
}
let dev = new devName();
dev.devCode = 100; // Compiler Error
dev.devName = "Tiffdoan"; //OK
When a variable or method is declared protected, it will be accessed through parent and child inheritance. Learn more about TS variables in the article below:
- Check the Type of a Variable in TypeScript
- Declare an Empty Array for a typed Variable in TypeScript
- How To Initialize Typed variable to Empty Object In TypeScript
- How To Declare Global Variables In TypeScript
TypeScript Arrays
Array in Typescript is an ordered list of data. It is similar to Array in Javascript. Arrays can contain elements of different data types.
Declare arrays
To declare an array of a specific element, you use the following syntax:
let arrayName: type[];
For example:
let webIT: Array<string>;
webIT = ['LearnShareIT', 'StackOverFlow'];
//Or use push() method:
webIT.push('LearnShareIT');
With the above example, the variable webIT is recognized by Typescript as a string data type.
Once you have defined an array with a specific data type, Typescript will prevent you from adding incompatible values to the array.
To be able to declare an array that can contain multiple data types, do as the following example:
let mynumber: (string | number)[] = ['one', 2, 'three', 5, 4];
Learn more about Arrays in our Array Typescript chapter.
Readonly keyword
In Typescript, readonly is used to make a property read-only. Read-only members can be accessed outside the class, array,.. but their value will not change.
For example:
const mydev: readonly string[] = ["TiffDoan"];
mydev.push("May"); // Error: Property 'push' does not exist on type 'readonly string[]'.
TypeScript Date
The date object in Typescript is where time matters are handled.
To initialize date object in javascript we have 4 ways:
- Initialize the date and time at the current time:
new Date();
- Initialize date and time from time millisecond value:
new Date(milliseconds);
- Initialize date and time from a dateString:
new Date(dateString);
- Initialize date and time from a date string as attribute:
new Date(year, month, day, hours, minutes, seconds, milliseconds)
Specific examples:
let today = new Date();
// Wed Oct 12 2022 03:40:44 GMT+0700 (Indochina Time)
There are four basic formats of a date string: short date, long date, full date and ISO date.
Date in Typescript is like Javascript, it supports us with functions used to manipulate dates, including 2 types: Get date and Set date.
Some commonly used functions are:
- The support function to get common timestamps includes:
Function | Meaning |
getDate() | The function returns the day of the month (from 1 – 31). |
getDay() | returns the day of the week (0-6), where Sunday is 0, Monday is 1, Tuesday is 2,… |
getMonth() | the function returns the month of the year (from 0 – 11), so we need to add 1. |
getFullYear() | returns the full five types of YYYY. |
getHours() | the function returns the number of hours in the form of 24h (from 0 – 23) |
getMinutes() | returns minutes in hours (0 – 59). |
getSeconds() | returns the number of seconds in minutes (0 – 59). |
- The support function creates a timeline, including:
Function | Description |
setDate() | The function helps us to set the date (from 1 – 31). |
setFullYear() | function that helps us to set the full year in YYYY format. |
setYear() | The function helps us to set the last 2 digits of YY. |
setHours() | function helps us to set the number of hours (0 – 23) |
setMonth() | function that helps us to set the month (0 – 11) |
setTime() | The function helps us to set the time that has been converted to milliseconds. |
TypeScript Elements
In this section, we will learn specifically about TypeScript elements when manipulating them with the DOM API. Typescript also supports you to manipulate HTML elements similar to Javascript.
Element is a base class built by objects contained in an HTML/XML document, for example: HTMLElement. You will need to pay attention to two commonly used interfaces, including Element and HTMLElement.
Retrieving document elements is one of the basic operations when using the DOM in programming with TypeScript.
The getElementById() method is one of the basic methods of the DOM, which retrieves specific elements of an HTML document and returns a reference to that element. The element must have an id attribute to be accessed using this method.
<!DOCTYPE html>
<html lang="en">
<head>
<title>LearnShareIT: TypeScript Elements</title>
</head>
<body>
<h1 id="welcome-heading">Welcome to LearnShareIT</h1>
<script src="script.js">
var x = document.getElementById('welcome-heading');
console.log(x);
</script>
</body>
</html>
At runtime, we can understand: using the variable x to contain the h1 element after using, document.getElementById(‘welcome-heading’) to access the element. Finally, use the console.log(x) method to check if the h1 element has been accessed.
When working with elements, you can also manipulate changes to the content, properties, and style of the element. Some specific methods below are applied:
Method | meaning |
element.innerHTML = new html content | Changes the inner content (content inside) of an HTML element |
element.attribute = new value | Change an HTML element’s attribute with new value |
element.setAttribute(attribute, value) | Change an HTML element’s attribute |
element.style.property = new style | Change an HTML element’s style |
TypeScript Files
TypeScript is a superset of JavaScript. So any JavaScript file can be interpreted as a TypeScript file. A TypeScript file has the “.ts” extension, which is different from the Javascript “.js” extension.
To compile to a Typescript file, we use:
tsc <Filename>
Example: To compile the file “devLearnShareIT.ts”, we implement the syntax:
tsc devLearnShareIT.ts
And the output file will be devLearnShareIT.js
You can completely combine multiple Typescript files in one Javascript file. To do this, you will use the extra parameter outFile <OutputJSFileName>, for example: To compile 3 TypeScript files dev1.ts, dev2.ts, dev3.ts into one file “devLearnShareIT.js”, the syntax is:
tsc –outFile devLearnShareIT.js dev1.ts dev2.ts dev3.ts
In addition, you can also automatically generate a file ending in “.ts” on the real-time change of the file through the clock compiler.
TypeScript Maps
In Typescript you can completely use the same map function as Javascript. This is a data structure that allows you to store key-value pairs in the order of input.
Syntax to create a map:
let yourMap = new Map<string, number>();
If you want to add pairs of values to the map, we have:
let yourMap = new Map<string, string>([
["key1", "value1"],
["key2", "value2"]
]);
For example:
let devNameMapping = new Map<string>();
// Add entries
devNameMapping.set("ToanNguyen");
devNameMapping.set("HaiHoa");
In addition, you can also manipulate actions such as deleting, retrieving elements, and adding elements to the map.
Function | Meaning |
map.set(key, value) | Adding key-value pairs to the map |
map.get(key) | Gets a value of a specified key in Map |
map.has(key) | Check if the key is in the map or not. |
map.delete(key) | Delete key-value pairs by specified key |
map.clear() | Delete all elements in the map |
map.values() | Function used to iterate over the specified values in the map. |
map.entries() | Function used to iterate over the specified entries in the map. |
You can refer to more about how to implement the map in the articles below:
- Iterate over a Map in TypeScript
- Define a Map with Array values in TypeScript
- How To Initialize And Type A Map In Typescript
TypeScript Numbers
Numbers in Typescript are represented as floating-point values or large integers. Floating point numbers are of type number while large integers are of type big int.
Declaration syntax:
let price:number;
To initialize the value for price we have:
let price =8.15;
Numbers in Typescript is similar to Javascript Numbers, it also supports numeric characters for decimal, hexadecimal, binary, and octal literals.
TypeScript Objects
Typescript inherits the data types present in Javascript. The data types in Typescript are divided into two types:
- Primitive data types, including: string, number, boolean, null, symbol, undefined, ..
- Object data types, including: functions, arrays, classes…
You can quickly distinguish between primitive and object data types by looking at the value. If the value itself has any properties, it is an object. Otherwise, it is one of eight primitive data types.
For example, you want to declare the object admin with its properties, we have:
let admin: {
devName: string;
career: string;
} = {
devName: 'TiffDoan',
career: 'Programmer'
};
In addition, you also need to pay attention and distinguish ‘object‘ and ‘Object‘ in Typescript. object refers to non-primitive values, while Object describes the functions of objects.
TypeScript Strings
In Typescript, you would use single quotes ‘ or double quotes ” around literal characters to create strings.
For example:
let devName: string = 'TiffDoan';
let career: string = "Programmer";
Alternatively, you can also use the backtick (`). In addition to the same function as above, using this sign you can concatenate multiple strings together, for example:
let devName: string = `TiffDoan`;
let career: string = `Programmer`;
let intro: string = `I'm ${devName}.
I am a ${career}`;
console.log(intro);
Output:
I'm TiffDoan.
I am a Programmer.
You can learn more about TS String in the article Create And Work With TypeScript Strings
Summary
Thus, we have summarized the most necessary and basic knowledge about Typescript for you, especially for those who are just starting to learn about Typescript.
Basically, Typescript is similar to Javascript, so you can be confident that you will quickly grasp this language. To learn more about Typescript you can read articles related to it in LearnShareIT.
Other
- Adding Types to Refs in React using TypeScript
- Omit one optional parameter while providing another in TS
- Define types for process.env in TypeScript
- Extend an Interface excluding a Property in TypeScript
- Override the Type of an Interface property in TypeScript
- Defining and using Key-Value pair in TypeScript
- Disable type checking for node_modules in TypeScript
- Exclude a Property from a Type in TypeScript
- Get the Type of a Function’s Arguments in TypeScript
- Using generics in Arrow functions in TypeScrip
- How to break a forEach() loop in TypeScript
- Understanding ‘as const’ in TypeScript
- Check for undefined in TypeScript
- How to replace all occurrences of a String in Typescript
- How To Get An Enum Key By Value In Typescript
- How To Disable Type Checking For A Line In Typescript
- How To Disable Type Checking For Javascript Files In Typescript
- How To Declare Function With A Readonly Return Type In TypeScript
- How To Disable Type Checking For An Entire File In Typescript
- Declare a function that throws an Error in TypeScript
- How to export a Type in TypeScript
- Return Multiple values from a Function in TypeScript
- Set the return type of a arrow function in TypeScript
- Access an Enum by Index in TypeScript
- How to type an async Function in TypeScript
- Make all properties Optional except one in TypeScript
- How to convert a Value to a Boolean in TypeScript
- Change a readonly property to mutable in TypeScript
- “Define optional Parameters in a Class constructor” in TypeScript
- Create custom Class that extends from Error in TypeScript
- How to set window.location using TypeScript
- Declaring getters/setters in Interfaces in TypeScript
- Pass Object as props to a component in React TypeScript
- Get the return Type of a Function in TypeScript
- How to extend a Type in TypeScript
- How to extend an Interface in TypeScript
- Create React App with TypeScript – Complete Guide
- Get the Parameters type of a Class Constructor
- How to Omit values from an Enum in TypeScript

Full Name: Vu Nguyen
Job: Developer
Name of the university: Aptech
Major: IT
Programming Languages: HTML/CSS/Javascript, PHP/sql/laravel, Python, Java, R