Learning Journal

1/2/2024[edited at: 1/12/2024]

The difference between SATISFIES and AS

interface ColorWithId extends HasId {  
  color: "red" | "green" | "blue";
  }
  
const myColor = {  
    id: 1  
    color: "red",
  } as ColorWithId;
    
const myColor2 = {
    id: 1,  
    color: "red",
  } satisfies ColorWithId;
    
myColor.color.substring(0, 3);
myColor2.color.substring(0, 3);
interface ColorWithId extends HasId {  
  color: "red" | "green" | "blue";
  }
  
const myColor = {  
    id: 1  
    color: "red",
  } as ColorWithId;
    
const myColor2 = {
    id: 1,  
    color: "red",
  } satisfies ColorWithId;
    
myColor.color.substring(0, 3);
myColor2.color.substring(0, 3);

The difference between myColor and myColor2 is that myColor's type is ColorWithId, which means myColor.color can be either "red", "green", or "blue", we don't know. However, myColor2's type is a certain type that satisfies ColorWithId, which means myColor2.color can only be "red". The type of myColor2 is actually defined when we assign the object of {id: 1, color: 'red'} to it and this object happens to satisfy ColorWithId (otherwise, VSCode will scream at us).