Guide to learn TypeScript from scratch in a short time.
TypeScript is a superset of JavaScript that extends the language by adding types and other functionalities.
TypeScript features
- Created by Microsoft
- Released in 2012
- Supports JavaScript libraries
- Object oriented
- File extension .ts
- Developed to increase quality and has a better architecture in web applications using JavaScript
TypeScript helps us to,
- Create 'guardrails' for possible wrong changes in the code
- Detect issues easier
- Prevent issues related to type and format
- Have a better structure in the code
- Have code guidelines in our projects
You can start using TypeScript in the browser: https://www.typescriptlang.org/play
Requirements for this guide,
- Operating system: Windows, Linux, macOS
- Node.JS 16.x >
- Code editor (VS Code, Sublime)
Project from scratch
To run typescript for the first time with no projects created, you can create a .ts file with a sample code and run the following command to convert this TypeScript file to JavaScript.
npx --package typescript tsc --outDir dist [FileName].ts
To create your own project from scratch, first, navigate to an empty folder and create a file with the extension .ts and then execute the following commands:
npm init -y
npm install typescript --save-dev
Edit the package.json file and a script section for tsc:
"scripts": {
"tsc": "tsc",
"test": "echo \"Error: no test specified\" && exit 1"
},
Then, you need to run the following command to create the .tsconfig.json file
run tsc -- --init
This file has a configuration by default, but you can change it according to your needs. For more information, you can go to:
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
Finally, Execute the following command to compile your TypeScript files and execute the final JavaScript code:
npm install
npm run tsc
node FileName.js
Execute examples one by one
To learn executing example you can go to: https://github.com/Mteheran/TypeScriptGuide and execute the following commands
npm install
npm run tsc
node FileName.js
You can follow the guide from the first file, read the comments to understand the context and execute npm run tsc to generate the JavaScript file and see the changes using node [FileName].js
Now that you know the general concepts related to TypeScript let's start to learn step by step all the features.
1. Variables
We use colon ":" to assign a type to a variable.
let number1: number;
let total: number;
Typescript can infer the type depending on the value set.
In this case, you don't need to specify the type and for this example it will be a number.
let percentage = 100;
You can create constants setting the value after assigning the type
const messageResult: string = "The current percentage is:";
You cannot assign a new value to a constant. The following line will show an error:
const messageResult: string = "The current percentage is:";
messageResult = "";
If you try to set a string value to number1 you will get an error and this is a benefit of using TypeScript
let number1: number;
number1 = "This message";
TypeScript supports boolean type. This value can be true or false
let IsADeveloper: boolean;
IsADeveloper = true;
console.log(`"Is the user a developer? " ${IsADeveloper}`);
A variable can have multiple types. This concept is called Union in TypeScript. Use the pipe character to define multiple types:
let chapterName : string | number;
chapterName = "Number 1";
chapterName = 1;
2. Additional Types
undefined when the variable will not have a value
let emptyVariable : undefined;
A null type for empty values. This is useful when you want to use a variable with a specific type that also can be null.
let nullVariable: null;
let description: string | null;
Using any you can assign any type of value to the variable
let genericValue: any;
genericValue = 10;
genericValue = "Ten";
Use void with a function that doesn't return a value or return undefined
function noReturnsValue() : void{
console.log("This functions doesn't return a value");
}
User never when you that the function never returns a value
function errorFunction(errorMsg: string): never {
throw new Error(errorMsg);
}
//call error function here
errorFunction("messsage");
3. Arrays
You can create arrays for a specific type
let listOfNumber : number[];
listOfNumber = [0, 1, 5, 8, 10];
You can declare the array using generics (another syntax).
let listOfNumberGeneric : Array<number> = [0, 1, 5, 8, 10];
let sumOfNumbers = listOfNumber.reduce((p,value)=> p+value);
console.log(`The sum is: ${sumOfNumbers}`);
You can create an array using 'any' to support multiples types;
let listOfItems : any[];
listOfItems = [0, true, 'Name', 8, 'A text value'];
4. Enums
You can create an enumeration to use a type that contains some specific values. Create an enumeration as a constant is a good practice
const enum dayOfWeek{
Monday,
Tuesday,
Wednesday,
Thursday,
Friday,
Saturday,
Sunday
}
Using enumeration as a type makes the code easier to understand.
let currentDayOfWeek : dayOfWeek;
currentDayOfWeek = dayOfWeek.Saturday;
console.log(`The current day is: ${currentDayOfWeek} `);
Enums are very useful to validate a value in conditions. You can easily identify what the value means:
if(currentDayOfWeek === dayOfWeek.Saturday || currentDayOfWeek == dayOfWeek.Sunday){
console.log(`it's weekend!!!!`);
}
5. Tuples
You can declare a new variable composed for 2 or more values (this is a tuple).
const fullName : [string, string] = ["Miguel", "Teheran"];
You can use different types in a tuple.
//product name, cost and quantity example:
const product : [string, number, number] = ["Tomato", 1, 50];
You can create an array of tuples
var employee: [number, string][];
employee = [[1, "Steve"], [2, "Bill"], [3, "Jeff"]];
You can access properties in the tuple using the position
const fullName : [string, string] = ["Miguel", "Teheran"];
console.log(fullName[0]); //prints Miguel
console.log(fullName[1]); //prints Teheran
6. Functions
You can specify the type of a parameter in a function
function printDoubleNumber(number: number) : void{
console.log(number * 1);
}
You can use it with a function as an expression
const printDoubleNumberExpression = function printDoubleNumber(number: number) : void{
console.log(number * 1);
}
You can also use arrow function
const printDoubleNumberArrow = (number: number) : void =>{
console.log(number * 1);
}
You can define a specific type to return in a function
const plusNumbers = (number1: number, number2: number) : number =>{
return number1 + number2;
}
TypeScript supports optional parameter using question mark
const concactStrings = (title: string, name?: string) =>{
console.log(`${title} ${name}`);
}
You can specify a default value for a parameter by setting the value in the definition
const calculateTax = (productPrice: number, taxPercentage: number = 0.16): number =>{
return productPrice * taxPercentage;
}
Using rest parameter to receive more parameters with a default type
const setConfiguration = (IsActivated:boolean, ...options: Array<string>): void =>{
console.log(`Configuration is activated ${IsActivated}`)
}
7. Types
In TypeScript you can create types by adding properties names and types. Type is a complex type composed of multiple properties. Using the question mark you set undefined as a possible (this means optional value)
type Person =
{
id: number,
name: string,
lastName: string,
phone?: string, //with the question mark you set undefined as a possible value
}
var newPerson : Person = {id : 1, name: "Miguel", lastName: "Mendez"} ;
newPerson.lastName = "Teheran";
console.log(`I am ${newPerson.name} ${newPerson.lastName}`);
When you are using a type in a function, you can use destructuring to get the value for specific properties:
const printFullName = ({name, lastName}: Person) =>{
console.log(`My fullname is ${name} ${lastName}`);
}
printFullName(newPerson);
8. Classes
A class is a template with code used to create instances with specific data. A class can contain functions, properties, a constructor and data.
class SmarPhone {
color: string
brand: SmartPhoneBrand
price:number
constructor() {
//default values using constructor
this.color = "white";
this.brand = SmartPhoneBrand.Other;
this.price = 0;
}
//you can initialize and create the properties directly in the constructor
//constructor(public color: string, public brand: SmartPhoneBrand, public price: number) {
// this.color = "white";
// this.brand = SmartPhoneBrand.Other;
// this.price = 0;
//}
setPrice(smartPhonePrice: number) : void
{
this.price = smartPhonePrice;
}
}
//example of a enumeration used in the class
const enum SmartPhoneBrand {
Apple,
Xiaomi,
Sansumg,
Motorola,
Other
}
var mySmartPhone = new SmarPhone();
mySmartPhone.brand = SmartPhoneBrand.Apple;
console.log(`my cellphone is ${mySmartPhone.brand} ${mySmartPhone.color}
nad the price is ${mySmartPhone.price}`);
You can extend from a class or abstract class. An abstract class cannot be implemented.
abstract class Card {
//creating and initializing the properties using the constructor
constructor(public cardNumber: number, public owner: string) {}
}
//you need to use super to pass the parameters to the parent class
class CreditCard extends Card {
constructor(public balance: number, cardNumber: number, owner: string) {
super(cardNumber, owner);
}
}
var masterCard = new CreditCard(1000, 11225533645, "Jhon Doe");
9. Generics
Using generics you can use the same function for 2 or more types
function WhatIsThisType<T>(value: T): string {
return typeof(value);
}
//when you call the function you can specify the type that you want to use
console.log(WhatIsThisType<number>(100));
console.log(WhatIsThisType<boolean>(true));
console.log(WhatIsThisType<string>("string value"));
You can use interfaces in conjunction with generics:
interface collectionList<T> {
id: number,
name: string,
description: string,
items: T[] | undefined | null
}
When you use the previous interface, you can specify the type for the collections and items property
var newCollection : collectionList<number> = {
id: 1,
name: "New collection",
description: "This is a new collection",
items: [10, 20, 30]
}
You can also extend using generics to include a specific property by default in the type
interface HasId
{
id:number;
}
class Item implements HasId {
constructor(public id:number) {}
}
class GenericModel<T extends HasId> {
items: T[] | undefined
constructor(public name:string) {}
getItembyId(id:number) {
return this.items?.find(p=> p.id === id);
}
}
When you want to set only some values of the generic class you can use Partial
const simpleCollection = {
name: 'This is a partial collection',
items: ["Item1", "Item2"]
}
const partialCollection: Partial<collectionList<string>> = simpleCollection;
10. Interfaces
An interface defines the "shape" of data. It contains the general definition and the structure of a complex type. It defines types of data to pass between components in the application. Interface is a shared contract in the code
interface User
{
id: number,
name: string,
lastName: string,
password: string
rol: Rol
email?: string, // optional parameter using question mark
resetPassWord(password: string): boolean //you can properties but also functions to an interface (without implementation)
}
interface Rol
{
id: number,
rolName: string,
levelPermission: number
}
You can use interfaces to create objects that will follow the format including functions and properties:
let newRol : Rol = {
id: 1,
rolName: "Admin",
levelPermission: 0
}
let newUser : User = {
id: 1,
name: "Miguel",
lastName: "Teheran",
password: "****",
rol: newRol,
resetPassWord: function (password: string): boolean {
this.password = password;
return true;
}
}
Interface vs Type
- Interfaces represent the object data structure
- Type is an alias to represent primitive types and objects like data structure
- Both are fine, but interfaces are more common and more strict
Type could have a primitive value interface not,
type Person = string |{
id: number,
name: string,
lastName: string,
phone?: string, //with the question mark you set undefined as a possible value
}
You have learned all the general features in TypeScript, now you are ready to start a project with TypeScript and learn advanced topics.