如何设置 TypeScript 接口默认值

作者

使用扩展语法设置 TypeScript 接口默认值 (…)

Using Default values with Interfaces in TypeScript

为接口设置默认值：

  1. 使用Pick实用程序类型仅选择具有默认值的属性。
  2. 创建对象时，使用扩展语法解压默认属性后的其余属性。
索引.ts
interface Person {
  name: string;
  age: number;
  country: string;
}

const defaults: Pick<Person, 'name' | 'country'> = {
  name: '',
  country: '',
};

const person1: Person = {
  ...defaults,
  name: 'Bobby Hadz',
  age: 30,
};

// 👇️ { name: 'Bobby Hadz', country: '', age: 30 }
console.log(person1);

我们使用实用程序类型
从接口中获取和属性Pick的类型，并为 2 个属性指定默认值。namecountryPerson

索引.ts
interface Person {
  name: string;
  age: number;
  country: string;
}

// type Example = {
//     name: person1;
//     country: person1;
// }
type Example = Pick<Person, 'name' | 'country'>;

您可以通过用管道分隔它们来选择多个属性名称|。

如果您只需要为 1 个属性指定默认值，则不必使用管道。

索引.ts
interface Person {
  name: string;
  age: number;
  country: string;
}

const defaults: Pick<Person, 'name'> = {
  name: '',
};

const person1: Person = {
  ...defaults,
  name: 'Bobby Hadz',
  age: 30,
  country: 'Chile',
};

// 👇️ { name: 'Bobby Hadz', age: 30, country: 'Chile' }
console.log(person1);

下一步是为该Person类型设置一个新变量，并使用扩展语法 (…) 覆盖默认值。

使用自定义函数设置 TypeScript 接口默认值

或者，您可以使用自定义函数。

  1. 创建一个定义类型默认值的初始化函数
  2. 使用扩展语法 (…) 用用户提供的值覆盖默认值。
索引.ts
interface Person {
  name: string;
  age: number;
  country: string;
}

function initPerson(options?: Partial<Person>): Person {
  const defaults = {
    name: '',
    age: 0,
    country: '',
  };

  return {
    ...defaults,
    ...options,
  };
}

const p1: Person = initPerson();

console.log(p1); // 👉️ {name: '', age: 0, country: ''}

const p2: Person = initPerson({ name: 'Tom', age: 30 });
console.log(p2); // 👉️ {name: 'Tom', age: 30, country: ''}

我们创建了一个initPerson函数，可以用一个options对象或根本没有参数调用。

该函数定义接口的默认值Person，并使用
扩展语法 (…)
在解包任何用户提供的值之前解包默认值。

我们使用
Partial
实用程序类型将接口中的所有属性设置Person为函数参数中的可选。

您传递给函数的任何值都将覆盖默认值。

索引.ts
const obj1 = {
  name: 'Bobby Hadz',
};

const obj2 = {
  name: 'Alfred',
};

const obj3 = {
  ...obj1,
  ...obj2,
};

console.log(obj3); // 👉️ {name: 'Alfred'}

当使用相同的键解压多个对象时，最后解压的对象会覆盖之前的值。

使用这种方法时，我们可以确定对象、函数创建的对象将始终符合接口，即使它在没有参数的情况下被调用也是如此。 initPerson Person

应该注意的是，您不能在接口中显式设置默认值，因为接口和类型在编译期间会被删除。

它们在运行时不存在，所以我们只能在开发过程中利用它们。

# Setting undefined as the default value for interface properties

If you want to set the properties of an interface to have a default value of
undefined, you can simply make the properties optional.

index.ts
interface Person {
  name?: string;
  age?: number;
  country: string;
}

const p1: Person = {
  country: 'Germany',
};

// 👇️ The rest are optional

p1.age = 30;

p1.name = 'Bobby Hadz';

We used a question mark to mark the name and age properties as optional.

Now we aren’t required to set them when creating an object that uses the
Person interface.

You can set the properties on the object using dot or bracket notation at a
later stage.

Even though TypeScript doesn’t require us to set the name and age properties
when creating the object, it still checks that all properties added later on
conform to the Person interface.

index.ts
interface Person {
  name?: string;
  age?: number;
  country: string;
}

const p1: Person = {
  country: 'Germany',
};

// ⛔️ Error: Property 'test' does not exist on type 'Person'
p1.test = 'hello';

// ⛔️ Error: Type '5' is not assignable to type 'string' or 'undefined'
p1.name = 5;

We are only able to add properties that are defined on the interface and match
the specified type.