JIYIK CN >

To set optionals with default values ​​in React TypeScript:

1. Use a question mark to mark a property on a type as optional.
2. Provide default values ​​for properties when destructuring them in a function's definition.

interface EmployeeProps {
  name?: string; // 👈️ 标记为可选
  age?: number; // 👈️ 标记为可选
  country: string; // 👈️ 必选项
}

function Employee({name = 'Alice', age = 30, country}: EmployeeProps) {
  return (
    <div>
      <h2>{name}</h2>
      <h2>{age}</h2>
      <h2>{country}</h2>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <Employee name="Bob" age={29} country="Belgium" />

      <hr />

      <Employee country="Austria" />
    </div>
  );
}

We marked the name and age attributes as optional.

This means that the component can be used with or without providing the name and age attributes. \

If a value for an optional property is not specified, it is set to undefined.

Not providing a value for a prop is the same as setting the prop to the value of undefined.

We also set default values ​​for the name and age parameters in the Employee component definition.

function Employee({name = 'Alice', age = 30, country}: EmployeeProps) {
  return (
    <div>
      <h2>{name}</h2>
      <h2>{age}</h2>
      <h2>{country}</h2>
    </div>
  );
}

The name property in the object is set to Alice by default, so if the name property is not provided, it will be assigned a value of Alice.

We can also make the entire props object optional by marking all of its properties as optional.

interface EmployeeProps {
  name?: string; // 👈️ 所有的标记为可选项
  age?: number;
  country?: string;
}

function Employee({
  name = 'Alice',
  age = 30,
  country = 'Austria',
}: EmployeeProps) {
  return (
    <div>
      <h2>{name}</h2>
      <h2>{age}</h2>
      <h2>{country}</h2>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <Employee name="Bob" age={29} country="Belgium" />

      <hr />

      <Employee />
    </div>
  );
}

EmployeePropsAll properties in the type are marked as optional, so you don't need to provide any properties to use the component.

We Employeeset default values ​​for all props of the component, so if any prop is omitted, the default value is used.