Ionic 2中使用接口与类实现模型的差异及预设值咨询

嘿，这个问题我当初在做Ionic 2项目时也纠结过，正好给你捋明白～

一、Interface（接口）和Class（类）的核心区别 #

两者本质上是TypeScript里完全不同的东西，适用场景差很多：

• 仅做类型校验？选Interface：Interface只是TypeScript的类型定义语法，编译成JavaScript后会被完全移除，它唯一的作用就是在开发阶段帮你校验数据结构是否符合预期，比如确保你不会给用户模型多传一个不存在的age字段，或者漏传id。示例代码：

interface User {
  id: number;
  name: string;
}

// 开发时如果写user.age会直接报错，但编译后这个检查就消失了
const user: User = { id: 1, name: 'Dale' };

• 需要实例化/加功能？选Class：Class是真正的JavaScript构造函数，编译后依然存在。你可以创建它的实例，给它添加方法、设置属性默认值，甚至实现继承逻辑。示例代码：

class User {
  id: number;
  name: string;

  // 给模型加行为方法
  getFullName(): string {
    return `User #${this.id}: ${this.name}`;
  }
}

const user = new User();
user.id = 1;
user.name = 'Dale';
console.log(user.getFullName()); // 能正常调用方法输出内容

• 场景总结：如果你的模型只是单纯的“数据容器”，不需要任何逻辑行为，用Interface足够轻便；如果需要给模型加方法、复用默认值，或者要创建多个同结构的实例，Class是更合适的选择。

二、在Ionic 2中给模型设置预设值 #

用Class实现预设值（最推荐） #

Class天生支持属性默认值，你可以直接在属性定义时或者构造函数里设置：

class User {
  // 直接给属性设默认值
  id: number = 0;
  name: string = 'Guest User';
  isActive: boolean = true;

  // 构造函数传参可覆盖默认值
  constructor(id?: number, name?: string) {
    if (id) this.id = id;
    if (name) this.name = name;
  }
}

// 创建默认实例
const defaultUser = new User();
console.log(defaultUser); // { id: 0, name: 'Guest User', isActive: true }

// 创建自定义实例，未传的属性保留默认值
const customUser = new User(2, 'Dale');
console.log(customUser); // { id: 2, name: 'Dale', isActive: true }

用Interface模拟预设值 #

Interface本身不能设置默认值，但你可以定义一个“默认模板对象”，然后通过对象展开语法来合并自定义值：

interface User {
  id: number;
  name: string;
  isActive: boolean;
}

// 定义默认值模板
const defaultUserTemplate: User = {
  id: 0,
  name: 'Guest User',
  isActive: true
};

// 合并默认值和自定义值
const customUser: User = { ...defaultUserTemplate, name: 'Dale' };
console.log(customUser); // { id: 0, name: 'Dale', isActive: true }

这样不管用哪种方式，都能轻松实现模型的预设值啦～

内容的提问来源于stack exchange，提问作者Dale Nguyen