2023.11 TS学习-接口

大家好，我是wo不是黄蓉，今年学习目标从源码共读开始，希望能跟着若川大佬学习源码的思路学到更多的东西。

发现文档上的一些描述竟然看不太懂...可能需要实际用的时候再琢磨琢磨，有的也没有想到很好的应用场景就不太好举例

ts学习

准备ts环境，npm i -g typescript

tsc --init初始化一个ts配置文件

tsc .\src\demo.ts将demo.ts编译为demo.js

接口

interface Person {
  firstName: string
  lastName: string
  //可选属性
  age?: number 
  //只读属性
  readonly sex: number
}

//数组创建后不能再被修改了
let ro: ReadonlyArray<number> = a;

额外的属性检查

传入不匹配的属性，会报错

interface Person {
  firstName: string
  lastName: string
}
function greeter(person: Person) {
  return "Hello, " + person.firstName + " " + person.lastName
}
//这段会提示报错，因为传参的属性name是不存在的
greeter({ name: "huang", lastName: "jane" })

函数类型

使用接口表示函数类型

interface PrintParam {
  (name: string): void
}

let printFun: PrintParam
printFun = function (name: string) {
  console.log(`my name is ${name}`)
}

printFun("piao")

可索引类型

使用Index访问时返回string类型的值，支持数字和字符串索引，数字索引的返回值必须是字符串索引返回值类型的子类型 （这句话不理解是什么意思？）

参考下面答案,因为dog是animal的子类，所以使用数字类型索引不会报错

虽然是使用的数字作为索引的但是最终会转成字符串类型的索引，类似于for ... in 遍历数组

interface StringArray {
  [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];

编译后的结果

var myArray
myArray = ["Bob", "Fred"]
var myStr = myArray[0]

name的类型与字符串索引类型不匹配，所以类型检查器给出一个错误提示（？）

是因为其他的属性返回值类型都返回的是number类型才报错的吗？

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 Person {
  name: string
}

class Student implements Person {
    //报错，因为前面接口约束了参数类型是string类型
  name: number
  constructor(name: string) {
    this.name = name
  }
}

接口中定义函数，类中实现

interface Person {
  name: string
  printName(name: string): void
}

class Student implements Person {
  name: string
  constructor(name: string) {
    this.name = name
  }
  printName(name: string) {
    console.log(name)
  }
}

类静态部分和实例部分的区别

这一部分没太看懂？？？

类的两个类型：静态部分的类型和实例的类型

静态部分指的是，Student继承了Person接口，ts会对new出来的实例进行检查，而不是检查Student内部的构造函数参数

实例部分指的是，new出来的实例,，如果Student类有构造方法且对参数进行了约束，那么作为实例student1对其传参是有约束的

class Student{
    score:number
    constructor(score:number){
        this.score = score
    }
}
const student1 = new Student(99)

继承接口

interface Person {
  name: string
  age: number
}
interface Children {
  canSayHi: boolean
}
//学生继承person和children 继承多个对象用,隔开
interface Student extends Person, Children {
  isWork: boolean
}

混合类型

一个对象可以同时具有多种类型，这个也是看不太懂？？？

interface Counter {
    //定义多种类型
    (start: number): string;
    interval: number;
    reset(): void;
}
//Counter作为对象的参数约束使用
function getCounter(): Counter {
    //当作对象使用，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;

接口继承类

//接口继承类
class Student {
  sayHi() {}
}
interface Person extends Student {}

//会编译报错，children实现了person,而person有继承了student，所以children必须实现student的sayHi方法
class Children implements Person {}
let children = new Children()

1677677947626.png