TS学习笔记（数组，对象，接口）

TS数组

• 数组解构，数组展开运算符，数组遍历。

let x: number; let y: number; let z: number;
let five_array = [0,1,2,3,4];
[x,y,z] = five_array;
console.log([x,y,z])//0,1,2
//数组展开运算符
let four_array = [0, 1, 2, 3];
let five_array = [...four_array,  4];
//遍历数组
let number: string[] = ["1", "2", "3"];
for (let i of number) {
  console.log(i);
}

小结：TS中数组和JS中操作变化不大。

TS对象

• 对象解构，对象展开运算符。

let person = {
  name: "coolFish",
  sex: "男",
};

let { name, sex } = person;
//扩展
let person = {
  name: "coolFish",
  sex: "男",
  address: "Xiamen",
};

// 组装对象
let personWithAge = { ...person, age: 24 };

小结：和JS差别不大。

TS接口

• 对象的形状。

interface Person {
  name: string;
  age: number;
}

let semlinker: Person = {
  name: "coolFish",
  age: 24,
};

小结；这里定义一个对象，他有名字和年龄，那么创建这个对象时候，要给他一个名字和年龄的属性。

• 可选|只读。

//readonly 说明只读，只在创建阶段可以更改
interface Person {
  readonly name: string;
  age?: number;
}
//ReadonlyArray<T>去掉所有可变的方法，确保创建后不再变化
let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;
ro[0] = 12; // error!
ro.push(5); // error!
ro.length = 100; // error!
a = ro; // error!

• 任意属性：除了必选，可选，有时候我们需要接收不确定的一些属性。

interface Person {
  name: string;
  age?: number;
  [propSex: string]: any;
}

const newObject = { name: "kakuqo", sex: '男' }

小结：预留一个接收任意属性的插口。

• 接口和类型别名的区别。

//接口
interface Point {
  age: number;
  sex: string;
}

interface SetPoint {
  (age: number, sex: string): void;
}
//类型别名
type Point = {
  age: number;
  sex: string;
};
type SetPoint = (age: number, sex: string) => void;

小结：看起来没啥区别，就声明方式变了。

• Other Types: 类型别名可以用于一些其他类型，比如原始类型、联合类型和元组

// 原始类型
type age = number;

// 联合类型
type PartialPointX = { x: number; };
type PartialPointY = { y: string; };
type PartialPoint = PartialPointX | PartialPointY;

// 元组
type Data = [number, string];

• Extend:扩展，接口和类型别名都能扩展，接口和类型别名不会互斥，接口可以扩展类型别名，反之不行。

//接口扩展类型别名
type PartialPointX = { x: number; };
interface Point extends PartialPointX { y: number; }