类型推断和联合类型

类型推断

TS在没有明确的指定类型时会推测一个类型,分为两种情况。1.定义变量时直接给变量赋值,则定义类型为对应的类型。2.定义变量时没有赋值,则会定义类型为any类型。

如果声明变量时没有明确指定类型但是已经初始赋值过,会根据初始赋值进行类型推论并明确给变量指定推论的类型,之后再次被赋值时不可改变赋值的类型。如果定义的时候没有赋值,不管之后有没有赋值,都会被推断成 any 类型就不会被类型检查,相当于any类型会跳过编译,被静默了。

js 复制代码
let number = 'seven';
number = 7;
//编译报错,Type 'number' is not assignable to type 'string'.
以上代码等价于
let number: string = 'seven';
number = 7;

联合类型

联合类型表示取值可以为多种类型中的一种,联合类型使用 | 分隔每个类型,表示或的意思。

js 复制代码
let number: string | number;
//编译通过
number = 'six';
number = 6;
//编译报错
number = true

这里的 let number: string | number 的含义是,允许number变量的类型是 string 或者number,但是不能是其他类型。

当TypeScript不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型里共有的属性或方法

js 复制代码
function getLength(something: string | number): number {
    return something.length;
}

length 不是 string 和 number 的共有属性,所以会报错。而访问 string 和 number 的共有属性编译是可以通过的

js 复制代码
function getString(something: string | number): string {
    return something.toString();
}

联合类型的变量在被赋值的时候,也会推断出一个类型。

js 复制代码
let number: string | number = 6;
number = 'seven';//再次赋值,走类型推断,给变量定义一个类型为string
console.log(number.length); // 5
number = 7;//最终变量number的类型为number类型,可以使用number类型的所有属性和方法
console.log(number.length); // 编译时报错
//Property 'length' does not exist on type 'number'.

上例中,number = 'seven'; 被推断成了 string,访问它的 length 属性不会报错。而number = 7;被推断成了 number,访问它的 length 属性时就报错了。

相关推荐
那年窗外下的雪.8 分钟前
鸿蒙ArkUI布局与样式进阶(十二)——自定义TabBar + class类机制全解析(含手机商城底部导航案例)
开发语言·前端·javascript·华为·智能手机·harmonyos·arkui
IT_陈寒25 分钟前
Python性能优化:5个被低估但效果惊人的内置函数实战解析
前端·人工智能·后端
00后程序员张28 分钟前
Fiddler使用教程,全面掌握Fiddler抓包工具的配置方法、代理设置与调试技巧(HTTPHTTPS全解析)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
前端架构师-老李41 分钟前
15、Electron专题:使用 electron-store 进行本地数据存储
前端·javascript·electron
小白学大数据42 分钟前
双管齐下:结合显式等待与Timeout处理复杂Ajax网页
前端·javascript·ajax
Rysxt_1 小时前
Electron 教程:从背景到 Vue3 桌面应用开发
前端·javascript·electron
luckyPian1 小时前
前端+AI:CSS3(二)
前端·css·css3
JiKun1 小时前
一键配置 Web 前端开发环境(PowerShell 自动化脚本)
前端·windows·程序员
合作小小程序员小小店1 小时前
web网页开发,在线%考试,教资,题库%系统demo,基于vue,html,css,python,flask,随机分配,多角色,前后端分离,mysql数据库
前端·vue.js·后端·前端框架·flask