typescript利用接口类型声明变量_Typescript 使用笔记

每日前端夜话第350篇

本文转自公众号：前端日志

作者：lmjben

正文共：约 5000 字

预计阅读时间：10 分钟

最近这两年，有很多人都在讨论 Typescript，无论是社区还是各种文章都能看出来，整体来说正面的信息是大于负面的，这篇文章就来整理一下我所了解的 Typescript。

本文主要分为 3 个部分：

• Typescript 基本概念

• Typescript 高级用法

• Typescript 总结

Typescript 基本概念

至于官网的定义，这里就不多做解释了，大家可以去官网查看 Typescript 设计目标^[1]

我理解的定义：赋予 Javascript 类型的概念，让代码可以在运行前就能发现问题。

Typescript 都有哪些类型

1、Typescript 基本类型，也就是可以被直接使用的单一类型。

• 数字

• 字符串

• 布尔类型

• null

• undefined

• any

• unknown

• void

• object

• 枚举

• never

2、复合类型，包含多个单一类型的类型。

• 数组类型

• 元组类型

• 字面量类型

• 接口类型

3、如果一个类型不能满足要求怎么办？

• 可空类型，默认任何类型都可以被赋值成 null 或 undefined。

• 联合类型，不确定类型是哪个，但能提供几种选择，如：type1 | type2。

• 交叉类型，必须满足多个类型的组合，如：`type1 & type2。

类型都在哪里使用

在 Typescript 中，类型通常在以下几种情况下使用。

• 变量中使用

• 类中使用

• 接口中使用

• 函数中使用

在变量中使用

在变量中使用时，直接在变量后面加上类型即可。

 1let a: number;
 2let b: string;
 3let c: null;
 4let d: undefined;
 5let e: boolean;
 6let obj: Ixxx = {
    
 7  a: 1,
 8  b: 2,
 9};
10let fun: Iyyy = () => {};

在类中使用

在类中使用方式和在变量中类似，只是提供了一些专门为类设计的静态属性、静态方法、成员属性、构造函数中的类型等。

 1class Greeter {
    
 2    static name:string = 'Greeter'
 3    static log(){
    console.log(‘log')} 4    greeting: string; 5    constructor(message: string) {
     6        this.greeting = message; 7    } 8    greet() {
     9        return "Hello, " + this.greeting;10    }11}12let greeter = new Greeter("world");13

在接口中使用

在接口中使用也比较简单，可以理解为组合多个单一类型。

1interface IData {
    
2  name: string;
3  age: number;
4  func: (s: string) => void;
5}

在函数中使用

在函数中使用类型时，主要用于处理函数参数、函数返回值。

1// 函数参数
2function a(all: string) {}
3// 函数返回值
4function a(a: string): string {}
5// 可选参数
6function a(a: number, b?: number) {}

Typescript 高级用法

Typescript 中的基本用法非常简单，有 js 基础的同学很快就能上手，接下来我们分析一下 Typescript 中更高级的用法，以完成更精密的类型检查。

类中的高级用法

在类中的高级用法主要有以下几点：

• 继承

• 存储器 get set

• readonly 修饰符

• 公有，私有，受保护的修饰符

• 抽象类 abstract

继承和存储器和 ES6 里的功能是一致的，这里就不多说了，主要说一下类的修饰符和抽象类。

类中的修饰符是体现面向对象封装性的主要手段，类中的属性和方法在被不同修饰符修饰之后，就有了不同权限的划分，例如：