typescript json 添加属性 typescript对象增加属性

一、TypeScript-接口

1. TypeScript-接口定义

在TypeScript中，通用性的规范，一般使用接口进行定义。

• 接口可以用来定义通用属性

interface Person {
  name: string;
  // ?表示可有可无的参数
  age?: number;
  // 如果是readonly修饰，表示这个变量只能被读取，不能进行赋值
  readonly sex: string;
  // 未来的未知属性,表示这个接口，可以多出其它一个或多个属性，只要满足key为string, 类型为任意类型
  [propName: string]: any;
}

• ?表示该属性可有可无，当该接口被继承或者实现的时候，该属性可以不被强制实现。
• 未知属性定义，主要用于强校验的写法，比如直接传入字面量

const getPersonName = (person: Person): void => {
  console.log(person.name);
};

const person = {
  name: "dell",
  sex: "男",
};
// 将person变量传给getPersonName，进行的是弱校验，即使多了或者少了属性也不会报错
getPersonName(person);
// 如果传入的是字面量形式则会进行强校验，报错，如果保证不报错就需要在接口中添加未知属性的定义
getPersonName({
  name: "dell",
  sex: "男",
  job: "程序员",
});

• 接口可以用来定义方法

interface Person {
  // 定义方法say,返回值是string
  say(): string;
}

• 接口自身也可以定义函数

// 接口自身也可以定义函数
interface SayHi {
  (word: string): string;
}

const say: SayHi = (word: string) => {
  return "sayHi";
};

2. TypeScript-接口实现与继承

• 实现

// 接口定义
interface Person {
  name: string;
  // ?表示可有可无的参数
  age?: number;
  // 如果是readonly修饰，表示这个变量只能被读取，不能进行赋值
  readonly sex: string;
  // 未来的未知属性,表示这个接口，可以多出其他一个或多个属性，只要满足key为string, 类型为任意类型
  [propName: string]: any;
  // 定义方法say,返回值是string
  say(): string;
}
// 接口实现
class UserInfo implements Person {
  name = "dell";
  sex = "女";
  say() {
    return "hello";
  }
}

• 继承

// 接口继承
interface TeacherInfo extends Person {
  teach(): string;
}

3. 接口interface 和 类型别名type

• 接口interface 和 类型别名type 相类似，但并不完全一致
• interface没法表示一个基础类型，但是type可以

type Person = string;

4. 完整代码

// 接口interface 和 类型别名type 相类似，但并不完全一致
// interface没法表示一个基础类型，但是type可以
type Person1 = string;

interface Person {
  name: string;
  // ?表示可有可无的参数
  age?: number;
  // 如果是readonly修饰，表示这个变量只能被读取，不能进行赋值
  readonly sex: string;
  // 未来的未知属性,表示这个接口，可以多出其他一个或多个属性，只要满足key为string, 类型为任意类型
  [propName: string]: any;
  // 定义方法say,返回值是string
  say(): string;
}

interface TeacherInfo extends Person {
  teach(): string;
}
// 接口自身也可以定义函数
interface SayHi {
  (word: string): string;
}

const getPersonName = (person: Person): void => {
  console.log(person.name);
};

const setPersonName = (person: TeacherInfo, name: string): void => {
  person.name = name;
};

const person = {
  name: "dell",
  sex: "男",
  job: "程序员",
  say() {
    return "hello";
  },
  teach() {
    return "teach";
  },
};
// 将person变量传给getPersonName，进行的是弱校验，即使多了属性也不会报错
getPersonName(person);
// 如果传入的是字面量形式则会进行强校验，报错
getPersonName({
  name: "dell",
  sex: "男",
  job: "程序员",
  say() {
    return "hello";
  },
});

setPersonName(person, "lee");

class UserInfo implements Person {
  name = "dell";
  sex = "女";
  say() {
    return "hello";
  }
}

const say: SayHi = (word: string) => {
  return "sayHi";
};