2.TypeScript入门之TS常用类型(1)

Ⅲ.TypeScript常用类型

概述：TS 提供了 JS 的所有功能，并且额外的增加了：类型系统。

所有的 JS 代码都是 TS 代码。
JS 有类型（比如：number/string等），但是 JS 不会检查变量的类型是否发生变化。而 TS 会检查。

TypeScript 类型系统的主要优势：可以显示标记出代码中的意外行为，从而降低了发生错误的可能性。

3.1 类型注解

示例代码：

let age: number = 18

说明：代码中的 : number 就是类型注解。

作用：为变量添加类型约束。比如，上述代码中，约定变量age的类型为number（数值类型）。

解释：约定了什么类型，就只能给变量赋值该类型的值，否则，就会报错。
在这里插入图片描述

3.2 常用基础类型概述

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

JS已有类型
- 原始类型：number/string/boolean/null/undefined/symbol。
- 对象类型：Object（包括：数组，对象，函数等）。
TS 新增类型
- 联合类型、自定义类型（类型别名）、接口、元组、字面量类型、枚举、void、any等。

3.3 原始类型

number/string/boolean/null/undefined/symbol。

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

let age: number = 18
let myName: string = '刘老师'
let isLoading: boolean = false
//等等...

3.4 数组类型

特点：对象Object类型，在 TS 中更加细化，每个具体的对象都有自己的类型语法。

数组类型的两种写法：（推荐使用number[]写法）

let numbers: number[] = [1,3,5]
let strings1: string[] = ['a','b','c']
let strings2: Array<string> = ['a','b','c']

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

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

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

注意：这是 TS 中联合类型的语法，只有一根竖线（ | ），不要与 JS 中的或（||）混淆了。

3.5 类型别名

类型别名（自定义类型）：为任意类型起别名。

使用场景：当同一类型（复杂）被多次使用时，可以通过类型别名，简化该类型的使用。

type CustomArray = (number | string)[]
let arr1: CustomArray = [1,'a',3,'b']
let arr2: CustomArray = ['x','y',6,7]

解释：

使用 type 关键字来创建类型别名。
类型别名（比如：此处的CustomArray），可以是任意合法的变量名称。
创建类型别名后，直接使用该类型别名作为变量的类型注解即可。

3.6 函数类型

函数的类型实际上指的是：函数参数和返回值的类型。

为函数指定类型的两种方式：1.单独指定参数，返回值类型。2.同时指定参数、返回值类型。

1.单独指定参数、返回值的类型：

function add1(num1: number, num2: number): number {
    
    
  return num1 + num2
}

const add2 = (num1: number, num2: number): number => {
    
    
  return num1 + num2
}

2.同时指定参数、返回值类型：

const add: (num1: number, num2: number) => number = (num1, num2) => {
    
    
  return num1 + num2
}

解释：当函数作为表达式时，可以通过类似箭头函数形式的语法来为函数添加类型。

注意：这种形式只适用于函数表达式

3.如果函数没有返回值，那么，函数返回值类型为：void（空）。

function greet(name: string): void {
    
    
  console.log('hello',name)
}

greet('jack')    // 结果为： hello jack

4.使用函数实现某个功能时，参数可以传也可以不传。这种情况下，在给函数参数指定类型时，就用到可选参数了。

比如：数组的slice方法，可以slice()也可以slice(1)还可以slice(1,3)。

slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

slice()的返回值：一个新的字符串。包括字符串 stringObject 从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符。

function mySlice(start?: number, end?: number): void {
    
    
  console.log('起始索引：',start,'结束索引：',end)
}

可选参数：在可传可不传的参数名称后面添加 ?(问号)。

注意：可选参数只能出现在参数列表的最后，也就是说可选参数后面不能再出现必选参数。
~~
~~
下一章节：3.TypeScript入门之TS常用类型(2)