TS 入门(二):Typescript类型与类型注解

news2024/11/22 16:53:54

目录

      • 前言
      • 回顾
      • 1. 基本类型
        • 数字类型 (`number`)
        • 字符串类型 (`string`)
        • 布尔类型 (`boolean`)
        • 空值和未定义 (`null` 和 `undefined`)
        • 任意类型 (`any`)
        • `unknown` 类型
        • any 与 unkown 区别
      • 2. 数组和元组类型
        • 数组类型
        • 元组类型
      • 3. 枚举类型
      • 4. 类型注解示例
        • 指定变量类型
        • 函数参数和返回值类型注解
        • 类型推断
      • 结语

前言

在本章中,我们将深入探讨 TypeScript 的基础类型和类型注解。理解这些概念对于有效地使用 TypeScript 是非常重要的。

回顾

在上一章中,我们介绍了如何安装和配置 TypeScript,了解了 tsconfig.json 文件中的各种配置选项,并编写了第一个 TypeScript 文件。在这篇文章中,我们将通过具体的代码示例,深入了解 TypeScript 的基础类型和变量声明。

  • TS 入门(一):TypeScript 简介与安装

在这里插入图片描述

正文开始如果觉得文章对您有帮助,请帮我三连+订阅,谢谢💖💖💖


1. 基本类型

数字类型 (number)

number 类型用于表示数值,可以是整数或浮点数。

let age: number = 25
let height: number = 1.75
字符串类型 (string)

string 类型用于表示文本数据。

let name: string = '张三'
let greeting: string = '欢迎学习 TypeScript!'
布尔类型 (boolean)

boolean 类型用于表示逻辑值,只能是 truefalse

let isStudent: boolean = true
let isAdmin: boolean = false
空值和未定义 (nullundefined)

nullundefined 类型用于表示空值或未定义的值。

let data: null = null
let status: undefined = undefined
任意类型 (any)

any 类型可以表示任意类型的值,编译时可以忽略类型检查。

let value: any = 42
value = '字符串'
value = true
unknown 类型
  • 描述: unknown 类型表示未知类型的值。与 any 类型不同,使用 unknown 类型的变量需要进行类型检查或类型断言才能操作其值。
  • 特性:
    • 类似于 any,可以表示任意类型的值。
    • any 不同的是,使用 unknown 类型的值必须在使用之前进行类型检查或类型断言,以确保类型安全性。
    • 更适合用于不清楚具体类型的情况,例如从动态内容或外部库中获取的值。
let userInput: unknown
let userName: string

userInput = '张三'
userInput = 42

// 需要进行类型检查或类型断言
if (typeof userInput === 'string') {
  userName = userInput // 正确
}

// 类型断言
userName = userInput as string // 正确,但需要确保 userInput 是 string 类型

// 以下操作将导致编译时错误,因为unknown不能直接赋值给字符串
// userName = userInput; // 错误,不能将类型“unknown”分配给类型“string”
any 与 unkown 区别
  • 使用 any 类型时,放弃了 TypeScript 的类型检查机制,而 unknown 类型则要求在使用时进行类型检查或类型断言,以确保代码的类型安全性。
  • 一般来说,应该尽量避免使用 any 类型,因为它会减弱 TypeScript 的类型优势,而 unknown 类型则更适合在需要时进行临时类型推断或处理未知类型的情况。

2. 数组和元组类型

数组类型

数组类型允许你表示一个由特定类型元素组成的数组。

let numbers: number[] = [1, 2, 3, 4, 5]
let names: string[] = ['张三', '李四', '王五']
元组类型

元组类型允许你表示一个已知数量和类型的数组。

let userInfo: [string, number] = ['张三', 25]

3. 枚举类型

枚举类型允许你定义一组命名的常量,默认值是从 0 开始,也可以自定义起始值

enum Direction {
  Up = 1, // 默认是从0 开始
  Down,
  Left,
  Right,
}

let userDirection: Direction = Direction.Up
console.log(userDirection) // 输出: 1 (Up 对应的枚举值)

4. 类型注解示例

指定变量类型

使用类型注解可以明确指定变量的类型。

let age: number = 25
let name: string = '李四'
let isActive: boolean = true
函数参数和返回值类型注解
function sum(a: number, b: number): number {
  return a + b
}

let result: number = sum(10, 20) // 正确
// let error: number = sum("10", "20"); // 错误,类型不匹配
类型推断

TypeScript 可以根据变量的初始值推断其类型。

let inferredAge = 25 // 推断为 number 类型
let inferredName = '王五' // 推断为 string 类型
let inferredIsActive = true // 推断为 boolean 类型

结语

通过本章的学习,你应该对 TypeScript 的基础类型和类型注解有了更深入的理解。在下一章中,我们将继续探讨 TypeScript 中更复杂的函数类型、对象类型以及类型推断和上下文类型等内容。务必掌握好每个概念,它们将为你后续学习 TypeScript 提供坚实的基础。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1926721.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

在浏览器控制台中输出js对象,为什么颜色不同,有深有浅

打开console,输入自定义的javascript对象的时候,打开看发现对象的属性是深紫色,后面有一些对象是浅紫色的,比如Array对象和一堆SVG,HTML,CSS开头的对象,常用的prototype和__proto__也是浅紫色的。 请问这里深紫和浅紫…

9. Python3 Numpy科学计算库

Numpy是Python科学计算库的基础,主要包括: 强大的N维数组对象和向量运算。一些复杂的功能。与C和FORTRAN代码的集成。实用的线性代数运算、傅里叶变换、随机数生成等。 9.1 Numpy基础 Numpy的主要对象是一个均匀的多维数组。Numpy提供了各种函数。可以…

pxe高效网络批量装机

文章目录 一, PXE远程安装服务(一)三种系统装机的方式(二)linux装机1. 加载 Boot Loader2. 加载启动安装菜单3. 加载内核和 initrd4. 加载根文件系统5. 运行 Anaconda 安装向导 (三)实现过程&am…

STM32使用CubeMX创建HAL库工程文件

文章目录 1. STM32CubeMX 2. 界面介绍 3. 使用教程 新建工程 选择芯片界面 ​编辑 配置页面 引脚配置页面 引脚配置界面的颜色指示 配置RCC时钟参数 配置SYS参数 配置时钟树 Project Manager项目管理配置 生成工程文件 KEIL代码编写 1. STM32CubeMX STM32CubeM…

得物六宫格验证码分析

声明(lianxi a15018601872) 本文章中所有内容仅供学习交流使用,不用于其他任何目的,抓包内容、敏感网址、数据接口等均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关! 前言(lianxi a…

【自学网络安全】二、防火墙NAT智能选路综合实验

任务要求: (衔接上一个实验所以从第七点开始,但与上一个实验关系不大) 7,办公区设备可以通过电信链路和移动链路上网(多对多的NAT,并且需要保留一个公网IP不能用来转换) 8,分公司设备可以通过总…

LeetCode 算法:电话号码的字母组合 c++

原题链接🔗:电话号码的字母组合 难度:中等⭐️⭐️ 题目 给定一个仅包含数字 2-9 的字符串,返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下(与电话按键相同)。注意 …

线程-I.MX6U嵌入式Linux C应用编程学习笔记基于正点原子阿尔法开发板

线程 线程概念 简介 线程定义:线程是操作系统进行调度的最小单位,包含在进程内,是进程中的实际执行单元 线程特性:一个线程代表进程中的一个单一顺序控制流,即执行路径 多线程应用:一个进程可以包含多个…

LabVIEW红外热波图像缺陷检

开发使用LabVIEW开发的红外热波图像缺陷检测系统。该系统结合红外热像仪、工业相机和高效的数据采集硬件,实现对工件表面缺陷的自动检测和分析。通过LabVIEW的强大功能,系统能够实时采集、处理和显示红外热波图像,有效提高了检测的精度和效率…

时域分析----移动平均滤波器介绍及其在金融应用示例

介绍 移动平均滤波器(Moving Average Filter)是一种基本但功能强大的信号处理技术,广泛应用于各种数据平滑和去噪任务中。其主要目的是通过对数据进行平均处理,减少随机波动和噪声,从而突出数据中的趋势和规律。移动平…

Win11任务栏当中对 STM32CubeMX 的堆叠问题

当打开多个 CubeMX 程序的时候,Win11 自动将其进行了堆叠,这时候就无法进行预览与打开。 问题分析:大部分ST的工具都是基于 JDK 来进行开发的,Win11 将其识别成了同一个 Binary 但是实际上他们并不是同一个,通过配置…

数据治理项目中,数据运营团队如何搭建能提升数据应用效果?

引言:在数据治理项目中,数据运营团队的搭建对于提升数据应用效果具有关键作用。以下是一些具体的步骤和策略,用于构建高效的数据运营团队以优化数据应用效果: 一、明确团队目标和职责 确定数据应用目标:首先&#xf…

【接口自动化_06课_Pytest+Excel+Allure完整框架集成】

一、logging在接口自动化里的应用 1、设置日志的配置,并收集日志文件 日志的设置需要在pytest.ini文件里设置。这个里面尽量不要有中文 2、debug日志的打印 pytest.ini文件的开关一定得是true才能在控制台打印日志 import allure import pytest from P06_PytestFr…

JavaScript(9) ----this指向问题,bind,call,apply等方法

目录 this指向问题 全局函数调用: 对象方法调用: 构造函数调用: 事件处理: 箭头函数: setTimeout和setInterval 7.使用call、apply或bind call 方法 apply 方法 bind 方法 总结 this指向问题 全局函数调用…

基于conda包的环境创建、激活、管理与删除

Anaconda是一个免费、易于安装的包管理器、环境管理器和 Python 发行版,支持平台包括Windows、macOS 和 Linux。下载安装地址:Download Anaconda Distribution | Anaconda 很多不同的项目可能需要使用不同的环境。例如某个项目需要使用pytorch1.6&#x…

STM32MP135裸机编程:支持内存非对齐访问

0 前言 使用stm32官方可视化初始化代码生成工具STM32CubeMX生成的工程GCC编译选项默认不支持非对齐访问,在我们进行非对齐的访问时就会进入数据异常中断DAbt中。为了解决这一问题,我们需要在GCC编译选项中加上一处配置。 1 操作方法 右键STM32CubeIDE…

ArkTS基础快速入门

初识ArkTS语言 ArkTS:是一门用于开发鸿蒙应用的编程语言。 ArkTS提供了声明式UI范式、状态管理支持等相应的能力,让开发者可以以更简洁、更自然的方式开发应用。 同时,它在保持TypeScript(简称TS)基本语法风格的基础…

启动yarn后,其他节点没有NodeManager

写在前面: 这个问题虽然折磨了我两天,但是原因特别蠢,可能与各位不一定一样,我是因为ResourceManager的节点的"/etc/hadoop/workers"文件没有配置好(没有配hadoop102和hadoop104),但排…

FPGA学习笔记(一) FPGA最小系统

文章目录 前言一、FPGA最小系统总结 前言 今天学习下FPGA的最小系统一、FPGA最小系统 FPGA最小系统与STM32最小系统类似,由供电电源,时钟电路晶振,复位和调试接口JTAG以及FLASH配置芯片组成,其与STM32最大的不同之处就是必须要有…

QQ频道导航退出

若该文为原创文章,转载请注明原文出处 本文章博客地址:https://hpzwl.blog.csdn.net/article/details/140413538 长沙红胖子Qt(长沙创微智科)博文大全:开发技术集合(包含Qt实用技术、树莓派、三维、OpenCV…