TypeScript接口、type关键字可读、只读属性、继承接口|类、规范类、函数|可索引|类|混合类型接口、ReadonlyArray、接口和amp;type、映射类型

注意同时使用两种类型的索引时，数字索引的返回值必须是字符串索引返回值类型的子类型。这是因为当使用number来索引时，JavaScript会将它转换成string然后再去索引对象。也就是说用100（一个number）去索引等同于使用"100"（一个string）去索引，因此两者需要保持一致。

class Animal {
name: string;
}
class Dog extends Animal {
breed: string;
}
interface NotOkay {
[x: number]: Animal;
[x: string]: Dog;
}// 错误：使用'string'索引，有时会得到Animal，数字索引应该是字符串索引的子集
interface NotOkay {
[x: number]: Dog;
[x: string]: Animal;
}//OK

注意使用了可索引类型后，另外定义的属性需要符合可索引。例如下面额外定义了字符串name属性，而使用的可索引也是字符串，所以指向的值应该相同。

interface NumberDictionary {
[index: string]: number;
length: number; // 可以，length是number类型
name: string // 错误，`name`的类型与索引类型返回值的类型不匹配
}

只读设置

可以将索引签名设置为只读，这样就防止了给索引赋值

interface ReadonlyStringArray {
readonly [index: number]: string;
}
let myArray: ReadonlyStringArray = ["Alice", "Bob"];
myArray[2] = "Mallory"; // error!

类类型接口

接口描述了类的公共部分，而不是公共和私有两部分。它不会检查类是否具有某些私有成员。

interface ClockInterface {
currentTime: Date;
}
class Clock implements ClockInterface {
private currentTime: Date;//error ,只能为public
constructor(h: number, m: number) { }
}

规定构造函数

注意类是具有两个类型的：静态部分的类型和实例的类型， constructor存在于类的静态部分，所以不在检查的范围内。

故下面通过在接口里new定义构造函数会报错

interface ClockConstructor {
new (hour: number, minute: number);
}
class Clock implements ClockConstructor { //error,接口中的new无法直接在类里面实现
currentTime: Date;
constructor(h: number, m: number) { }
}

但是我们可以借助函数的的形式去实现，例如下面

interface ClockInterface {
tick();
}
class DigitalClock implements ClockInterface {
constructor(h: number, m: number) { }
tick() {
console.log("beep beep");
}
}
class AnalogClock implements ClockInterface {
constructor(h: number, m: number) { }
tick() {
console.log("tick tock");
}
}
interface ClockConstructor {
new (hour: number, minute: number): ClockInterface;
}
function createClock(ctor: ClockConstructor, hour: number, minute: number){
return new ctor(hour, minute);
}
let digital = createClock(DigitalClock, 12, 17);
let analog = createClock(AnalogClock, 7, 32);

混合类型接口

一个对象可以同时做为函数和对象使用，并带有额外的属性。

需要借助类型断言，例如下面：

interface Counter {
(start: number): string;
interval: number;
reset(): void;
}
function getCounter(): Counter {
let counter = <Counter>function (start: number) { };
counter.interval = 123;
counter.reset = function () { };
return counter;
}
let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

type关键字

用于给类型起一个新名字，支持基本类型、联合类型、元祖及其它任何你需要的手写类型,常用于联合类型。

type test = number; //基本类型
let num: test = 10;
type userOjb = {name:string} // 对象
type getName = ()=>string // 函数
type data = [number,string] // 元组
type numOrFun = Second | getName // 联合类型

type扩展（&）

interface的扩展可以通过type交叉(&)类型实现。

type Name = {
name: string;
}
type User = Name & {age: number}
let stu:User={name: 'wang', age: 18}

interface交叉（&）可以实现type类型。

interface Name {
name: string;
}
type User = Name & {
age: number;
}
let stu:User={name:'wang', age: 18}

interface继承type

接口可以继承type类型。

type Name = {
name: string;
}
interface User extends Name {
age: number;
}
let stu:User={name: 'wang', age: 89}

映射类型

type可以使用关键字生成映射类型。

type Keys = "name" | "sex"
type DuKey = {
[Key in Keys]: string //类似 for ... in
}
let stu: Dukey = {
name: 'wang'，
sex: 'man'
}

type高级使用

补充：

// 将所有属性变成可选的
type Optional<T> = {
[key in keyof T]?: T[key];
}
// 将某些属性变成必选的
type MyRequired<T, K extends keyof T> = T &
{
[key in K]-?: T[key];
};
// 例如我们有个实体
type App = {
_id?: string;
appId: string;
name: string;
description: string;
ownerList: string[];
createdAt?: number;
updatedAt?: number;
};
// 我们在更新这个对象/类型的时候，有些 key 是必填的，有些 key 是选填的，这个时候就可以这样子生成我们需要的类型
type AppUpdatePayload = MyRequired<Optional<App>, '_id'>

这篇好文章是转载于：学新通技术网

TypeScript接口、type关键字可读、只读属性、继承接口|类、规范类、函数|可索引|类|混合类型接口、ReadonlyArray、接口和amp;type、映射类型