TypeScript 类型别名（Type Aliases）

最新推荐文章于 2024-11-22 20:24:15 发布

原创最新推荐文章于 2024-11-22 20:24:15 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #javascript #前端

类型别名在TypeScript中用于给复杂或重复类型起别名，提高代码可读性。例如，N1代表number、string或boolean的联合类型。示例中展示了如何用N1定义数组变量timer。同时，文章讨论了函数类型的注解，包括普通函数和箭头函数，并展示了如何结合类型别名定义函数类型。

在 TypeScript 中，类型别名（Type Aliases）是一种给现有类型起别名的方式。它可以帮助提高代码的可读性和可维护性，尤其是当你需要使用复杂或重复的类型注解时。

基本使用

// 类型别名 type
type N1 = (number | string | boolean)

let timer:N1[] = [12, 34, '君不见', false]

console.log(timer)

本段代码使用了类型别名 N1 来表示一个可以是 number、string 或者 boolean 类型的联合类型。接下来，声明了一个名为 timer 的数组变量，其元素的类型为 N1[]，即 N1 类型的数组。

在初始化 timer 数组时，使用了不同类型的值，包括 12（number 类型）、34（number 类型）、'君不见'（string 类型）和 false（boolean 类型）。

最后，使用 console.log(timer) 打印了 timer 数组。

根据以上代码逻辑，类型注解和初始化值的结合是正确的，不会引发类型错误。如果 timer 数组的内容符合类型别名 N1 的定义，那么它将被编译器接受。

函数类型的使用

// 函数类型
// 普通函数注解
function add(a:number ,b:number):number {
  return a + b
}
// 箭头函数注解
let addFn = (a:number ,b:number):number => {
  return a * b
}

// 函数注解 + 类型别名
type Fn = (a:number ,b:number) => number

let add2:Fn = (a, b) => {
  return a + b
}
let addFn2:Fn = (a, b) => {
  return a * b
}

console.log(add(12, 13), addFn(2, 3), add2(12, 13), addFn2(2, 3))