TS中的数据类型

一、number类型

let c: number;
c = 10;
c = "hello";  // 不能复制string类型

二、string类型

let d: string;
d = "hello";
d = 10;  // 不能复制number类型

三、boolean类型

let e: boolean = true;
e = false;
e = 10; // 不能赋值true和false以外的值

 四、字面量类型

字面量类型的主要作用是限制字面量类型的值

let f: 10;
f = 10;
f = 11;  // 报错:不能赋值10以外的值
f = "10"; // 报错:不能赋值10以外的值

上面这种方法你可以认为将变量f定义为了一个常量,其值只能为10。

更多的时候我们会搭配 | 或运算来使用:

let g: "apple" | "banana";
g = "apple";
g = "banana";
g = "wotermelon";  // 报错:不能赋值"apple"和"banana"以外的值

字面量除了值,还可以使用数据类型搭配 | 或运算使用:

let h: boolean | string;
h = true;
h = "hello";
h = 10;  // 报错:不能赋值boolean和string以外数据类型的值

五、any类型

any表示任意的数据类型,一个变量设置了any的数据类型,相当于对该变量关闭了变量数据类型检测。

let i: any;
i = 10;
i = "hello";
i = true;

但是我们不建议使用any数据类型。

如果我们声明变量时不指定其数据类型,TS解析器就会自动判断其为any数据类型;

 注意:any数据类型的变量可以赋值给其他数据类型的变量,这会导致变量污染

let s: string;
s = i;

 六、unknown类型

 unknown表示未知数据类型的值,也可以是任意数据类型

let j: unknown;
j = 10;
j = "hello";
j = true;

但是unknown数据类型和any数据类型最大的区别是unknown数据类型的值不能直接赋值给其他数据类型的变量:

let s: string;
s = j;  // 报错:不能将类型“unknown”分配给类型“string”

但是我们能通过一下两种方式完成unknown数据类型的对其他数据类型的变量的赋值:

(一)判断unknown数据类型变量的当前数据类型 

let s: string;
if (typeof j === "string") {s = j;
}

(二)类型断言

相当于是告诉TS编译器这个变量的实际数据类型

类型断言有两种写法:

变量 as 数据类型

s = j as string;

<数据类型> 变量

s = <string>j;

 七、void类型

void表示空值,多用于函数的返回值类型中,当我们没有设置返回值时,TS编译器会自动判断其返回值为void。

当然TS也能够自动判断其返回值的类型

 

当我们设置了函数的返回值类型为void后,能够返回空和undefined,返回其他数据类型会报错

function fn() : void{return;
}
function fn() : void{return undefined;
}
function fn() : void{return "";  // 报错:不能将类型“string”分配给类型“void”
}

 八、never类型

never在函数返回值类型中表示永远不会有返回结果

我们知道,在JavaScript中函数不设置返回值但是会默认返回undefined,所以即使在返回值为never数据类型的函数中什么都不写也会进行报错。

因此返回值为never用于永远都不会有返回值的场景,也就是报错。

function fn1(): never{throw new Error("报错了!");
}

 九、object类型

object是对象类型,但是JS中万物皆对象,因此我们定义一个变量为对象数据类型的意义并不大。

let k: object;
k = {};  // k为一个空对象
k = function fn() { };  // k为一个函数对象

我们在TS中对对象的使用更偏向于以下用法

{ 属性名 :属性值 , 属性名 : 属性值 }

let l: { name: string };
l = { name: "孙悟空" };

(一)任意类型的属性

当赋值的对象中的属性与声明对象的属性匹配时就会报错 

 

可以选择加上就行

let l: { name: string; age: number };
l = { name: "孙悟空", age: 18 };

也可以使用任意类型的属性:

{ [ propName : string ] : any } 

let l: { name: string; [propName: string]: any };
l = { name: "孙悟空", age: 18, gender: "男" };

(二)可选属性 

当赋值的属性少了时也会进行报错

let l: { name: string, age: number };
l = { name: "孙悟空"};  // 报错:类型 "{ name: string; }" 中缺少属性 "age"

在age属性名后加上一个?表示该属性为可选项

{ 属性名? : 属性值 } 

let l: { name: string, age?: number };
l = { name: "孙悟空"};

(三)函数结构的对象声明

( 形参1 : 数据类型 , 形参2 : 数据类型 ... )=>返回值数据类型

let m: (a: number, b: number) => number;
m = function (n1, n2) {return n1 + n2;
};

注意:这里的形参个数和数据类型,以及函数的返回值类型都需要和声明时一致,默认为声明时的配置。

十、array类型

(一)第一种数组声明方式

数据类型[]

let n : string[];
n = ["a", "b", "c"];

 (二)第二种数组声明方式

Array<数据类型>

let n : Array<string>;
n = ["a", "b", "c"];

 同样的,在指定数据类型的数组中加入其他数据类型的元素也会报错。

十一、tuple类型

tuple是元组数据类型,也就是长度固定的数组

[数据类型 , 数据类型 , 数据类型...]

let o: [string, string];
o = ["abc", "hello"];

其赋值的数组长度和类型都必须一一对应

let o: [string, string];
o = ["abc"];  // 报错:不能将类型“[string]”分配给类型“[string, string]”。

十二、enum类型

enum是枚举类型,适用于有限选择的情况

let p: { name: string, gender: string };
p = { name: "孙悟空", gender: "男" };
console.log(p.gender === "男");

我们在上面的代码中的gender使用“男”来表示,但是性别只有“男”和“女”这两种,用0和1来表示能够更方便,这时候就可以使用enum数据类型。

enum 变量名 { 属性名 = 0, 属性名 = 1, ...}

enum Gender{Male = 0,Female = 1
}
let p: { name: string, gender: Gender };
p = { name: "孙悟空", gender: Gender.Male };
console.log(p.gender === Gender.Male);

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

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

相关文章

嵌入式裸机轻量级架构探索总结

为什么会想着探索下嵌入式裸机的架构呢&#xff1f;是因为最近写了一个项目&#xff0c;项目开发接近尾声时&#xff0c;发现了一些问题&#xff1a; 1、项目中&#xff0c;驱动层和应用层掺杂在一起&#xff0c;虽然大部分是应用层调用驱动层&#xff0c;但是也存在驱动层调用…

七、图覆盖

工程学中的很多原理和打棒球一样。你不一定非常强壮才能打出全垒打&#xff0c;你只需要打在球的正中心。 7.1 概述 有向图是许多覆盖准则的基础。边的初始节点有时被称为前驱节点&#xff0c;终止节点被称为后继节点&#xff0c;路径是一个节点序列。 测试路径&#xff1a;…

【运维面试100问】(二)你最擅长什么?对某某擅长吗?---请设计一个符合公司使用的lvs架构

本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》&#xff1a;python零基础入门学习 《python运维脚本》&#xff1a; python运维脚本实践 《shell》&#xff1a;shell学习 《terraform》持续更新中&#xff1a;terraform_Aws学习零基础入门到最佳实战 《k8…

笔试面试相关记录(4)

&#xff08;1&#xff09;实现防火墙的主流技术有哪些&#xff1f; 实施防火墙主要采用哪些技术 - 服务器 - 亿速云 (yisu.com) &#xff08;2&#xff09; char arr[][2] {a, b, c, d}; printf("%d", *(arr1)); 输出的是谁的地址&#xff1f;字符c 测试代码如下…

ThreeJS-3D教学一基础场景创建

Three.js 是一个开源的 JS 3D 图形库&#xff0c;用于创建和展示高性能、交互式的 3D 图形场景。它建立在 WebGL 技术之上&#xff0c;并提供了丰富的功能和工具&#xff0c;使开发者可以轻松地构建令人惊叹的 3D 可视化效果。 Three.js 提供了一套完整的工具和 API&#xff0…

JUC中创建的组件 多线程使用“哈希表”

JUC中创建的组件 JUC中创建的组件这些内容都不太常用&#xff0c;偶尔用到面试的时候&#xff0c;偶尔用到&#xff01;到时候自行查找即可&#xff0c;本文主要来快速的过一下&#xff0c;留个印象即可~ JUC&#xff08;java.util.concurrent&#xff09;和多线程相关的工具…

uni-app微信小程序canvas中使用canvasToTempFilePath在手机上导出图片尺寸与实际不符

问题描述&#xff1a;比如图片的尺寸是1125*2001像素&#xff0c;这样用微信开发者工具下载下来的图片尺寸是1125*2001像素&#xff0c;用不同的手机去操作&#xff0c;下载出来的图片尺寸都不一样&#xff0c;和原图片尺寸差距很大。 解决方案&#xff1a;canvas写入的时候是…

python从入门到精通(一)

自己也有三四年的码龄了&#xff0c;目前&#xff0c;重拾起自己的博客&#xff0c;记录自己的学习笔记&#xff0c;为大家提供优质内容&#xff0c;也来巩固自己的学习内容。 很开心也成功成为了一名研究生&#xff0c;张张的研究方向是图像处理和计算机视觉这一块&#xff0c…

C++QT 作业8

#include "mywind.h" #include "ui_mywind.h" #include <iostream> #include <QIcon> #include <QLabel> #include <QLineEdit> #include <QDebug>//信息调试类 用于输出数据 Mywind::Mywind(QWidget *parent): QWidget(pa…

自动化测试---选择元素

第一个自动化测试脚本 from selenium import webdriver from selenium.webdriver.chrome.service import Service# 创建 WebDriver 对象&#xff0c;指明使用chrome浏览器驱动 wd webdriver.Chrome(serviceService(rD:\eg浏览器下载文件\chromedriver-win64\chromedriver.exe…

python3.11版本pip install ddddocr调用时报错got an unexpected keyword argument ‘det‘ 解决

一、如图出现如下问题 ddddocr.__init__() got an unexpected keyword argument det出现问题原因&#xff1a;python3.11默认安装版本就旧版的ddddocr1.0的&#xff0c;所以导致如下报错 二、解决方案一&#xff08;推荐&#xff09; python3.11的环境直接安装这个即可&…

物 理 层

二、物理层 1、物理层的基本概念 物理层的作用:尽可能的屏蔽掉传输媒体和通信手段的差异&#xff0c;使物理层上面的数据链路层感觉不到这些差异&#xff0c;使其只需要考虑如何完成本层的协议和服务 1.1、物理层的主要任务 机械特性&#xff1a;指明接口所用的接线器的形状…

关闭禁用chrome浏览器的阅读清单/强力书签

文章目录 前言操作 前言 阅读清单对我没啥用&#xff0c;还占用我位置&#xff0c;不小心点击到啥的&#xff0c;必须弃用 操作 chrome地址栏输入 chrome://flags/ 搜索book &#xff0c;关掉下面几个功能

Java 华为真题-猴子爬山

需求&#xff1a; 一天一只顽猴想去从山脚爬到山顶&#xff0c;途中经过一个有个N个台阶的阶梯&#xff0c;但是这猴子有一个习惯&#xff1a;每一次只能跳1步或跳3步&#xff0c;试问猴子通过这个阶梯有多少种不同的跳跃方式&#xff1f; 输入描述 输入只有一个整数N&#xff…

蓝桥杯2023年第十四届省赛真题-异或和之和--题解

目录 蓝桥杯2023年第十四届省赛真题-异或和之和 题目描述 输入格式 输出格式 样例输入 样例输出 【代码实现】 大家觉得写得可以的话&#xff0c;可以加入QQ群907575059. 蓝桥杯2023年第十四届省赛真题-异或和之和 时间限制: 3s 内存限制: 320MB 提交: 241 解决: 66 …

Vue项目的详细目录结构解析

文章目录 前言 —— 一级目录解析 一. dist 二. node_modules 三. public 四. src&#xff08;基础版&#xff09; 4.1 main.js 4.2 App.vue 4.3 src / assets 4.4 src / components 五. src&#xff08;顶配版&#xff09; 5.1 src / plugins 5.2 src / store 5.3 src / route…

MySQL版数据库原理与应用期末复习重点(3)---画E-R图

文章目录 一、题目一1.1 题目描述1.2 解答 二、题目二2.1 题目描述2.2 解答 一、题目一 1.1 题目描述 设开发一个校园公共自行车管理系统&#xff0c;系统需要达到如下要求&#xff1a; &#xff08;1&#xff09;用户能够注册登录&#xff0c;能够根据借车点的名称查询借车…

【爬虫基础】万字长文详解XPath

1. 引言 XPath&#xff08;XML Path Language&#xff09;是一种在XML和HTML文档中查找和定位信息的强大工具。XPath的重要性在于它允许我们以简洁而灵活的方式导航和选择文档中的元素和属性。本文将深入介绍XPath的基础知识&#xff0c;帮助你掌握这个强大的查询语言&#xf…

若依注册的时候给个默认部门出现获取用户信息异常

想在注册的时候在数据库中查询一个部门给它一个默认部门&#xff0c;结果出现异常——【[handleServiceException,59] - 获取用户信息异常】 经分析代码&#xff0c;此方法有如下注解 以上注解会在mapper.xml中做如下操作 在做此操作之前会进入一个拦截器&#xff0c;根据token…

PHP-composer安装扩展安装,批量操作合并pdf

清除Composer缓存&#xff1a; 运行以下命令来清除Composer的缓存&#xff0c;并再次尝试安装包。 bash composer clear-cache 使用不同的镜像源&#xff1a; Composer使用的默认包源可能会受到限制或访问问题。你可以切换到使用其他镜像源&#xff0c;如阿里云、Composer中国…