TypeScript进阶

亦舒同学
144 阅读7分钟

类型别名

字面意思：类型别名用来给类型起个新名字

语法

使用type创建类型别名

形如

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 进行定义

形如

type EventNames = 'click' | 'scroll' | 'mousemove';
function handleEvent(ele: Element, event: EventNames) {
    // do something
}
handleEvent(document.getElementById('hello'), 'scroll');  // 没问题

handleEvent(document.getElementById('world'), 'dbclick'); // 报错，event 不能为 'dbclick'

元组

数组合并了相同类型的对象，而元组合并了不同类型的对象

形如

定义一对值分别为 string 和 number 的元组：

let tom: [string, number] = ['Tom', 25];

我们可以赋值或者访问它，并且能得到正确的类型

let tom: [string, number];
tom[0] = 'Tom';
tom[1] = 25;

tom[0].slice(1);
tom[1].toFixed(2);

赋值的时候可以只赋值其中的一项

let tom: [string, number];
tom[0] = 'Tom';

当直接对元组类型的变量进行初始化或者赋值的时候，需要提供所有元组类型中指定的项

let tom: [string, number];
tom = ['Tom', 25];

tom = ['Tom']; //错误

// Property '1' is missing in type '[string]' but required in type '[string, number]'.

不能添加越界的元素

let tom: [string, number];
tom = ['Tom', 25];
tom.push('male');
tom.push(true);

image

枚举

枚举（Enum）类型用于取值被限定在一定范围内的场景

语法

使用enum关键字来定义

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};

枚举成员会被赋值为从 0 开始递增的数字，同时也会对枚举值到枚举名进行反向映射

image

手动赋值

enum Days {Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 7); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true

未手动赋值的枚举项会接着上一个枚举项递增 如果未手动赋值的枚举项与手动赋值的重复了，TypeScript 是不会察觉到这一点的，所以不要出现这种覆盖的情况

手动赋值的枚举项可以不是数字，小数或者负数，此时后续未手动赋值的项的递增步长仍为 1

形如

image

常数项和计算所得项

枚举项有两种类型

  • 常数项
  • 计算所得项
enum Color {Red, Green, Blue = "blue".length};

"blue".length就是计算所得项

如果紧接在计算所得项后面的是未手动赋值的项，那么它就会因为无法获得初始值而报错

常数枚举

常数枚举是使用 const enum 定义的枚举类型

const enum Directions {
    Up,
    Down,
    Left,
    Right
}

常数枚举与普通枚举的区别是，它会在编译阶段被删除，并且不能包含计算成员

外部枚举

外部枚举（Ambient Enums）是使用 declare enum 定义的枚举类型

形如

declare enum Directions {
    Up,
    Down,
    Left,
    Right
}

declare 定义的类型只会用于编译时的检查，编译结果中会被删除

类

Ts中类的用法

TS可以使用三种修饰符

  • public：修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public 的
  • private：修饰的属性或方法是私有的，不能在声明它的类的外部访问
  • protected：修饰的属性或方法是受保护的，它和 private 类似，区别是它在子类中也是允许被访问的

属性name设置成public，所以直接访问实例的 name 属性是允许的

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

let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';
console.log(a.name); // Tom

使用 private 修饰的属性或方法，在子类中也是不允许访问的

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

let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';

// index.ts(9,13): error TS2341: Property 'name' is private and only accessible within class 'Animal'.
// index.ts(10,1): error TS2341: Property 'name' is private and only accessible within class 'Animal'.

如果是用 protected 修饰，则允许在子类中访问

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

class Cat extends Animal {
    constructor(name) {
        super(name);
        console.log(this.name);
    }
}

当构造函数修饰为 private 时，该类不允许被继承或者实例化

class Animal {
    public name;
    private constructor (name) {
        this.name = name;
  }
}
class Cat extends Animal {
    constructor (name) {
        super(name);
    }
}

let a = new Animal('Jack');

// index.ts(7,19): TS2675: Cannot extend a class 'Animal'. Class constructor is marked as private.
// index.ts(13,9): TS2673: Constructor of class 'Animal' is private and only accessible within the class declaration.

当构造函数修饰为 protected 时，该类只允许被继承

class Animal {
    public name;
    protected constructor (name) {
        this.name = name;
  }
}
class Cat extends Animal {
    constructor (name) {
        super(name);
    }
}

let a = new Animal('Jack');

// index.ts(13,9): TS2674: Constructor of class 'Animal' is protected and only accessible within the class declaration

参数属性

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

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

readonly

只读属性关键字，只允许出现在属性声明或索引签名或构造函数中。

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

let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';

// index.ts(10,3): TS2540: Cannot assign to 'name' because it is a read-only property.

注意如果 readonly 和其他访问修饰符同时存在的话，需要写在其后面。

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

抽象类

抽象类是不允许被实例化的

abstract class Animal {
    public name;
    public constructor(name) {
        this.name = name;
    }
    public abstract sayHi();
}

let a = new Animal('Jack');

// index.ts(9,11): error TS2511: Cannot create an instance of the abstract class 'Animal'.

抽象类中的抽象方法必须被子类实现

abstract class Animal {
    public name;
    public constructor(name) {
        this.name = name;
    }
    public abstract sayHi();
}

class Cat extends Animal {
    public sayHi() {
        console.log(`Meow, My name is ${this.name}`);
    }
}

let cat = new Cat('Tom');

我们实现了抽象方法 sayHi，编译通过了

类与接口

接口（Interfaces）可以用于对「对象的形状（Shape）」进行描述，也可以对类的一部分行为进行抽象

类实现接口

一般来讲，一个类只能继承另外一个类，有时候不同的类之间有一些共有的特性，就可以被提取成接口 使用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 Alarm {
    alert(): void;
}

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

接口继承类

  • 面向语言中，接口是不能继承类的，但是在TS中是可以的
  • 接口继承类的时候，也只会继承它的实例属性和实例方法

为什么可以呢？

实际上，当我们在声明 class Point 时，除了会创建一个名为 Point 的类之外，同时也创建了一个名为 Point 的类型（实例的类型）

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

interface Point3d extends Point {
    z: number;
}

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

泛型

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性

泛型其实是一种让程序编写更方便的工具，它解决的是在有类型要求的语言中，当我们需要对多种类型执行相同操作的时候，需要重复编写同样代码的问题。 我们定义一个函数、类或者接口，往往类型都固定写死了，但有的时候同样的函数或类除了类型是不一样的，其他操作都一样，于是就可以把类型这个东西也抽离出来，不作为一个写死的编码，而是作为一个类似变量的存在。这样在我们使用的时候再去告诉这段代码，这里的泛型的具体执行类型是什么

声明合并

如果定义了两个相同名字的函数、接口或类，那么它们会合并成一个类型

我们可以将函数合并 接口合并【接口中方法的合并】


合并的属性的类型必须是唯一的

interface Alarm {
    price: number;
}
interface Alarm {
    weight: number;
}

相当于

interface Alarm {
    price: number;
    weight: number;
}
-------------------------
interface Alarm {
    price: number;
    alert(s: string): string;
}
interface Alarm {
    weight: number;
    alert(s: string, n: number): string;
}

相当于

interface Alarm {
    price: number;
    weight: number;
    alert(s: string): string;
    alert(s: string, n: number): string;
}

类的合并同接口的合并规则

至此 Ts进阶语法部分完结

之后会更新实战部分..

avatar
文章
阅读
粉丝
相关推荐
TypeScript 进阶手册
2.5k阅读
 · 
15点赞
Typescript 进阶类型
2.3k阅读
 · 
5点赞
TypeScript高级进阶
1.8k阅读
 · 
28点赞
vue + typescript 进阶篇
4.5k阅读
 · 
67点赞
【Typescript】- Typescript进阶
1.1k阅读
 · 
1点赞
小册上新 | TypeScript 全面进阶指南
11k阅读
 · 
22点赞
TypeScript 进阶经验总结
1.2k阅读
 · 
13点赞
typescript 进阶
225阅读
 · 
3点赞
Typescript 语法进阶
590阅读
 · 
4点赞
TypeScript进阶, 如何避免 any
4.8k阅读
 · 
30点赞

友情链接：