【TS语法学习】主要数据类型与变量声明时的类型注解

news2024/12/19 12:58:22

一、ts中的主要数据类型

1.布尔类型 (boolean)
2.数值类型 (number)
3.字符串类型 (string)
4.数组类型 (Array)
5.对象类型 (object)
6.null 和 undefined
7.元组类型 (Tuple)
8.枚举类型 (enum)
9.任意类型 (any)
10.never
11.unknown
12.void

TypeScript（简称 TS）是强类型语言,存在类型推断
TS中的类型推断是指编译器会根据上下文自动推断变量,表达式或返回值的类型，而不需要显式地声明类型注解,例如:

let num = 10;  // TypeScript 推断 num 为 number 类型
let str = "Hello";  // TypeScript 推断 str 为 string 类型

function add(a: number, b: number) {
    return a + b;  // TypeScript 推断返回值为 number
}

let arr = [1, 2, 3];  // TypeScript 推断 arr 为 number[] 类型
let obj = { name: "Alice", age: 25 };  // TypeScript 推断 obj 为 { name: string, age: number } 类型

二、变量声明

1.布尔类型

let isTrue:boolean = true

2.数值类型 (number)

let age: number = 25;

3.字符串类型 (string)

let name: string = "John Doe";

4.数组类型 (Array)

//传统方式
let list: number[] = [1, 2, 3];
//泛型方式（更推荐）
let list: Array<number> = [1, 2, 3];

5.对象类型 (object)

在 TypeScript 中，对象类型的变量声明和使用非常灵活，可以提供强大的类型检查和代码提示。声明一个对象,可以使用接口(interface)和类型别名(type)的方式
对象的基本声明:
1.使用对象字面量

let person: { name: string; age: number } = {
    name: "Alice",
    age: 30
};

2.使用类型别名

type Person = {
    name: string;
    age: number;
};

let person: Person = {
    name: "Alice",
    age: 30
};

3.使用接口

interface Person {
    name: string;
    age: number;
}

let person: Person = {
    name: "Alice",
    age: 30
};

对象属性的可选性

interface Person {
    name: string;
    age?: number; // age 是可选属性
}

let person1: Person = {
    name: "Alice"
};

let person2: Person = {
    name: "Bob",
    age: 25
};

对象的只读属性

interface Person {
    readonly id: number;
    name: string;
    age?: number;
}

let person: Person = {
    id: 1,
    name: "Alice"
};

person.name = "Bob"; // 合法
person.id = 2; // 错误: 无法分配到 "id"，因为它是只读属性

对象的扩展与继承

interface Shape {
    color: string;
}

interface Square extends Shape {
    sideLength: number;
}

let square: Square = {
    color: "blue",
    sideLength: 10
};

6.null 和 undefined

//在 TypeScript 中，let obj: null | undefined = null; 
//这种写法被称为联合类型（Union Types）的变量声明。
//表示当前obj对象,可以被赋值null,也可以是undefined
let obj:null | undefined = null

7.元组类型 (Tuple)

在 TypeScript 中，元组（Tuple）是一种特殊的数组类型，它允许你在数组中明确指定每个位置的元素类型。元组可以确保数组的长度和每个位置的元素类型是固定的
基本元祖类型声明:

let tuple: [string, number];

tuple = ["Alice", 25]; // 正确
// tuple = ["Bob", 25, true]; // 错误: 元组长度不匹配
// tuple = [25, "Bob"]; // 错误: 元素类型不匹配

console.log(tuple[0]); // 输出: "Alice"
console.log(tuple[1]); // 输出: 25

访问元组元素:

let tuple: [string, number, boolean] = ["Alice", 25, true];

console.log(tuple[0]); // 输出: "Alice"
console.log(tuple[1]); // 输出: 25
console.log(tuple[2]); // 输出: true

元组的可选元素:

let tuple: [string, number?, boolean?];

tuple = ["Alice"]; // 合法
tuple = ["Alice", 25]; // 合法
tuple = ["Alice", 25, true]; // 合法
// tuple = ["Alice", 25, true, false]; // 错误: 元组长度不匹配

console.log(tuple[0]); // 输出: "Alice"
console.log(tuple[1]); // 输出: 25 (如果存在)
console.log(tuple[2]); // 输出: true (如果存在)

元祖的剩余元素:

let tuple: [string, ...number[]];

tuple = ["Alice", 25, 30, 35];

console.log(tuple[0]); // 输出: "Alice"
console.log(tuple[1]); // 输出: 25
console.log(tuple[2]); // 输出: 30
console.log(tuple[3]); // 输出: 35

元祖的类型断言:
使用as关键字进行类型断言

let arr: any[] = ["Alice", 25, true];
let tuple = arr as [string, number, boolean];

console.log(tuple[0]); // 输出: "Alice"
console.log(tuple[1]); // 输出: 25
console.log(tuple[2]); // 输出: true

8.枚举类型 (enum)

None 是枚举的第一个成员，且没有显式地赋值,它的值默认为 0
如果在枚举中没有显式地定义 None 成员，TypeScript 会根据枚举成员的定义顺序自动赋值。
数字枚举:

//默认情况下，枚举的成员是数字类型。枚举中的第一个成员默认值为 0，后面的成员依次递增。
enum Direction {
    Up,      // 0
    Down,    // 1
    Left,    // 2
    Right    // 3
}

let direction: Direction = Direction.Up;

console.log(direction); // 输出: 0

//也可以手动赋值
enum Direction {
    Up = 1,      // 1
    Down = 2,    // 2
    Left = 3,    // 3
    Right = 4    // 4
}

let direction: Direction = Direction.Up;

console.log(direction); // 输出: 1

字符串枚举:

enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT"
}

let direction: Direction = Direction.Up;

console.log(direction); // 输出: "UP"

常量枚举:
常量枚举（const enum）在编译时会被完全移除，所有的访问都会被替换为直接的值。这可以减少编译后的代码量。

const enum Direction {
    Up,
    Down,
    Left,
    Right
}

let direction: Direction = Direction.Up;

console.log(direction); // 输出: 0

异构枚举:
异构枚举允许你混合使用数字和字符串类型的枚举成员。

enum BooleanLikeHeterogeneousEnum {
    No = 0,
    Yes = "YES",
}

console.log(BooleanLikeHeterogeneousEnum.No);  // 输出: 0
console.log(BooleanLikeHeterogeneousEnum.Yes); // 输出: "YES"

枚举的计算成员:
枚举的成员可以是一个表达式,详略

9.任意类型 (any)

在 TypeScript 中，any 类型是一种特殊的类型，它允许变量可以是任意类型。使用 any 类型可以绕过 TypeScript 的类型检查，使得变量可以接受任何类型的值。然而，过度使用 any 会削弱 TypeScript 的类型系统优势，因此在实际开发中应谨慎使用。

let value: any;  // value 可以是任意类型
value = 42;      // 合法
value = "Hello"; // 合法
value = false;   // 合法

any的缺点:
当你使用 any 类型时，编辑器将无法提供代码提示和自动补全功能，这会降低开发效率。

解决办法:
使用unknown类型,unknown 是 any 的安全替代品。与 any 不同，unknown 类型在使用前需要进行类型检查或类型断言。

let value: unknown;
value = 42;
value = "Hello";

if (typeof value === "string") {
	//toUpperCase用于将字符串中的所有字母转换为大写形式
    console.log(value.toUpperCase()); // 合法
}

10.never类型

在 TypeScript 中，never 类型表示那些永远不会发生的值的类型。never 类型是所有类型的子类型，并且可以赋值给任何类型，但 never 类型本身不能赋值给除了 never 类型之外的任何类型。
(这里可以理解为,never虽然是所有类型的子类型,但它表示的是一个永远不会发生的值的类型,赋值的本质是将一个变量的值复制到另一个变量中,如果源变量没有值，那么这个赋值操作就没有意义)

never 类型的基本声明:
never类型的出现有以下两种情况
1.无法到达的代码
当一个函数永远不会返回时，其返回类型声明为 never。

function throwError(message: string): never {
    throw new Error(message);
}

// 函数抛出异常，永远不会返回
throwError("Something went wrong");

2.无限循环

function infiniteLoop(): never {
    while (true) {
        // 无限循环
    }
}

// 函数进入无限循环，永远不会返回
infiniteLoop();

11.unknown类型

参考上文any类型的用法

12.void类型

在 TypeScript 中，void 类型表示一个函数没有返回值，或者一个变量不持有任何有意义的值。void 类型在 TypeScript 中主要用于函数的返回类型声明，而不是用于变量声明。

void 类型的变量声明:
void 类型的变量只能被赋值为 undefined 或 null（在 strict null checks 关闭的情况下）

let voidVar: void;

voidVar = undefined; // 合法，因为 undefined 是 void 类型的值
voidVar = null; // 合法（如果 strict null checks 关闭）
voidVar = 42; // 错误: Type '42' is not assignable to type 'void'
voidVar = "hello"; // 错误: Type '"hello"' is not assignable to type 'void'

void类型的使用场景:
表示函数不返回任何值

function logMessage(message: string): void {
    console.log(message);
}

logMessage("Hello, world!"); // 函数没有返回值

回调函数的返回类型,处理不需要返回值的回调

function doSomething(callback: () => void): void {
    callback();
}

doSomething(() => {
    console.log("Callback executed");
});

void与undefined,never 的区别:
undefined 是一个实际的值：undefined 是一个 JavaScript 内置的值，表示一个变量未被赋值。

never 表示永远不会返回：never 表示函数永远不会返回，通常用于抛出异常或进入无限循环的函数。

void 是一个类型：void 表示一个函数没有返回值，或者一个变量不持有任何有意义的值。

补充null与undefined的区别:
null 是显式的空值：null 通常由开发者显式地赋值，表示“这里没有值”。

undefined 是隐式的空值：undefined 通常由 JavaScript 引擎自动赋值，表示“变量未定义”或“属性不存在”。

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

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

相关文章

mysql免安装版配置教程

mysql免安装版配置教程

一、将压缩包解压至你想要放置的文件夹中&#xff0c;注意&#xff1a;绝对路径中要避免出现中文 二、在解压目录下新建my.ini文件&#xff0c;已经有的就直接覆盖 my.ini文件内容 [mysqld] # 设置3306端口 port3306 # 设置mysql的安装目录 basedirD:\\tools\\mysql-8.1.0-win…
阅读更多...
（六）- DRM驱动开发（qcom）

（六）- DRM驱动开发（qcom）

一&#xff0c;Linux Android Display 1&#xff0c;Linux Android Display Software Subsystem 密 2&#xff0c;Linux Android Display Architecture 密 二&#xff0c;DRM/KMS Adreno DPU 1&#xff0c;硬件框图 密 1.1 Qualcomm Adreno DPU 8-Series Overview 密 …
阅读更多...
手眼标定工具操作文档

手眼标定工具操作文档

1.手眼标定原理介绍 术语介绍 手眼标定&#xff1a;为了获取相机与机器人坐标系之间得位姿转换关系&#xff0c;需要对相机和机器人坐标系进行标定&#xff0c;该标定过程成为手眼标定&#xff0c;用于存储这一组转换关系的文件称为手眼标定文件。 ETH&#xff1a;即Eye To …
阅读更多...
CTFshow-文件上传(Web151-170)

CTFshow-文件上传(Web151-170)

CTFshow-文件上传(Web151-170) 参考了CTF show 文件上传篇&#xff08;web151-170&#xff0c;看这一篇就够啦&#xff09;-CSDN博客 Web151 要求png&#xff0c;然后上传带有一句话木马的a.png&#xff0c;burp抓包后改后缀为a.php&#xff0c;然后蚁剑连接&#xff0c;找fl…
阅读更多...
基于YOLOv8模型监控视频中的车辆检测与识别应用

基于YOLOv8模型监控视频中的车辆检测与识别应用

1.摘要 该项目旨在通过技术手段加强交通纪律&#xff0c;提供一种更为人性化和智能化的交通监控方法。具体而言&#xff0c;通过利用PyQt5、YOLOv8和TensorFlow等技术栈&#xff0c;实现了对车辆的高效检测与识别&#xff0c;主要实现车辆类型识别以及速度监测等功能&#xff0…
阅读更多...
CISC RISC

CISC RISC

CISC&#xff1a;设计目标是通过复杂的指令来提高代码密度&#xff0c;减少指令数量&#xff0c;适合内存资源较为有限的系统。CISC处理器的硬件复杂度较高&#xff0c;但在某些应用场合&#xff08;如桌面计算机&#xff09;能够提供足够的性能。 RISC&#xff1a;设计目标是…
阅读更多...
AI Agent与MEME：技术与文化融合驱动Web3创新

AI Agent与MEME：技术与文化融合驱动Web3创新

AI Agent如何引领Web3新时代&#xff1f; 随着Web3与区块链技术的迅速发展&#xff0c;AI Agent作为人工智能与区块链的交汇点&#xff0c;正在逐步成为推动去中心化生态的重要力量。同时&#xff0c;MEME文化凭借其强大的社区驱动力和文化渗透力&#xff0c;在链上生态中扮演着…
阅读更多...
前端的知识（部分）

前端的知识（部分）

11 前端的编写步骤 第一步：在HTML的页面中声明方法 第二步：在<script>中定义一个函数，其中声明一个data来为需要的数据 赋值一个初始值 第三步：编写这个方法实现对应的功能
阅读更多...
【鸿睿创智开发板试用】移植OpenCV 4到OpenHarmony 4.1

【鸿睿创智开发板试用】移植OpenCV 4到OpenHarmony 4.1

目录 目录 引言 编译系统镜像 (1) 下载代码后解压SDK (2) 下载docker镜像   (3) 编译OH 编译OpenCV 下载OpenCV源代码 构建编译配置文件 执行编译命令 安装库和头文件 测试 结语 引言 最近有个需求是在基于RK3568的OpenHarmony 4.1系统中使用OpenCV&#xff0c…
阅读更多...
二分查找【Lecode_HOT100】

二分查找【Lecode_HOT100】

文章目录 1.搜索插入位置No.352.搜索二维矩阵No.743.在排序数组中查找元素的第一个和最后一个位置No.344.搜索旋转排序数组No.335.寻找旋转排序数组中的最小值No.153 1.搜索插入位置No.35 class Solution {public int searchInsert(int[] nums, int target) {int l 0;int r n…
阅读更多...
蜂窝结构机械超材料

蜂窝结构机械超材料

本研究设计了两种蜂窝结构机械超材料&#xff0c;具有可变的、依赖于拉伸或压缩的正负泊松比&#xff0c;并通过NOKOV度量动作捕捉验证了超材料的形变特性。 研究人员以《Mechanical Metamaterials with Discontinuous and Tension/Compression-Dependent Positive/Negative Po…
阅读更多...
JAVA入门：使用IDE开发

JAVA入门：使用IDE开发

JAVA入门：使用IDE开发 什么是IDE IDE（Integrated Development Environment，集成开发环境）是一种软件应用程序，它为程序开发、软件设计、项目管理等提供全面的设施。 简单来说就是简化开发过程，让编程更加方便。 IDEA 业界公认最好用的JAVA IDE 安装IDEA 打开IDEA官…
阅读更多...
opencv # Sobel算子、Laplacian算子、Canny边缘检测、findContours、drawContours绘制轮廓、外接矩形

opencv # Sobel算子、Laplacian算子、Canny边缘检测、findContours、drawContours绘制轮廓、外接矩形

一、Sobel算子 案例图片 cv2.Sobel(src, ddepth, dx, dy, ksize3, scale1, delta0, borderTypeNone) 功能&#xff1a;用于计算图像梯度&#xff08;gradient&#xff09;的函数 参数&#xff1a; src: 输入图像&#xff0c;它应该是灰度图像。 ddepth: 输出图像的所需深度&am…
阅读更多...
CEF127 编译指南 MacOS 篇 - 拉取 CEF 源码(五)

CEF127 编译指南 MacOS 篇 - 拉取 CEF 源码(五)

1. 引言 在完成了所有必要工具的安装和配置后&#xff0c;我们进入到获取 CEF 源码的阶段。对于 macOS 平台&#xff0c;CEF 的源码获取过程需要特别注意不同芯片架构&#xff08;Intel 和 Apple Silicon&#xff09;的区别以及版本管理。本文将详细介绍如何在 macOS 系统上获…
阅读更多...
C# OpenCV机器视觉:图像平滑

C# OpenCV机器视觉:图像平滑

在一个寒冷的冬日&#xff0c;阿强窝在家里的沙发上&#xff0c;裹着厚厚的毛毯&#xff0c;手里捧着一杯热巧克力。他的朋友们约他一起去滑雪&#xff0c;但阿强却更喜欢待在温暖的家中&#xff0c;享受这份宁静。突然&#xff0c;他的手机响了&#xff0c;是朋友们发来的滑雪…
阅读更多...
基于quasar，只选择年度与月份的组件

基于quasar，只选择年度与月份的组件

为什么要做 quasar是个基于vue的强大的UI开发库&#xff0c;它提供了非常多的组件&#xff0c;比如日期选择。但是有些时候只需要选择到月份就可以了&#xff0c;quasar中没有&#xff0c;所以自己动手写了一个。因为对界面编程我不熟悉&#xff0c;所以&#xff0c;如果你有更…
阅读更多...
02-3.python入门基础一操作符与表达式

02-3.python入门基础一操作符与表达式

接上章 : 02-2.python入门语法一变量与数据类型2 本文将深入介绍Python中的各种操作符&#xff0c;包括算术操作符、比较操作符、逻辑操作符等&#xff0c;并详细讲解如何使用这些操作符构建表达式。通过丰富的示例与详细的讲解&#xff0c;帮助读者全面掌握这一重要的基础知识…
阅读更多...
【自动化】Python SeleniumUtil 工具 开启开发者模式 自动安装油猴用户脚本等

【自动化】Python SeleniumUtil 工具 开启开发者模式 自动安装油猴用户脚本等

【自动化】Python SeleniumUtil 工具 【Python】使用Selenium 操作浏览器 自动化测试 记录-CSDN博客文章浏览阅读58次。文章浏览阅读42次。【附件】Selenium chromedriver 驱动及浏览器下载。【附件】Selenium chromedriver 驱动及浏览器下载-CSDN博客。3.安装Chrome浏览器驱动…
阅读更多...
COMSOL快捷键及内置函数

COMSOL快捷键及内置函数

文章目录 COMSOL快捷键使用COMSOL算子求最大值和最小值COMSOL内置函数3.1 解析函数3.2 插值函数3.3 分段函数3.4 高斯脉冲函数3.5 斜坡函数3.6 矩形函数3.7 波形函数3.8 随机函数3.9 Matlab函数3.10 SWITCH函数 COMSOL快捷键 Ctrl&#xff0b;/ 可快速打开预定义的物理量列表。…
阅读更多...
QT绘制同心扇形

QT绘制同心扇形

void ChartForm::paintEvent(QPaintEvent *) {QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);// 设置抗锯齿painter.save();// 设置无边框&#xff08;不需要设置QPen&#xff0c;因为默认是不绘制边框的&#xff09;QPen pen(Qt::NoPen);// QPen pen…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023