Typescript 类与接口入门

记录下学习成果，望日后看到自己的成长。类与接口入门篇。

类

这里的类其实就是ES6里面的类了，这里推荐阅读阮一峰的ES6(点击查看)

将类编译为ES5的代码，不难发现，这里的类就是ES5的构造函数。ES5中可new一个构造函数生成实例，这里可通过new 一个类也生成一个实例，二者效果没啥区别。只是通过class来生成实例对象更简单了。

类里面的修饰符

public(公共的)、private(私有的)、readonly(只读的)、get/set(存取器)、static(静态属性) 等等

class Animal {
    // 公共的 在类外面可以访问
    public name: string;  
    public constructor(theName: string) {}
    // 私有的，只有在类里面才能访问
    private age: string;
    // 只读的，不可改变
    readonly address: number = 8;
}

接口

接口能够描述JavaScript中对象拥有的各种各样的外形。除了描述带有属性的普通对象外，接口也可以描述函数类型。

接口仅用于类型检查，它定义了对象的属性应该具有的名称和类型。或者说接口是一组描述对象的相关属性和方法，但既不提供实现也不为其初始化。

接口也可以理解为类型检查器，它会检查某个值里面是否包含接口里面的定义的属性以及方法以及这些属性对应的数据类型。
值得一提：类型检查器不会去检查属性的顺序，只要相应的属性存在并且类型也是对的就可以

// 定义接口
interface LabelledValue {
  label: string;
}
// 规定入参为接口的数据格式
function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

可选属性

在接口中也可以定义可选属性。
这里不在叙述，以后用到再来补充。

只读属性

还可以创建只读属性。这个只读属性只能在刚刚创建的时候可以修改其值。

interface Point {
    readonly x: number;
    readonly y: number;
}

你可以通过赋值一个对象字面量来构造一个Point。赋值后， x和y再也不能被改变了

let p1: Point = { x: 10, y: 20 };
p1.x = 5; // 这里会报错

readonly vs const

最简单判断该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性。做为变量使用的话用 const，若做为属性则使用readonly

接口中的方法

这里不在叙述，以后用到在做补充。

检查类的类型

TypeScript可以使用一个接口去强制类符合一个数据类型。检查属性的类型是属性后跟：接着接口名称。强制类符合数据类型，需要类名后跟 implements 接着跟接口名称

interface ClockInterface {
    currentTime: Date;
}

class Clock implements ClockInterface {
    currentTime: Date;
    constructor(h: number, m: number) { }
}

接口必须是对象吗？

上面说了接口是一个类型检查器，它是一个对象。单独一个数据类型你也可以看做是一个接口,比如下面类的入参以及出参的值去检查是否为 String 类型
class addToDo(name:string):string {}

类与接口的区别

原理方面：类是构造函数，接口是对象。二者同时都有属性与方法，但是二者又有区别：类可以定义属性名称与值、函数与内部代码逻辑，接口则定义属性名称与该属性的数据类型，方法以及方法出入参的数据类型。功能方面：类是用来实现逻辑的，接口是用来检查数据类型的。

参考文档：
Typescript 中文文档
 Classes vs Interfaces in TypeScript

seebin 博客

Typescript 类与接口入门