TypeScript Tutorial in Hindi #35 Utility Types Part-1

Utility Types Part-1

In TypeScript, Utility Types are built-in types that help transform or manipulate other types in a convenient way


What is Utility Types ?

  1. Partial
  2. Required
  3. Readonly
  4. Pick


utility-types.js

"use strict";
var CollegeData7 = {
name: 'iit delhi',
location: 'delhi',
// students:1000
};
var APICall = 'success';
APICall = "loading";
var APICall2;
APICall2 = 'error';
var randomData = 20;
var siteRoleOption = 'Admin';
var RoleName = {
Admin: 'Anil',
user: 'sidhu',
guest: 'peter'
};
// APICall="pending"
// let CollegeData3:Partial<CollegeType>={
// name:'iit delhi',
// location:'delhi',
// students:600,
// }
function getCollegeData(data) {
return data;
}
getCollegeData({ name: 'iit bombay', location: 'bombay' });
function getCollegeData2(data) {
return data;
}
getCollegeData2({ name: 'iit bombay', location: 'bombay', students: 30, branch: 3 });
var CollegeData4 = {
name: 'iit delhi',
location: 'delhi',
students: 400,
branch: 5
};
// CollegeData4.name="iit gurgaon"
var CollegeData5 = {
name: 'iit delhi',
location: 'delhi',
};


utility-type.ts

interface CollegeType{
name:string,
location:string,
students:number,
branch:number
}

var CollegeData7:Omit<CollegeType,'students'| 'branch'>={
name:'iit delhi',
location:'delhi',
// students:1000
}
type APIStatus="loading" | 'error' | 'pending' | 'success';

var APICall:Exclude<APIStatus,'pending'>='success';
APICall="loading";
var APICall2:Extract<APIStatus,'error'| 'success'>;
APICall2='error';

type RandomType=string| number | undefined | null | string[];

var randomData:NonNullable<RandomType>=20;

type SiteRole = 'Admin' | 'user' | 'guest'
var siteRoleOption:SiteRole='Admin'
var RoleName:Record<SiteRole,string>={
Admin:'Anil',
user:'sidhu',
guest:'peter'

}
// APICall="pending"
// let CollegeData3:Partial<CollegeType>={
// name:'iit delhi',
// location:'delhi',
// students:600,
// }


function getCollegeData(data:Partial<CollegeType>){
return data
}

getCollegeData({name:'iit bombay',location:'bombay'})


function getCollegeData2(data:Required<CollegeType>){
return data
}

getCollegeData2({name:'iit bombay',location:'bombay',students:30,branch:3})

var CollegeData4:Readonly<CollegeType>={
name:'iit delhi',
location:'delhi',
students:400,
branch:5
}
// CollegeData4.name="iit gurgaon"

var CollegeData5:Pick<CollegeType,'name'|'location'>={
name:'iit delhi',
location:'delhi',
}