【TypeScript】语法详解 - 类型操作

素颜马尾好姑娘i 2024-04-27 15:56 6阅读 0赞

#### 文章目录 ####

*   *  TypeScript中的类型操作
     *   *  🍤函数的参数类型
         *  🍤函数返回值类型
         *  🍤匿名函数的参数
         *  🍤接收对象的类型
         *  🍤对象的可选类型
         *  🍤联合类型的使用
         *  🍤联合和可选关系
         *  🍤类型注解的别名

### TypeScript中的类型操作 ###

#### 🍤函数的参数类型 ####

**函数是JavaScript非常重要的组成部分， TypeScript允许我们指定函数的参数和返回值的类型**。

参数的类型注解

> 声明函数时，可以在每个参数后添加类型注解，以声明函数接受的参数类型：

function foo(name: string) {
        
      console.log("my name is" + name)
    }
    
    foo("chenyq")

> 为函数的参数添加类型注解后, 若再传入其他类型的参数, 或者不穿参数, 多传参数都会编译报错

![在这里插入图片描述][51e023e1a60840c1a641db23ace33298.png_pic_center]

--------------------

#### 🍤函数返回值类型 ####

**我们也可以添加返回值的类型注解，这个注解出现在函数列表的后面**：

function sum(num1: number, num2: number): number {
        
      return num1 + num2
    }
    
    sum(10, 20)

**和变量的类型注解一样，我们通常情况下不需要返回类型注解，因为TypeScript会根据 return 返回值推导出函数的返回类型**：

> 某些第三方库处于方便使用者理解，会明确指定返回类型，但是这个看个人喜好；

--------------------

#### 🍤匿名函数的参数 ####

通常情况下, 在定义一个函数时, 都会给参数加上类型注解的

**但是匿名函数与函数声明会有一些不同**：

> 当一个函数出现在TypeScript可以确定该函数会被如何调用的地方时；
> 
> 该函数的参数会自动指定类型；

const names = ["aaa", "bbb", "ccc"]
    names.forEach((item) => {
        
      console.log(item)
    })

**我们并没有指定item的类型注解(当然也可以添加类型注解)，但是item是一个string类型**：

> 这是因为TypeScript会根据forEach函数的类型以及数组的类型推断出item的类型；
> 
> 这个过程称之为上下文类型（ contextual typing），因为函数执行的上下文可以帮助确定参数和返回值的类型；

--------------------

#### 🍤接收对象的类型 ####

**如果我们希望限定一个函数接受的参数是一个对象，这个时候要如何限定呢？**

> 我们可以使用对象类型；

function printCoordinate(print: {
        x: number, y: number}) {
        
      console.log("x坐标:", print.x)
      console.log("y坐标:", print.y)
    }
    
    printCoordinate({
        x: 110, y: 310})

**在这里我们使用了一个对象来作为类型**：

> 在对象我们可以添加属性，并且告知TypeScript该属性需要是什么类型；
> 
> 属性之间可以使用`,`或者`;`来分割，最后一个分隔符是可选的；
> 
> 每个属性的类型部分也是可选的，如果不指定，那么就是any类型；

--------------------

#### 🍤对象的可选类型 ####

**对象类型也可以指定哪些属性是可选的，可以在属性的后面添加一个`?`**：

> 例如上面代码中, 我们再添加对象的第三个属性z坐标, 而这个属性是可选的, 可以传可以不传

function printCoordinate(print: {
        x: number, y: number, z?: number}) {
        
      console.log("x坐标:", print.x)
      console.log("y坐标:", print.y)
    
      if(print.z) {
        
        console.log("z坐标:", print.z)
      }
    }
    
    printCoordinate({
        x: 110, y: 310})
    // z属性可选的, 可以传可以不传
    printCoordinate({
        x: 110, y: 130, z: 190})

**可选类型还有很多内容, 我放在本篇文章的后面给大家讲解, 先在这里初步认识一下可选类型**

--------------------

#### 🍤联合类型的使用 ####

TypeScript的类型系统允许我们使用多种运算符，从现有类型中**构建新类型**。

**我们来使用第一种组合类型的方法：联合类型（ Union Type）**

> 联合类型是由两个或者多个其他类型组成的类型；
> 
> 表示可以是这些类型当中的任何一个值；
> 
> 联合类型中的每一个类型被称之为联合成员（ union’s members）；

// 定义一个函数, 打印id, id可能为number, 可能为string
    function printID(id: number | string) {
        
      console.log(id)
    }
    
    printID("123")
    printID(456)

**传入给一个联合类型的值是非常简单的：只要保证是联合类型中的某一个类型的值即可**

> 但是我们拿到这个值之后，我们应该如何使用它呢？因为它可能是任何一种类型, 因此我们在使用联合类型是需要特别小心。
> 
> 比如我们拿到的值可能是string或者number，如果拿到number, 我们就不能对其调用string上的一些方法, 反之同理；

**那么我们怎么处理这样的问题呢？**

> 我们需要使用缩小（ narrow）联合（后续我还会专门讲解缩小相关的功能）；
> 
> TypeScript可以根据我们缩小的代码结构，推断出更加具体的类型；

*  例如当id为字符串时, 我们将其全部转换为大写; 当id为数字时就直接打印

function printID(id: number | string) {
        
      if (typeof id === 'string') {
        
        console.log(id.toUpperCase())
      } else {
        
        console.log(id)
      }
    }
    
    printID("aaa")
    printID(123)

--------------------

#### 🍤联合和可选关系 ####

**例如我们有如下一个函数, 这个函数有一个参数, 且是可选类型的**

function foo(message?: string) {
        
      console.log(message)
    }
    
    foo() // 不写参数, 本质上相当于传入了一个undefined
    foo("abc")

**其实本质上，可选类型可以看做是 `类型` 和`undefined` 的联合类型**：

> 因此上面代码可以写成下面这样

function foo(message: string|undefined) {
        
      console.log(message)
    }
    
    foo(undefined) // 此时若不想传入参数, 不能不传, 必须明确传入undefined
    foo("abc")

--------------------

#### 🍤类型注解的别名 ####

> 在前面，我们通过在类型注解中编写对象类型和联合类型，但是当我们想要多次在其他地方使用时，就要编写多次。
> 
> 并且类型注解的对象类型和联合对象的代码有时候过于长了一些

**比如我们可以给对象类型或者联合类型起一个别名, 解决编写多次, 或代码过长的弊端**：

> 定义类型注解别名通过`type关键字`

// 为对象类型的类型注解取别名
    type Point = {
        
      // 可以用 "," 或 ";"分隔, 使用","可以省略
      x: number
      y: number
      z?: number
    }
    
    function printPoint(print: Point) {
        
      console.log("x坐标:", print.x)
      console.log("y坐标:", print.y)
    
      if(print.z) {
        
        console.log("z坐标:", print.z)
      }
    }
    
    function sumPoint(print: Point) {
        
      console.log(print.x + print.y)
    
      if(print.z) {
        
        console.log("z坐标:", print.z)
      }
    }
    
    printPoint({
        x: 110, y: 310})
    sumPoint({
        x: 110, y: 130, z: 190})

// 为联合类型的类型注解添加别名
    type IDType = number | string
    
    function printID(id: IDType) {
        
      if (typeof id === 'string') {
        
        console.log(id.toUpperCase())
      } else {
        
        console.log(id)
      }
    }
    
    printID(123)
    printID("aaa")

[51e023e1a60840c1a641db23ace33298.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/6a22f0394c5f4df1907f3a11de5e4761.png