Updated April 10, 2023
Introduction to TypeScript pick
TypeScript is a language which works on JavaScript with additional optional static types. Codes written in TypeScript get type-checked for avoiding mistakes including typos and coercions and eventually also gets corrected by TypeScript compiler. The codes get transformed by the compiler so that the code works using old browsers as well which provides clean and readable JavaScript which are able to run in most of the browsers and Node.js. TypeScript also provides pick method to pick certain features of an existing model to create a new model.
Syntax:
The below syntax shows that how one can use pick in TypeScript. Here, we have used 2 parameters. EDUCBA is the first parameters from where we want to pick elements or properties from and “course” , “courseprice” , “course1” , “courseprice1” , “course2” , “courseprice2” , “course3” , “courseprice3”, “course4” and “courseprice4” are the multiple elements or multiple properties we want to select. To select multiple elements to be picked, always use pipe (|) symbol to separate them.
type Output1 = Pick< EDUCBA, "course" | "courseprice" | "course1" | "courseprice1" | "course2" | "courseprice2" | "course3" | "courseprice3"| "course4" | "courseprice4" >;Working of pick in TypeScript with Examples
In TypeScript, pick is used to take the certain objects of an already defined interface to create a new model.
Pick is used a bit differently from the other utilities of TypeScript. Pick<M, N | O> takes two parameters in which M is the type for picking the elements from and N and O are the properties or elements which are required to be selected. Multiple fields can also be picked by separating them using the pipe (|) symbol.
Example #1
Code:
interface EDUCBA
{
course: string;
courseprice: number;
Proceed: boolean;
course1: string;
courseprice1: number;
Proceed1: boolean;
course2: string;
courseprice2: number;
Proceed2: boolean;
course3: string;
courseprice3: number;
Proceed3: boolean;
course4: string;
courseprice4: number;
Proceed4: boolean;
}
function showType(args: Pick< EDUCBA, "course" | "courseprice" | "course1" | "courseprice1" | "course2" | "courseprice2" | "course3" | "courseprice3"| "course4" | "courseprice4" >)
{
console.log(args)
}
showType (
{
course: "Finance",
courseprice: 26500,
course1: "Excel",
courseprice1: 25500,
course2: "React Native",
courseprice2: 24500,
course3: "React",
courseprice3: 23500,
course4: "Type Script",
courseprice4: 22500,
})Output:
Example #2
Code:
interface Enrolled
{
PersonName: string
CourseName: string
EnrollmentID: number
PricePaid: number
PersonName1: string
CourseName1: string
EnrollmentID1: number
PricePaid1: number
PersonName2: string
CourseName2: string
EnrollmentID2: number
PricePaid2: number
PersonName3: string
CourseName3: string
EnrollmentID3: number
PricePaid3: number
}
function showType(args: Pick<Enrolled, "PersonName" | "CourseName" | "EnrollmentID" | "PersonName1" | "CourseName1" | "EnrollmentID1" | "PersonName2" | "CourseName2" | "EnrollmentID2" | "PersonName3" | "CourseName3" | "EnrollmentID3" | "PricePaid" | "PricePaid1" | "PricePaid2" | "PricePaid3">) {
console.log(args)
}
showType(
{ PersonName: "Rahul Dubey"
, CourseName: "Finance"
, EnrollmentID: 220987
, PricePaid: 25000
, PersonName1: "Anish Singh"
, CourseName1: "Machine Learning"
, EnrollmentID1: 231780
, PricePaid1: 24000
, PersonName2: "Aadam Singh"
, CourseName2: "Economics"
, EnrollmentID2: 282213
, PricePaid2: 23000
, PersonName3: "Radhey Shyam"
, CourseName3: "Market Research"
, EnrollmentID3: 214002
, PricePaid3: 22000
}
)Output:
Example #3
Code:
interface Individual{
Naam: string;
MarksScored: number;
ExamName: string;
Naam1: string;
MarksScored1: number;
ExamName1: string;
Naam2: string;
MarksScored2: number;
ExamName2: string;
};
function showType(args: Pick<Individual, "Naam" | "MarksScored" | "Naam1" | "MarksScored1" | "Naam2" | "MarksScored2">)
{
console.log(args)
}
showType({
Naam: "Rahul",
MarksScored: 220,
Naam1: "Rohit",
MarksScored1: 240,
Naam2: "Ramit",
MarksScored2: 230
})Output:
Example #4
Below we have pick different elements from the information and displayed them using showtype.
Code:
interface Information
{
SocialSecuritynumber: number
PersonName: string
CriminalCase: boolean
SocialSecuritynumber1: number
PersonName1: string
CriminalCase1: boolean
SocialSecuritynumber2: number
PersonName2: string
CriminalCase2: boolean
SocialSecuritynumber3: number
PersonName3: string
CriminalCase3: boolean
SocialSecuritynumber4: number
PersonName4: string
CriminalCase4: boolean
}
function showType(args: Pick<Information, "SocialSecuritynumber" | "SocialSecuritynumber1" | "SocialSecuritynumber2" | "SocialSecuritynumber3" | "SocialSecuritynumber4" | "PersonName" | "PersonName1" | "PersonName2"| "PersonName3" | "PersonName4" | "CriminalCase" | "CriminalCase1" | "CriminalCase2" | "CriminalCase3" | "CriminalCase4">)
{
console.log(args)
}
showType(
{
PersonName: "Johhny",
SocialSecuritynumber: 889234,
CriminalCase: true,
PersonName1: "Michael",
SocialSecuritynumber1: 239904,
CriminalCase1: true,
PersonName2: "Edward",
SocialSecuritynumber2: 457703,
CriminalCase2: false,
PersonName3: "John",
SocialSecuritynumber3: 554087,
CriminalCase3: true,
PersonName4: "Sopheia",
SocialSecuritynumber4: 330098,
CriminalCase4: false,
})Output:
Recommended Articles
This is a guide to TypeScript pick. Here we discuss the introduction and working of pick in TypeScript with examples respectively. You may also have a look at the following articles to learn more –
