TypeScript类型注解和类型推断

2023-11-14

类型注解和类型推断

//类型注解
let count:number ;

count = 123;

这段代码就是类型注解,意思是显示的告诉代码,我们的count变量就是一个数字类型,这就叫做类型注解。

当你明白了类型注解的概念之后,再学类型推断就更简单了,先来看一段代码。还是下面的代码。

let countInference = 123;

这时候我并没有显示的告诉你变量countInference是一个数字类型,但是如果你把鼠标放到变量上时,你会发现 TypeScript 自动把变量注释为了number(数字)类型。

使用问题

  • 如果 TS 能够自动分析变量类型, 我们就什么也不需要做了
  • 如果 TS 无法分析变量类型的话, 我们就需要使用类型注解

先来看一个不用写类型注解的例子:

const one = 1;
const two = 2;
const three = one + two;

再来看一个用写类型注解的例子:

function getTotal(one, two) {
  return one + two;
}

const total = getTotal(1, 2);

这种形式,就需要用到类型注释了,因为这里的one和two会显示为any类型。这时候如果你传字符串,你的业务逻辑就是错误的,所以你必须加一个类型注解,把上面的代码写成下面的样子。

function getTotal(one: number, two: number) {
  return one + two;
}

const total = getTotal(1, 2);

这里有的一个问题是,为什么total这个变量不需要加类型注解,因为当one和two两个变量加上注解后,TypeScript 就可以自动通过类型推断,分析出变量的类型。

当然 TypeScript 也可以推断出对象中属性的类型,比如现在写一个小姐姐的对象,然后里边有两个属性。

const XiaoJieJie = {
  name: "翠花",
  age: 18,
};

写完后你把鼠标放在XiaoJieJie对象上面,就会提示出他里边的属性,这表明 TypeScript 也分析出了对象的属性的类型。

在写 TypeScript 代码的一个重要宗旨就是每个变量,每个对象的属性类型都应该是固定的,如果你推断就让它推断,推断不出来的时候你要进行注释。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

TypeScript类型注解和类型推断 的相关文章

随机推荐

  • 毕业设计-基于机器视觉的甘蔗茎秆识别方法-OpenCV

    目录 前言 课题背景和意义 实现技术思路 一 总体思路 二 图像处理 三 甘蔗识别 四 结 语 实现效果图样例 最后 前言 大四是整个大学期间最忙碌的时光 一边要忙着备考或实习为毕业后面临的就业升学做准备 一边要为毕业设计耗费大量精力 近几
  • OpenCV中的图像处理

    颜色空间转换 1 基本读写操作 import cv2 import numpy as np img cv2 imread MyPic png cv2 IMREAD GRAYSCALE print img shape cv2 imwrite
  • winusb —— 不再为你的usb设备编写驱动

    blog csdn net lanmanck 曾几何时我们找工作还发现有个驱动工程师职位 月薪也不低 没接触过的人代码压根看不懂 今天可好了 如果不太追求差异化 不用驱动也能让系统与USB设备通信了 Linux就不说了 libusb很好用
  • nginx服务器启动、停止、重启

    启动nginx nginx c path to nginx conf 关闭nginx nginx s stop 快速停止nginx quit 完整有序的停止nginx 重启nginx nginx s reload 修改配置后重新加载生效 n
  • org.springframework.validation.BindException: org.springframework.

    错误信息 org springframework validation BindException org springframework validation BeanPropertyBindingResult 2 errors Fiel
  • Vue实现在页面上添加返回顶部按钮(按钮固定在页面右下角)

    从网站上下载按钮图片 我在图精灵上下载图片到项目src文件夹下的assets文件夹 并命名为topButton png 可以用本地的图片编辑软件 如画图 将按钮图片设置为像素50 50 在App vue文件夹下引入图片 为click事件设置
  • Linux内存宏,linux内核驱动宏定义

    宏符号linux内核中绝大多数初始化函数和变量都利用了各式各样的宏符号 形如 static int init pci porc init void static char version devinitdata drv name modul
  • Eclipse ADT中的logcat不显示解决方法

    1 在Eclipse界面中找到DDMS 然后找到device选项卡 在这个选项卡中选择reset adb 如果不行尝试方法2 2 不用关闭eclipse和模拟器 在Android SDK的tools目录下有个 ddms bat 批处理文件
  • index_join:

    index join index join顾名思义是对index进行关联 oracle通过hash index join的方式实现了避免对表的访问 所有的数据都从索引中直接获得 它不受查询条件影响 可以是唯一索引 也可以是多列索引 SELE
  • [Unity2D/3D]Particle System粒子系统/以实现烟雾效果为例

    Unity3D Particle System粒子系统 首先看一下效果 1 创建一个Particle System 右键Effects gt Particle System Pause暂停播放粒子效果 Restart重新播放粒子系统 Sto
  • Direct3D轮回:游戏特效之全屏泛光(Bloom)

    https www cnblogs com kenkao archive 2011 08 25 2153752 html Bloom 又称 全屏泛光 是大名鼎鼎的虚幻3游戏引擎中最通用的后期特效技术 Bloom特效的实现主要依赖于PostP
  • 用实例给新手讲解RSA加密算法

    http www cfca com cn zhishi wz 012 htm 用实例给新手讲解RSA加密算法 图为 RSA公开密钥算法的发明人 从左到右Ron Rivest Adi Shamir Leonard Adleman 照片摄于19
  • SpringMVC 框架详解

    目录 1 什么是 Spring MVC 1 1 什么是MVC 1 2 MVC 和 Spring MVC 的关系 2 第一个SpringMVC程序 2 1 RequestMapping 注解 2 2 ResponseBody 注解 2 3 g
  • opencv函数:flip函数

    flip函数是矩阵或者图像翻转 其实图像的本质也是矩阵 void flip InputArray src OutputArray dst int flipCode 参数 src 输入矩阵 dst 翻转后矩阵 类型与src一致 flipCod
  • CTS Failed 项解决

    CTS Failed 项解决 CtsWindowManagerDeviceTestCases Test android server wm MultiDisplaySystemDecorationTests testLaunchSecond
  • idea连接数据库实现增删改查

    连接数据库 在application properties中编写代码实现数据库连接 创建Student类 编写插入到数据库里的信息 id name等 并创建set get tostring方法 创建接口 创建StudentImp类实现Stu
  • 安居客滑块js逆向 - 逻辑详解

    注 本篇博客仅供学习使用 请勿用做其他商业用途 如有侵权 请联系本菜鸟 本菜鸟在最近的学习过程中又遇到了一个带有滑块的验证码 觉得有点意思 所以写这篇博客记录一下 对比而言 难度比某验和某盾的简单一丢丢 目标网址 aHR0cHM6Ly93d
  • logback appender简介说明

    转自 logback appender简介说明 下文笔者讲述logback的appender的简介说明 如下所示 logback中appender是负责写日志的组件 appender的功能 用于设置日志输出的目的地 日志输出的位置可为控制台
  • 惨痛的教训,疫情下失业的中年程序员

    最近身边的一个朋友突然间就被辞退了 而且是一线互联网大厂 周末跟我聚了下 喝了点小酒 聊了很多 他说我可以把他的经历发出来 因为他已经看淡了 只要不提他名字就行 我本来不擅长写这种文章 让他把心路历程写了一遍 写完发现简直没法看 这两天被我
  • TypeScript类型注解和类型推断

    类型注解和类型推断 类型注解 let count number count 123 这段代码就是类型注解 意思是显示的告诉代码 我们的count变量就是一个数字类型 这就叫做类型注解 当你明白了类型注解的概念之后 再学类型推断就更简单了 先