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.
Watch & read
Start with the required ones. The others are there when you need them.
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"givesType 'string' is not assignable to type 'number'. - An extra field:
age: 20givesObject 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.
Code tour
Click a line number with a ring to read the note for that line.
Practice
Short drills. Take your time and read the code before you answer.
1type Student = { name: string; year: number };2const nusrat: Student = { name: "Nusrat" };
1type Product = { title: string; price: number };2const tea: Product = { title: "Tea", price: "20" };
Quick check
3 questions. Each one explains itself after you answer.
- 1 / 3You see
interface Order { id: number; total: number }in one file andtype Order = { id: number; total: number }in another. What is the difference when you read them? - 2 / 3What does
const orders: Order[]hold? - 3 / 3
type Student = { name: string; year: number }. What happens withconst s: Student = { name: "Rafi", year: 2, age: 20 };?
Explain it back
How confident are you with Types for objects?
Done
type or interface, say what an object of that type must contain, and spot one that doesn't match.