TypeScript | 青训营笔记

戴兜
77 阅读3分钟

这是我参与「第五届青训营」伴学笔记创作活动的第 4 天

本堂课重点内容

  1. TypeScript 定义解析
  2. TypeScript 基础语法

详细知识点介绍

JavaScript 是动态类型的语言，而TypeScript顾名思义是静态类型的语言。与js相比，静态类型的特性为ts带来了许多优势，例如：更强的可读性、更强的可维护性、大型项目中提升稳定性和开发效率。而作为js的超集，ts兼容所有js特性，且支持与js共存，能够渐进式地引入和升级。

基础数据类型

TypeScript能够在变量名称后面添加冒号和期望的类型来为变量赋予具体的类型，例如下面的代码，常见的类型有 string number boolean null undefined

let a: string = "string";
let b: number = 123;
let c: boolean = true;

如果在之后尝试给变量赋值不同类型的值，将会产生报错

对象类型

ts使用interface关键字来定义新类型

interface ICustomObject {
    name: string;
    age: number;
    hobby?: string;
    readonly id: number;
}

const obj: ICustonObject {
    name: "hello world",
    age: 12,
    hobby: 'coding',
    id: 10
}

对于只读属性，可以在类型定义时增加readonly修饰符，在之后倘若修改只读属性，将会报错。在属性名后面紧跟问号表示该属性可选（可能不存在），后续倘若直接读取该属性，将导致报错（需要先判断该属性是否存在）

一般情况下，约定自定义类型以大写字母I开头，例如上面的 ICustomObject

特殊情况

在某些情况下，对象的键名（key）可能并不固定，比如我希望某个对象键名是任意string，键值是布尔型，那么可以向下面这样定义

interface IObj {
    [key: string]: boolean;
}

或者使用 type 关键字

type IObj = Record<string, boolean>;

函数类型

假设有一个js函数 add

function add(x, y) {
    return x + y;
}

为其添加类型声明后

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

对于匿名的箭头函数，我们也可以为其添加类型

// js
const add = (x, y) => x + y;

// ts
const add: (x: number, y: number) => number = (x, y) => x + y;

或许在某些情况下，将类型和函数写在一起会稍显凌乱，那么我们也可以将函数类型单独定义，例如下面这样

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

const add: IAdd = (x, y) => x + y;

数组类型

数组的类型定义有很多方法，最常见的是像c语言那样的类型定义

type IArray = number[];

const array: IArray = [1, 2, 3, 4, 5];

同样也可以使用ts提供的Array泛型，是一样的效果

type IArray = Array<number>;

const array: IArray = [1, 2, 3, 4, 5];

因为数组实际上就是键名特殊的对象，所以也可以用表示对象的方法来表示

interface IArray {
    [key: number]: number;
}

const array: IArray = [1, 2, 3, 4, 5];

TS 新增的类型

为了实现一些特殊需求，ts也新增了许多类型方便使用

空类型

function test(): void {
    alert("hello")
}

顾名思义，表示无赋值，例如函数没有返回值

任意类型

type IArray = Array<any>;

const array: IArray = [1, "string", true, {a: 1}];

枚举类型

该类型能够通过枚举名查枚举值，同时能够使用枚举值查枚举名

enum EnumTest {
    man = 'male',
    woman = 'female',
}

EnumTest['man'] === 'male'
EnumTest['male'] === 'man'

在不提供枚举名的时候，将默认为由0开始的索引值

enum EnumWeekDay { Mon, Tue, Wed, Thu, Fri }

EnumTest['Mon'] === 0
EnumTest['Tue'] === 1

课后个人总结

TypeScript通过一套特殊的语法，为js带来了类型声明和检查，为大型项目的工程化协作提供了极大的便利，上面的语法也仅仅只是TypeScript的冰山一角，更多的ts语法可以参考官方文档的说明 www.typescriptlang.org/docs/

avatar
文章
阅读
粉丝