TypeScript学习笔记（三）

小徐今天学习了吗
128 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第29天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章TypeScript学习笔记（二）中，我们学习了TypeScript的相关知识点，包括如何安装编译 TS 的工具包、编译并运行 TS 代码、简化运行 TS 的步骤、类型注解等相关知识点。在本篇文章中，我们将学习TypeScript的相关知识点，包括TypeScript的原始类型、数组类型、联合类型、类型别名等内容。

原始类型

可以将 TS 中的常用基础类型细分为两类：1 JS 已有类型 2 TS 新增类型。

  1. JS 已有类型
  • 原始类型：number/string/boolean/null/undefined
  • 对象类型：object（包括，数组、对象、函数等对象）
  1. TS 新增类型

TS 新增类型有联合类型、自定义类型(类型别名)、接口、元组、字面量类型、枚举、void、any 等。

注意：

  1. 原始类型在 TS 和 JS 中写法一致
  2. 对象类型在 TS 中更加细化，每个具体的对象（比如，数组、对象、函数）都有自己的类型语法

原始类型：number/string/boolean/null/undefined。

原始类型的特点是简单，这些类型，完全按照 JS 中类型的名称来书写。

let age: number = 18
let myName: string = '老师'
let isLoading: boolean = false

数组类型

ts中数组类型有两种写法。

// 写法一：
let numbers: number[] = [1, 3, 5]
// 写法二：
let strings: Array<string> = ['a', 'b', 'c']

推荐使用写法一 number[] 写法。

联合类型

联合类型能够将多个类型组合成一个类型。

有一个需求是数组中既有 number 类型，又有 string 类型，这个数组的类型应该如何写?

let arr: (number | string)[] = [1, 'a', 3, 'b']

|（竖线）在 TS 中叫做联合类型，即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种。

  let timer: number | null = null
  timer = setInterval(() => {}, 1000)

  // 定义一个数组，数组中可以有数字或者字符串, 需要注意 | 的优先级
  let arr: (number | string)[] = [1, 'abc', 2]

类型别名

类型别名（自定义类型）可以为任意类型起别名。它的使用场景是当同一类型（复杂）被多次使用时，可以通过类型别名，简化该类型的使用。

使用 type 关键字来创建自定义类型。类型别名（比如，此处的 CustomArray）可以是任意合法的变量名称， 推荐使用大写字母开头。创建类型别名后，直接使用该类型别名作为变量的类型注解即可。

type CustomArray = (number | string)[]

let arr1: CustomArray = [1, 'a', 3, 'b']
let arr2: CustomArray = ['x', 'y', 6, 7]
avatar
文章
阅读
粉丝