拓展 - typescript笔记

发表更新文章13 分钟读完 (大约2016个字)

学习 TypeScript 笔记，仅记录一些容易混淆的知识点

数据类型

void 空值

可以表示没有任何返回值的函数

function alertName(): void {
    alert('My name is Tom');
}

也可以用于表示只能被设置成 null 或 undefined 的变量

let unusable: void = undefined;

Null/Undefined

null 和 undefined 是所有类型的子类，也就是说 null / undefined 类型的变量能够赋值给 number 类型的变量

let num: number = undefined;
// or
let u: undefined;
let num: number = u;

类型推论

当没有明确指定类型时，会在编译时进行推断，例如给一个变量赋值字符串，那么 ts 就会推断为 string 类型

let myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

联合类型

联合类型表示取值可以为多种类型中的一种

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

当 ts 无法确定一个联合类型的变量是哪个类型的时候，就会使用类型推断来确定其类型，在没有进行推断之前，只能访问联合类型的所有类型里的共有属性和方法，下例中因为 number 没有 length 方法，所以 ts 报错

function getLength(something: string | number): number {
    return something.length;
}

// index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
//   Property 'length' does not exist on type 'number'.

接口

在 TS 中使用 interface（接口）去定义对象的类型。

可以通过readonly去定义只读属性，TS 会在修改只读属性时报错。

interface Person {
    readonly id: number;
    name: string;
}

接口之间可以互相继承：

interface Alarm {
    alert(): void;
}

interface LightableAlarm extends Alarm {
    lightOn(): void;
    lightOff(): void;
}

有点特别的是，接口可以继承类：

class Point {
    x: number;
    y: number;
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
}

interface PointInstanceType {
    x: number;
    y: number;
}

// 等价于 interface Point3d extends PointInstanceType
interface Point3d extends Point {
    z: number;
}

let point3d: Point3d = {x: 1, y: 2, z: 3};

函数类型

函数的类型定义要区分 函数声明 和 函数表达式。

函数声明，定义好入参和返回的类型即可：

function sum(x: number, y: number): number {
    return x + y;
}

函数表达式的类型定义要比函数声明来的复杂，定义同一个函数：

let sum: (x: number, y: number) => number = function (x, y) {
    return x + y;
};

当然也可以使用接口去定义：

interface Sum {
    (x: number, y: number): number;
}

let sum: Sum;
sum = function(x: number, y: number) {
    return x + y;
}

类型别名

这是之前我一直和 interface 混淆的概念，类型别名用来给一个类型起新的名字，常用于联合类型：

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;

function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}

这里用到了 type 关键字去定义类型别名，在 TS 中，定义字符串字面量类型用的也是 type 关键字：

type EventNames = 'click' | 'scroll' | 'mousemove';
function handleEvent(ele: Element, event: EventNames) {
    // do something
}

断言

断言，即手动指定一个值的类型。

断言的使用有一定的限制，如果想让 A 与 B 能兼容，那么 A 能被断言成 B，B 也能被断言成 A。

举个例子，下面的 Animal 和 Cat 的关系可以看做是 Cat extends Animal，Cat 能和 Animal 兼容，所以他们能互相断言。

interface Animal {
    name: string;
}
interface Cat {
    name: string;
    run(): void;
}

function testAnimal(animal: Animal) {
    return (animal as Cat);
}
function testCat(cat: Cat) {
    return (cat as Animal);
}

下面列举了3种常见的使用场景：

常遇见的一个状况就是在联合类型中，只能使用所有类型共有的属性和方法，如果需要使用某个类型的特有方法，就需要使用断言来指定类型：

interface Cat {
    name: string;
    run(): void;
}
interface Fish {
    name: string;
    swim(): void;
}

function getName(animal: Cat | Fish) {
    return animal.swim(); // 这里会报错
}

// 但使用断言后便不会报错
function isFish(animal: Cat | Fish) {
      return (animal as Fish).swim();
}

还可用于将一个父类断言为更具体的子类：

interface Animal {
    name: string;
}
interface Cat {
    name: string;
    run(): void;
}

const animal: Animal = {
    name: 'tom'
};
let tom = animal as Cat;

当使用类型声明去定义 tom 变量时，是会报错的，因为不能将父类的实例赋值给类型为子类的变量：

interface Animal {
    name: string;
}
interface Cat {
    name: string;
    run(): void;
}

const animal: Animal = {
    name: 'tom'
};
let tom: Cat = animal; // 此处会报错

还有一种情况就是，TS 会在不存在属性或方法时进行报错，但是有时候我们确定某个方法或者属性不会出错，就可以使用断言去忽略：

(window as any).foo = 1;

枚举

枚举解决了状态判断的痛点，下面是对于状态值判断的一段代码，从代码中很难看出值1对应的状态：

function handleStatusChange(status) {
    if(status == 1){
        // do somthing
    }else if(status == 2){
        // do somthing
    }else if(status == 3){
        // do somthing
    }
}

如果使用枚举，且如果是数字枚举，那么

enum orderStatus {
    UN_PAYED,   // 未支付
    PAYED,      // 已支付
    CANCELED,   // 已取消
}

那么上述的代码就可以修改为：

function handleStatusChange(status) {
    if(status == orderStatus['UN_PAYED']){
        // do somthing
    }else if(status == orderStatus['PAYED']){
        // do somthing
    }else if(status == orderStatus['CANCELED']){
        // do somthing
    }
}

枚举又可以分为数字枚举和字符串枚举。

他们的区别就在于：数字枚举既可以用枚举名称来索引，也可以用枚举值来索引；而字符串枚举只能够通过枚举名称来索引，不能通过枚举值来反向索引。

enum orderStatus {
    UN_PAYED,   
    PAYED,      
    CANCELED,   
}

orderStatus.UN_PAYED // 0;
UN_PAYED[0] // "UN_PAYED";

从他们被编译的结构上，就可以看出区别：

// 数字枚举
enum orderStatus {
    UN_PAYED,   
    PAYED,      
    CANCELED,   
}

var orderStatus;
(function (orderStatus) {
    orderStatus[orderStatus["UN_PAYED"] = 0] = "UN_PAYED";
    orderStatus[orderStatus["PAYED"] = 1] = "PAYED";
    orderStatus[orderStatus["CANCELED"] = 2] = "CANCELED";
})(orderStatus || (orderStatus = {}));

// 字符串枚举
enum orderStatus {
    UN_PAYED = "A",   
    PAYED = "B",     
    CANCELED = "C",   
}

var orderStatus;
(function (orderStatus) {
        orderStatus["UN_PAYED"] = "A";
      orderStatus["PAYED"] = "B";
    orderStatus["CANCELED"] = "C";
})(orderStatus || (orderStatus = {}));

如果在枚举之前加上const，就是常量枚举，不同于常规的枚举，他们在编译阶段会被删除，减少额外开销：

const enum orderStatus {
    UN_PAYED,   
    PAYED,      
    CANCELED,   
}

类

修饰符

TS 提供了三种修饰符：public、private 和 protected

public：修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public 的；

private：

  • 修饰的属性或方法是私有的，不能在声明它的类的外部访问；
  • 在子类中也不能访问；
  • 当构造函数用 private 进行修饰时，该类不能被继承或者实例化；

protected：在子类中允许被访问的 private 属性或方法，当构造函数用 protected 进行修饰时，该类只允许被继承；

参数属性

修饰符和 readonly 还可以使用在构造函数参数中，等同于类中定义该属性同时给该属性赋值，使代码更简洁：

class Animal {
  public name: string;
  public constructor(name) {
    this.name = name;
  }
}

// 可以简写为
class Animal {
  public constructor(public name) {
  }
}

如果需要加上 readonly 只读属性关键字：

class Animal {
  // public readonly name;
  public constructor(public readonly name) {
    // this.name = name;
  }
}

类与接口

interface（接口）通过 implements 进行实现（定义）：

// 共有特性
interface Alarm {
    alert(): void;
}

class Door {
}

class SecurityDoor extends Door implements Alarm {
    alert() {
        console.log('SecurityDoor alert');
    }
}

class Car implements Alarm {
    alert() {
        console.log('Car alert');
    }
}

一个类可以实现多个接口：

interface Alarm {
    alert(): void;
}

interface Light {
    lightOn(): void;
    lightOff(): void;
}

class Car implements Alarm, Light {
    alert() {
        console.log('Car alert');
    }
    lightOn() {
        console.log('Car light on');
    }
    lightOff() {
        console.log('Car light off');
    }
}

一些特殊的场景

键名

如果要去定义一个对象的键和值的类型，就需要如下操作：

interface DataInterface = {
    query?: { [key: string]: number | string };
}

Promise

如果要定义 Promise 的 resolve 和 reject 的值的类型，可以在创建 Promise 时在后面跟上泛型，例如：

function foo(){
    return new Promise<number>((resolve,reject)=>{
        resolve(123)
    });
}

定义Ref

在 react 中定义 ref 时，可以使用 RefObject<> 的形式定义，例如定义一个 inputRef：

const inputRef: RefObject<HTMLInputElement> = useRef(null);

拓展 - typescript笔记

https://hashencode.github.io/post/7d8129ab/

作者

BiteByte

发布于

2020-12-10

更新于

2024-11-15

许可协议

分类

×