Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 4 · 3 / 5Types for objects
Phase 4TypeScript
5 topics · 2 wks
  1. 1Why types catch bugs
  2. 2Reading type annotations
  3. 3Types for objects
  4. 4Unions and optional values
  5. 5Reading type errors
JourneyPhase 4Types for objects
01 / 09Overview

Types for objects

You'll learn to read object types written with type and interface, and the errors you get when an object doesn't match.

Why it mattersReact Native code describes almost everything as an object type: a user, an order, a screen's props. You'll read them every day.
about 75 min·needs: Reading type annotations, Objects
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Docs
Everyday types, object typesTypeScript Handbook (official) · 15 min · English
MMamun's noteRead "Object Types", then "Type Aliases" and "Interfaces". Skip "Optional Properties" and "Union Types" for now; they are the next topic. Skim the type vs interface comparison table, you don't need to remember it.
Video
Learn TypeScript, full course for beginners (custom types)YouTube · freeCodeCamp (Bob Ziroll, Scrimba) · 14 min · English
MMamun's noteWatch 29:55–43:15 only: defining custom types, a Pizza type and nested object types, in a small pizza shop app. Stop when "Optional properties" starts.
ArticleOptional
Essential types and annotations: object literal typesTotal TypeScript Essentials · Matt Pocock (free online book) · 10 min · English
MMamun's noteSame free chapter as last topic. This time read "Object Literal Types" and "Type Aliases". Short, with small examples. Skip the exercises; they need a project setup.
VideoOptional
Lesson 7: Type aliases, TypeScript Bangla tutorial seriesYouTube · Learn with Sumit · 4 min · Bangla
MMamun's noteIn Bangla, just over 3 minutes. Sumit shows how to give a type a name and reuse it.
03 / 09

Explanation

You want to describe a student once: every student has a name and a year. Then, everywhere a student is used, TypeScript checks that it really has both.

Think of an admission form. It lists the fields: name, in letters; year, as a number. Every filled form must have those fields. An object type is that blank form. Each real student object is one filled form.

type Student = {
name: string;
year: number;
};
const rafi: Student = { name: "Rafi", year: 2 };

type Student = ... gives the shape a name. This is called a type alias. Inside, each line is a property and its type. They end with ;, not ,, because this is a description, not a real object. rafi: Student means "rafi is a Student", so it must have a name that is a string and a year that is a number.

You'll also see the same idea written with interface:

interface Student {
name: string;
year: number;
}

For reading code, type and interface mean the same thing: the shape an object must have. Teams just pick one style. Once the shape has a name, you use it like any type: Student[] is an array of students, and function label(student: Student) takes one student.

If an object doesn't match, TypeScript tells you how:

  • A field is missing: Property 'year' is missing in type '{ name: string; }' but required in type 'Student'.
  • A field has the wrong type: year: "2" gives Type 'string' is not assignable to type 'number'.
  • An extra field: age: 20 gives Object literal may only specify known properties, and 'age' does not exist in type 'Student'.

People often think type Student creates a student. It doesn't. It creates nothing when the app runs. It is only a description used for checking, and it is removed with the other types.

When you read a React Native file, look near the top for type ... = { or interface ... {. Read each line as "this object has a ___ that is a ___". That tells you what every object of that type holds.

Words to recognise
object typetype aliasinterfaceStudent[]property
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

app.ts5 notes
type Student = {
Mentor note · line 1
type Student = gives this shape a name. Every Student has a name that is a string and a year that is a number.
2 name: string;
3 year: number;
4};
interface Course {
6 title: string;
7 credits: number;
8}
const rafi: Student = { name: "Rafi", year: 2 };
const students: Student[] = [rafi, { name: "Nusrat", year: 3 }];
11
function label(student: Student): string {
13 return `${student.name} (year ${student.year})`;
14}
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1type Student = { name: string; year: number };
2const nusrat: Student = { name: "Nusrat" };
What does TypeScript say?
DrillPredict2 / 2
1type Product = { title: string; price: number };
2const tea: Product = { title: "Tea", price: "20" };
What does TypeScript say?
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3You see interface Order { id: number; total: number } in one file and type Order = { id: number; total: number } in another. What is the difference when you read them?
  2. 2 / 3What does const orders: Order[] hold?
  3. 3 / 3type Student = { name: string; year: number }. What happens with const s: Student = { name: "Rafi", year: 2, age: 20 };?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with Types for objects?

09 / 09

Done

You can now
Read a type or interface, say what an object of that type must contain, and spot one that doesn't match.
Next: Unions and optional values Back to Phase 4
On this page
  1. 01Types for objects
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 4TypeScript
5 topics · 2 wks
  1. 1Why types catch bugs
  2. 2Reading type annotations
  3. 3Types for objects
  4. 4Unions and optional values
  5. 5Reading type errors
JourneyPhase 4Types for objects
01 / 09Overview

Types for objects

You'll learn to read object types written with type and interface, and the errors you get when an object doesn't match.

Why it mattersReact Native code describes almost everything as an object type: a user, an order, a screen's props. You'll read them every day.
about 75 min·needs: Reading type annotations, Objects
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Docs
Everyday types, object typesTypeScript Handbook (official) · 15 min · English
MMamun's noteRead "Object Types", then "Type Aliases" and "Interfaces". Skip "Optional Properties" and "Union Types" for now; they are the next topic. Skim the type vs interface comparison table, you don't need to remember it.
Video
Learn TypeScript, full course for beginners (custom types)YouTube · freeCodeCamp (Bob Ziroll, Scrimba) · 14 min · English
MMamun's noteWatch 29:55–43:15 only: defining custom types, a Pizza type and nested object types, in a small pizza shop app. Stop when "Optional properties" starts.
ArticleOptional
Essential types and annotations: object literal typesTotal TypeScript Essentials · Matt Pocock (free online book) · 10 min · English
MMamun's noteSame free chapter as last topic. This time read "Object Literal Types" and "Type Aliases". Short, with small examples. Skip the exercises; they need a project setup.
VideoOptional
Lesson 7: Type aliases, TypeScript Bangla tutorial seriesYouTube · Learn with Sumit · 4 min · Bangla
MMamun's noteIn Bangla, just over 3 minutes. Sumit shows how to give a type a name and reuse it.
03 / 09

Explanation

You want to describe a student once: every student has a name and a year. Then, everywhere a student is used, TypeScript checks that it really has both.

Think of an admission form. It lists the fields: name, in letters; year, as a number. Every filled form must have those fields. An object type is that blank form. Each real student object is one filled form.

type Student = {
name: string;
year: number;
};
const rafi: Student = { name: "Rafi", year: 2 };

type Student = ... gives the shape a name. This is called a type alias. Inside, each line is a property and its type. They end with ;, not ,, because this is a description, not a real object. rafi: Student means "rafi is a Student", so it must have a name that is a string and a year that is a number.

You'll also see the same idea written with interface:

interface Student {
name: string;
year: number;
}

For reading code, type and interface mean the same thing: the shape an object must have. Teams just pick one style. Once the shape has a name, you use it like any type: Student[] is an array of students, and function label(student: Student) takes one student.

If an object doesn't match, TypeScript tells you how:

  • A field is missing: Property 'year' is missing in type '{ name: string; }' but required in type 'Student'.
  • A field has the wrong type: year: "2" gives Type 'string' is not assignable to type 'number'.
  • An extra field: age: 20 gives Object literal may only specify known properties, and 'age' does not exist in type 'Student'.

People often think type Student creates a student. It doesn't. It creates nothing when the app runs. It is only a description used for checking, and it is removed with the other types.

When you read a React Native file, look near the top for type ... = { or interface ... {. Read each line as "this object has a ___ that is a ___". That tells you what every object of that type holds.

Words to recognise
object typetype aliasinterfaceStudent[]property
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

app.ts5 notes
type Student = {
Mentor note · line 1
type Student = gives this shape a name. Every Student has a name that is a string and a year that is a number.
2 name: string;
3 year: number;
4};
interface Course {
6 title: string;
7 credits: number;
8}
const rafi: Student = { name: "Rafi", year: 2 };
const students: Student[] = [rafi, { name: "Nusrat", year: 3 }];
11
function label(student: Student): string {
13 return `${student.name} (year ${student.year})`;
14}
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1type Student = { name: string; year: number };
2const nusrat: Student = { name: "Nusrat" };
What does TypeScript say?
DrillPredict2 / 2
1type Product = { title: string; price: number };
2const tea: Product = { title: "Tea", price: "20" };
What does TypeScript say?
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3You see interface Order { id: number; total: number } in one file and type Order = { id: number; total: number } in another. What is the difference when you read them?
  2. 2 / 3What does const orders: Order[] hold?
  3. 3 / 3type Student = { name: string; year: number }. What happens with const s: Student = { name: "Rafi", year: 2, age: 20 };?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with Types for objects?

09 / 09

Done

You can now
Read a type or interface, say what an object of that type must contain, and spot one that doesn't match.
Next: Unions and optional values Back to Phase 4
On this page
  1. 01Types for objects
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read

You want to describe a student once: every student has a name and a year. Then, everywhere a student is used, TypeScript checks that it really has both.

Think of an admission form. It lists the fields: name, in letters; year, as a number. Every filled form must have those fields. An object type is that blank form. Each real student object is one filled form.

type Student = {
name: string;
year: number;
};
const rafi: Student = { name: "Rafi", year: 2 };

type Student = ... gives the shape a name. This is called a type alias. Inside, each line is a property and its type. They end with ;, not ,, because this is a description, not a real object. rafi: Student means "rafi is a Student", so it must have a name that is a string and a year that is a number.

You'll also see the same idea written with interface:

interface Student {
name: string;
year: number;
}

For reading code, type and interface mean the same thing: the shape an object must have. Teams just pick one style. Once the shape has a name, you use it like any type: Student[] is an array of students, and function label(student: Student) takes one student.

If an object doesn't match, TypeScript tells you how:

  • A field is missing: Property 'year' is missing in type '{ name: string; }' but required in type 'Student'.
  • A field has the wrong type: year: "2" gives Type 'string' is not assignable to type 'number'.
  • An extra field: age: 20 gives Object literal may only specify known properties, and 'age' does not exist in type 'Student'.

People often think type Student creates a student. It doesn't. It creates nothing when the app runs. It is only a description used for checking, and it is removed with the other types.

When you read a React Native file, look near the top for type ... = { or interface ... {. Read each line as "this object has a ___ that is a ___". That tells you what every object of that type holds.

Words to recognise
object typetype aliasinterfaceStudent[]property

You want to describe a student once: every student has a name and a year. Then, everywhere a student is used, TypeScript checks that it really has both.

Think of an admission form. It lists the fields: name, in letters; year, as a number. Every filled form must have those fields. An object type is that blank form. Each real student object is one filled form.

type Student = {
name: string;
year: number;
};
const rafi: Student = { name: "Rafi", year: 2 };

type Student = ... gives the shape a name. This is called a type alias. Inside, each line is a property and its type. They end with ;, not ,, because this is a description, not a real object. rafi: Student means "rafi is a Student", so it must have a name that is a string and a year that is a number.

You'll also see the same idea written with interface:

interface Student {
name: string;
year: number;
}

For reading code, type and interface mean the same thing: the shape an object must have. Teams just pick one style. Once the shape has a name, you use it like any type: Student[] is an array of students, and function label(student: Student) takes one student.

If an object doesn't match, TypeScript tells you how:

  • A field is missing: Property 'year' is missing in type '{ name: string; }' but required in type 'Student'.
  • A field has the wrong type: year: "2" gives Type 'string' is not assignable to type 'number'.
  • An extra field: age: 20 gives Object literal may only specify known properties, and 'age' does not exist in type 'Student'.

People often think type Student creates a student. It doesn't. It creates nothing when the app runs. It is only a description used for checking, and it is removed with the other types.

When you read a React Native file, look near the top for type ... = { or interface ... {. Read each line as "this object has a ___ that is a ___". That tells you what every object of that type holds.

Words to recognise
object typetype aliasinterfaceStudent[]property