关于Typescript中的类型别名

类型别名

在JavaScript中,我们可以使用变量声明(let、const和var)为值声明别名,那么同样,在Typescript中,我们还可以为类型声明别名,例:

ts 复制代码
type Age = number
type Person = {
    name: string,
    age: Age
}

Age就是一个number,这样可以让Person的结构定义更易于理解,Typescript无法推导类型别名,所以必须显示注解:

ts 复制代码
let age: Age = 18
let xiaoniu: Person = {
    name: 'Mars',
    age: age
}

由于Age是number的别名,所以可以直接给number赋值

ts 复制代码
let age = 18
let xiaoniu: Person = {
    name: 'Mars',
    age: age
}

如上,没有问题

不能重复声明同一类型

我们知道,在JavaScript中,let/const不能两次声明同一个变量,var两次声明同一个变量时,虽然并不会报错,但也只是对值进行了覆盖。那么在Typescript中同一个类型也同样不能声明两次:

ts 复制代码
type Color = 'red'
type Color = 'blue'  // 标识符"Color"重复

此时移动光标可以发现编辑器报出的警告

作用域

在JavaScript中let、const采用的是块级作用域,类似地,类型别名采用的也是块级作用域。每一块代码和每一个函数都有自己的作用域,内部的类型别名将遮盖外部的类型别名:

ts 复制代码
type Color = 'red'
let x = Math.random() < .5
// 和let和const一样,类型别名使用的是块级作用域
if (x) {
    type Color = 'blue'
    let b: Color = 'blue'
    // console.log(x, b)
} else {
    let c: Color = 'red'
    // console.log(x, c)
}

看完上边的例子,相信你已经知道类型别名的作用了:它可以有助于我们减少重复输入复杂类型,还可以更加清楚地表明变量的作用

相关推荐
大鸡爪几秒前
Vue3 组件库实战(五):Icon 图标组件的设计与实现
前端·vue.js
bluceli1 分钟前
前端测试实战指南:构建高质量代码的完整体系
前端·测试
行走的陀螺仪1 分钟前
前端公共库开发保姆级路线:从0到1复刻VueUse官方级架构(pnpm+Turbo+VitePress)
前端·架构
顽固_倔强1 分钟前
深入理解 Vue3 数据绑定实现原理
前端·面试
前端付豪2 分钟前
组件拆分重构 App.vue
前端·架构·代码规范
Wect2 分钟前
React 更新触发原理详解
前端·react.js·面试
cxxcode2 分钟前
Web 帧渲染与 DOM 准备
前端
光影少年3 分钟前
React Hooks的理解?常用的有哪些?
前端·react.js·掘金·金石计划
大鸡爪3 分钟前
Vue3 组件库实战(七):从本地到 NPM:版本管理与自动化发布指南(下)
前端·vue.js
幸福摩天轮4 分钟前
记录commonjs的一道面试题
前端