[ad_1]
TypeScript Fundamentals in One Place
1. Introduction
Programming language divide into two categories :
Statically typedDynamically typed
in Statically-typed languages (C, Java, C#, … ), the type of variable is set at the compile-time and cannot change later.
in Dynamically-typed languages (PHP, JavaScript, Python, … ), the type of variable is determined at the run-time and can change later.
TypeScript is a programming language build on top of JavaScript ( essentially JavaScript with static typing and some additional features ) , so before we star make sure that you are familiar with this concepts in javascript:
- Variables
- Arrays
- Objects
- Functions
- Arrow Functions
- Destructuring
- …
2. Built-in Types
as we know JavaScript has built-in types like :
- number
- string
- boolean
- array
- object
- undefined
- null
So TypeScript extend this list and introduce some new built-in types such as :
- any
- unknown
- never
- enum
- tuple
1- The Any Type : when you declare a variable and don’t initialize it , the typescript compiler will assume that variable is type of any which means you can assign any type of data into it , here is an example :
let anyType; // let anyType: any
anyType = 12;
console.log(typeof anyType); // output: number
anyType = "Random string";
console.log(typeof anyType); // output: string
Note : To declare variables, functions you just need to follow this syntax :
let numberType: number = 12;
let numberType: string = 12;
function taxe(income: number): number
return income * 0.2;
2- Arrays :
let numbers = [1, 2, 3]; // let numbers: number[] = [1, 2, 3]
let anyTypes = []; // let anyTypes: any[]
anyType[0] = 100;
anyType[0] = "r_string";
let names = ["ahmed", "zineddine"]; // let names: string[] = ["ahmed", "zineddine"]
3- Tuples : A tuple is a typed array with a pre-defined length and types for each index.
let employee: [number, string] = [1, "Steve"];
4- Enums :
// const small = 1;
// const medium = 1;
// const large = 1;
const enum Size
Small = 1,
medium,
large,
let mySize: Size = Size.Small;
console.log(mySize); // output : 1
4- Objects :
/*
let employee:
id:number,
name:string
=
id:1,
name:'zineddine'
*/
let employee =
id: 1,
name: "zineddine",
;
let user:
readonly id: number;
name: string;
pseudo?: string;
retire: (date: Date) => void; // function declaration
=
id: 1,
name: "zineddine",
retire: (date: Date) =>
console.log(date);
,
;
user.id = 10; // Cannot assign to 'id' because it is a read-only property
5- Type Aliases :
type User =
readonly id: number;
name: string;
pseudo?: string;
retire: (date: Date) => void; // function declaration
;
let user: User =
id: 1,
name: "zineddine",
retire: (date: Date) =>
console.log(date);
,
;
6- Union Types :
function kgToLbs(kg: number | string): number
// Narrowing
if (typeof kg === "string")
return parseFloat(kg) * 2.2046;
return kg * 2.2046;
7- Intersection Types :
// make no sense right ?
let weight: number & string;
// let see a realistic example
type draggable =
drag: () => void;
;
type resizable =
resize: () => void;
;
let UIWidget: draggable & resizable;
UIWidget =
drag: () => ,
resize: () => ,
;
8- Literal Types :
// let quantity: 5 | 100;
type Quantity = 50 | 100;
let quantity: Quantity;
quantity = 5; // Type '5' is not assignable to type 'Quantity'
type Metric = "m" | "cm" | "mm";
9- Nullable Types :
function greeting(name: string | null | undefined)
if (name)
return `Hello, $name`;
return "Hello, World";
greeting("John");
greeting(null);
greeting(undefined);
10- Optional Chaining :
type User =
id: number;
birthday?: Date;
;
function getUser(id: number): User | null | undefined
if (id === 1)
return
id,
birthday: new Date("2000-01-01"),
;
return null;
getUser(0); // output null
getUser(1); // output id: 1, birthday: Date
// optional property access operator
getUser(1)?.birthday?.getFullYear(); // output 2000
// optional element access operator
let employees: string[] | null = null;
employees?.[0];
// optional function call operator
let log: any = null;
log?.("hello"); // return undefined
11- Nullish Coalescing Operator :
let speed: number | null = null;
let ride = ;
12- Type Assertions :
let phone = document.getElementById("phone");
phone.value; // Property 'value' does not exist on type 'HTMLElement'
// let email = <HTMLInputElement> document.getElementById('email');
let email = document.getElementById("email") as HTMLInputElement;
email.value;
13- The Unknown Type :
function render(document: any)
// no compile error , but runtime error
document.whatEver();
function render(document: unknown)
/*
compile error, now the compîler forces us to check the type of the argument before using it
*/
document.whatEver();
if (document instanceof String)
document.toLocaleLowerCase();
13- The Never Type :
function reject(message: string): never
throw new Error(message);
function processEvent(): never
while (true)
// ...
processEvent();
/*
=> this code will never be executed , but the compiler don't tell us , so we have to use the `never` type.
=> now the compiler will tell us that the function will never return : Unreachable code detected.
*/
console.log("Hello World!");
That’s it for the first chapter !
Github link : TypeScript-Fundamentals-in-One-Place
[ad_2]
Source link
