🕹 TypeScript Cheats: Property 'id' does not exist on type '{}'.

Copy 
1const isValidObject = (myObject as ValidObject).id !== undefined;

Copy 
1function isValidObject(myObject: ValidObject | {}): myObject is ValidObject {
2  return (myObject as ValidObject).id !== undefined;
3}

Copy 
1// Imaginary call to an API that returns the venue with ID 1,
2// or an empty object if there is no venue with that ID
3const venue = getVenue(1);
4
5// Let's check if a venue was found by verifying the existence of  the `id` property
6const weHaveVenue = venue.id !== undefined;
7
8if (weHaveVenue) {
9  // do something
10} else {
11  // do something else...
12}

Copy 
1// Let's define the type of our imaginary API function first
2type GetVenue = (
3  id: number
4) => { id: number; name: string; location: string } | {};
5
6// And then write a sample (and NOT real world production code) implementation
7// faking an API call that might or might not find (and return) a venue
8const getVenue: GetVenue = function(id) {
9  const state = id < 10 ? 200 : 404;
10
11  return state === 200
12    ? {
13        id,
14        name: "Meetings Central",
15        location: "North Pole",
16      }
17    : {};
18};
19
20const venue = getVenue(1);
21
22const weHaveVenue = venue.id !== undefined; // ❌ Property 'id' does not exist on type '{}'.
23
24if (weHaveVenue) {
25  // do something
26} else {
27  // do something else...
28}

Copy 
1// Let's define two more types since we will have to reuse them in our code
2type Venue = { id: number; name: string; location: string };
3type NoVenue = {};
4
5type GetVenue = (id: number) => Venue | NoVenue;
6
7const getVenue: GetVenue = function(id) {
8  const state = id < 10 ? 200 : 404;
9
10  return state === 200
11    ? {
12        id,
13        name: "Meetings Central",
14        location: "North Pole",
15      }
16    : {};
17};
18
19const venue = getVenue(1);
20
21// By casting our `venue` to a `Venue` type, and then checking on the `id` property,
22// we are basically telling TypeScript: "trust us, at runtime we're gonna be fine"
23const weHaveVenue = (venue as Venue).id !== undefined; // ✅
24
25if (weHaveVenue) {
26  // do something
27} else {
28  // do something else...
29}

Copy 
1[...]
2
3if (weHaveVenue) {
4  // do something with our venue object
5  const upperName = venue.name.toUpperCase(); // ❌ Property 'name' does not exist on type 'NoVenue'.
6} else {
7  // do something else...
8}

Copy 
1type Venue = { id: number; name: string; location: string };
2type NoVenue = {};
3type GetVenue = (id: number) => Venue | NoVenue;
4
5// We move our id check into a function whose return type is "value is Type"
6function isVenue(venue: Venue | NoVenue): venue is Venue {
7  return (venue as Venue).id !== undefined;
8}
9
10const getVenue: GetVenue = function(id) {
11  const state = id < 10 ? 200 : 404;
12
13  return state === 200
14    ? {
15        id,
16        name: "Meetings Central",
17        location: "North Pole",
18      }
19    : {};
20};
21
22const venue = getVenue(1);
23
24// We can now call our type guard to be sure we are dealing with one type, and not the other
25if (isVenue(venue)) {
26  // do something with our venue object
27  const upperName = venue.name.toUpperCase(); // ✅
28} else {
29  // do something else...
30}