Day08: Learning TypeScript - Object Types: object

In the previous article, we recorded primitive data types. In this article, we will explore object types, including: object, arrays, and functions.

Methods to Define an Object:

1. General JSON object format, allowing TS to infer types (Type Inference)
2. Object type annotation
3. Manually defining object property types
4. Using interface
5. Using type

Today, we will introduce the first three basic methods of defining objects. However, in projects, the more commonly used methods are interface and type, which can define not only objects but also arrays and functions.

General JSON Object Format

Declaring an object in JavaScript applies to TypeScript:

let person = {
  name: 'iris',
  age: 18,
}

In TypeScript, the data type will be automatically inferred based on the object itself (Type Inference).

Let's modify the object and see what happens:

person.name = 'aka lazy front-end' // ok, type is the same
person = {
  name: 'aa', // ok, the overwritten object format must be exactly the same
  age: 20,
}

person.name = false // error: Type 'boolean' is not assignable to type 'string'.
person.job = 'lying at home' // error: Property 'job' does not exist on type
person = {
  name: 'bb', // error: Property 'age' is missing in type
}
person = {
  gender: 'male',
  job: 'lying at home',
} // error: Type '{ gender: string; job: string; }' is not assignable to type '{ name: string; age: number; }'

delete person.name // can delete properties

// If tsconfig is set to strict mode, it will show an error
delete person.name // error: The operand of a 'delete' operator must be optional.

Conclusion:

• ✅ The overwritten value must correspond to the property type.
• ✅ The entire object must be completely overwritten.
• ❌ Cannot arbitrarily add properties that do not originally exist on the object.
• ❌ Cannot overwrite the entire object with an incorrect format (missing a key / adding a key / incorrect value type).
• ❓ However, if you delete a property, TS will not warn you, and you can delete it. Be careful not to accidentally delete it!

Manually Defining Object Property Types

Although TS automatically infers types, you can also manually define types. Using method 1, the general JSON object format, is more convenient and faster, which fits the lazy front-end characteristic XD

let person3: { name: string, age: number } = {
    name: "iris",
    age: 18
};

Defining Object Parameter Types in Functions

In functions, you can define parameter types as person4: { name: string, age: number }. The official website states that you can also use a semicolon to separate parameters like this: person4: { name: string; age: number }.

const getUserInfo = (person4: { name: string, age: number }) => {
    console.log(`Hello, my name is ${person4.name}. I'm ${person4.age} years old.`);
};

getUserInfo({ name: "iris", age: 18 });

Optional Properties

You can specify some or all properties as optional by adding a ? after the property name. In the example below, age is changed to an optional property, which can be input or not.

const getUserInfo2 = (person5: { name: string, age?: number }) => {
    console.log(`Hello, my name is ${person5.name}. I'm ${person5.age} years old.`);
};

getUserInfo2({ name: "iris" }); // Hello, my name is iris. I'm undefined years old.

In the above example, although the age parameter is not included, it does not throw an error. However, when the function uses age, it will return undefined. We can check for undefined as follows:

const getUserInfo2 = (person5: { name: string; age?: number }) => {
  if (person5.age !== undefined) {
    console.log(
      `Hello, my name is ${person5.name}. I'm ${person5.age} years old.`
    )
  } else {
    console.log(`Hello, my name is ${person5.name}.`)
  }
}

References

https://ithelp.ithome.com.tw/articles/10214840#h5o-8 https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#object-types