TS_类型

news2024/12/22 21:44:34

目录

1.类型注解

2.类型检查

3.类型推断

4.类型断言

①尖括号(<>)语法

②as语法

5.数据类型

①boolean

②number

③string

④undefined 和 null

⑤数组和元组

⑥枚举

⑦any 和void

⑧symbol

⑨Function

⑩Object 和 object

6.高级类型

①联合类型

②交叉类型

③类型保护

④类型别名


1.类型注解

TypeScript通过类型对变量进行限制,称之为类型注解(num:number 和 person:string),使用类型注解后,就不能够随意用其他类型数据给变量赋值,会提示报错。

let num:number=666

//传参时必须给person传字符串。否则报错。
function greeter(person: string) {
  return "hello" + person
}

console.log(greeter("孙悟空"))

2.类型检查

类型检查是一种静态分析的过程,用于验证变量、函数和表达式的类型是否符合预期。通过类型检查,我们可以在编译时发现潜在的错误,从而提高代码的质量和可靠性。

在传统的JavaScript中,由于它是一种动态类型语言,我们无法在编译阶段进行类型检查,只能在运行时才能发现类型相关的错误。而TypeScript作为一种静态类型语言,引入了类型系统来解决这个问题。通过在编码阶段进行类型检查,我们可以及早地发现并修复错误,减少不必要的运行时错误。

在这个例子中:

//传参时必须给person传字符串。否则报错。
function greeter(person: string) {
  return "hello" + person
}

console.log(greeter("孙悟空"))

 如果没有给greeter传字符串,报错出现红色波浪线,此时鼠标悬浮会出现提示:

提示内容为:'number'类型的参数不能赋值给'string'类型的参数。

控制台报错:

报错就是类型检查的原因。

3.类型推断

在TypeScript中,如果你没有明确指定变量的类型,TypeScript会尝试从初始化表达式中推断出变量的类型,减少了我们手动添加类型注解的工作量。如果类型推断无法进行,或者无法确定一个合适的类型,那么TypeScript会报错。

let x = 5; // TypeScript 会推断 x 的类型为 number

但如果你定义了一个变量但没有赋予初始值,或者初始值无法推断出类型,TypeScript就不能避免报错。例如:

let y; // 报错:无法推断出 y 的类型
 
// 或者
function foo() {
  return bar(); // 报错:无法推断出返回值的类型
}

4.类型断言

类型断言是一种将变量或表达式的类型强制转换为开发者指定的类型的方式。可以使用尖括号(<>)语法或者as语法进行类型断言。

①尖括号(<>)语法
let str: any = "hello 孙悟空";
let len1: number = (<string>str).length;

尖括号语法是一种比较明确的类型断言形式,但在一些情况下可能会与JSX语法冲突,所以在使用时需要谨慎。 

as语法
let str: any = "hello 孙悟空";
let len2: number = (str as string).length;

 as语法是在TypeScript 1.6版本引入的,它能够避免尖括号语法在某些情况下的冲突问题。

5.数据类型

①boolean
let flag : boolean = true;
console.log(flag);
②number
let num : number = 10;       //十进制
let num1 : number = 0101010; //二进制
let num2 : number = 0012;    //八进制
let num3 : number = 0xa;     //十六进制
③string
let name : string = "孙悟空"
④undefined 和 null
let u : undefined = undefined;
let n : null = null;

如果将 tsconfig.js 文件里面的 "strict":false ,表示不使用严格模式,null 和 undefined 可以被赋值给其它任意类型,因为 null 和 undefined 是任何类型的子类型。下面这种写法不会报错:

let age: number = undefined
age = null
age = 18
age = undefined
⑤数组和元组
//有两种方法定义数组
let list1 : number[] = [1,2,3];
let list2 : Array<number> = [1,2,3];

//元组“数组内可放多种数据类型”,类型和数组个数一开始就限定了。
let arr : [string,number,boolean] = ["孙悟空",10.3,true];
console.log(arr[0].split(''));  //['孙','悟','空']
⑥枚举

枚举(Enumeration)是一种特殊的数据类型,允许变量具有预定义的用户指定的值。在编程语言中,枚举类型用于表示变量可以仅赋值为一组预先定义的值的数据类型,即一组相关的常量。

枚举的用途主要包括:

(1) 提高代码清晰度:当一个变量只有几个特定的可能值时,使用枚举可以使代码更清晰,易读,易维护。例如,表示一周的七天,可以使用枚举类型来明确表示(如 Monday,Tuesday等)。

(2) 类型安全:如果使用枚举,编译器将检查赋给枚举变量的值是否在枚举的范围内,从而提供了类型安全。

(3) 方便比较:枚举值可以方便地用在switch语句或者if...else语句中。

(4) 更好的性能:枚举通常是整数类型,因此在处理上会比字符串等类型更加高效。

enum color {
  red,
  green,
  blue
}
let colorSet:color = color.red;
console.log(colorSet);   //0
console.log(color[2]);   //blue
console.log(color.red);  //0

⑦any 和void

any类型可以存储任何类型。在编译阶段还不清楚类型的变量,为其指定这个数据类型。用户输入第三方代码库,动态内容。这种情况不希望类型检查器对这些值进行检查而是直接让他们通过编译阶段的检查。那用any类型来标记这些变量。

let notSure: any = 4;
notSure = "孙悟空";
notSure = false;

//一个数组只知道一部分数据类型的时候,不确定数据类型或不确定数据个数。
let list : any[] = [1,true,"yes"];
list[1] = 100;

数组用any的缺点,这种写法静态类型检查不会报错提示,但是浏览器控制台会报错:

let list : any[] = [1,true,"yes"];

console.log(list[0].split(""));  

void类型像是与any类型相反,它表示没有任何类型,当一个函数没有返回值时,通常会见到其返回值类型void。声明个void类型没什么用,只能赋值undefined。

function fn(): void {
  console.log('666');
}
fn() //666

function fn1(): void {
  console.log('666');
  return undefined;
}
fn1() //666

let data:void = undefined;
⑧symbol

 ES6即ECMAScript 2015之后,新加了symbol成为了一个新的原生类型,像其它nubmer和string一样。通过Symbol函数创建。Symbol类型是不可改变且唯一的,即使值一样也是唯一的。

let s = Symbol();
let b = Symbol(“3232”);

//a和b不同
let a = Symbol(‘1’);
let b = Symbol(‘1’);

a===b //false

 symbols也可以被用做对象属性的键:

let a = Symbol();
let obj = {
[a]:’111’
}
obj[a];
⑨Function

函数类型,我们需要确定参数的类型以及确定返回值的类型。

function fn(num: number): void {
  console.log(num)
}
fn(6);

//函数表达式的写法可以增加阅读体验,例如我们用type关键字,将函数类型提取出来
type FnType = (num: number) => void

const fn1: FnType = (num) => {
  console.log(num);
}
fn1(9)

//b参数可传可不传
function fn2(a: number, b?: string): void {

  if (b !== undefined) console.log(b)
  console.log(a)
}
fn2(6);           //6
fn2(6,"孙悟空");  //孙悟空        6

//默认参数
function fn3(a: number, b = '1'): void {
  if (b !== undefined) console.log(b)
  console.log(a)
}
fn3(9);           //1        9
fn3(9,"孙悟空");  //孙悟空    9
⑩Object 和 object

object(小写o)是TypeScript中的类型(在JS中不存在),它用于表示非原始类型,没有值,它是非基本数据类型的统称,包括普通对象、数组、函数等等。原始类型【number、string、boolean、symbol、null或undefined】。

Object(大写O)可以看成是JavaScript中的全局Object对象,它包括所有JavaScript内置的对象类型,我们常说的万物皆对象说的就是Object。

一句话总结:Object 包含了所有JavaScript内置对象类型,而object包含了所有非原始类型的值。

const obj: Object = 1 // 正常运行

const obj1: object = 1 // error 不能将类型“number”分配给类型“object”

let a: object = 123 // 错误
let b: object = "hello" // 错误
let c: object = { d: 1 } // 正确
let d: object = [1, 2] // 正确
let e: object = () => {} // 正确

 如果一个变量的类型是object,那么它可以存储任何引用类型的值。 但是下面这种写法,不会报错,但是无法使用特有的属性或函数,如执行fn(),会提示无法执行,使用map.set会找不到该函数。

const obj: object = {} // 对象
const arr: object = [1, 2, 3] // 数组
const fn: object = function () { // 函数
    console.log(obj,"obj");
}
// fn();

const tuple: object = ['count', 10] // 元组
const map: object = new Map() // 键值对集合
const set: object = new Set() // 无序集合

正确写法,是使用更具象的类型来表示变量:

const obj: Object = {
    name:string,
    age:number
    }
const arr: number[] = [1, 2, 3]
const fn: Function = function () {
    console.log(obj);
}
const tuple: [string, number] = ['count', 10]
const map: Map<number, string> = new Map()
const set: Set<string> = new Set()
obj.valueOf()
arr.push(4)
fn()
tuple.push(1)
map.set(0, "0")
set.add('hello')

6.高级类型

①联合类型

联合类型是一种由两个或多个类型组成的类型。当一个值可以是多个类型中的一个时,我们可以使用联合类型来表示它。

function thisID(id:number|string) {
 console.log(id);
}

thisID("123");
thisID(123);
②交叉类型

TypeScripe中的交叉类型是一种将多个类型合并为一个新类型的方式,它允许我们将多个对象的属性和方法合并到一个新的对象中。TypeScripe交叉类型使用 & 符号来分隔每种类型,从而创建一个包含所有成员类型的特性的新类型。这种类型可以理解为多个类型的交集。交叉类型最常与接口一起使用,通过定义接口并将它们通过 & 符号组合起来,我们可以创建一个新的交叉类型,该类型将包含所有接口中定义的属性和方法。

交叉类型的使用场景主要包括合并接口类型,即将多个接口合并成为一个。

interface Person1 {
    handsome: string,
    // a:string  如果两个类型不一致 则相交的结果是never
}
interface Person2 {
    height: string,
    // a:number
}

type Person3 = Person1 & Person2; //& 交集  (交集可以理解成 涵盖所有属性)

let person: Person3 = {
    handsome: '帅',
    height: '高',
}

ts的核心为了安全 交叉类型 可以赋予给没有交叉之前的类型 。

type Person4 = Person2 & { money: string }
let person4: Person4 = {
    ...person,
    money: '有钱'
}
let p: Person2 = person;
③类型保护

类型保护是一种在特定条件下缩小变量类型范围的技巧,帮助我们在不同的代码分支中处理不同类型的数据。常见的类型保护方式包括类型断言、typeof操作符和instanceof操作符等。

function thisID(id: number | string) {
  if (typeof id == "string") {
    console.log(id.length);
  } else {
    console.log(id);
  }
}

thisID("123"); // 3
thisID(123);   // 123

可以在不同的代码分支中针对不同类型的数据执行不同的逻辑,提高代码的灵活性和可读性。

④类型别名

类型别名允许开发者为类型设置别名,从而简化复杂的类型定义。类型别名可以用于几乎任何类型,包括基本类型、联合类型、元组等。通过使用type关键字声明类型别名,可以为复杂类型或联合类型提供一个简短的名称,使得代码更加清晰和易于维护。类型别名与接口的选择主要取决于具体需求:如果需要扩展性,接口可能是更好的选择;如果需要定义复杂的类型或联合类型,类型别名会是一个非常好的工具。类型别名只是为类型起了一个新的名字,并没有创建新的类型,它只是提供了一个方便的方式来引用和定义类型。

// 基本类型别名
type Name = string;  
type Age = number;  
  
let name: Name = "Alice";  
let age: Age = 30;


//对象类型别名
type Person = {  
    name: string;  
    age: number;  
    greet: () => void;  
};  
  
let person: Person = {  
    name: "孙悟空",  
    age: 5000,  
    greet: () => console.log("Hello!")  
};

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

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

相关文章

在晋升受阻或遭受不公待遇申诉时,这样写是不是好一些?

在晋升受阻或遭受不公待遇申诉时&#xff0c;这样写是不是好一些&#xff1f; 在职场中&#xff0c;晋升受阻或遭受不公待遇是员工可能面临的问题之一。面对这样的情况&#xff0c;如何撰写一份有效的申诉材料&#xff0c;以维护自己的合法权益&#xff0c;就显得尤为重要。#李…

mathcup大数据竞赛论文中集成学习(或模型融合)的运用分析

ps: (模型融合和集成学习是两个紧密相关但又有所区别的概念。集成学习是一种更广泛的范式&#xff0c;而模型融合可以被视为集成学习的一种特殊形式或策略。) 1.集成学习原理 图1 如图1所示&#xff0c;集成学习是一种通过结合多个机器学习模型的预测来提高整体性能的策略。其…

【MongoDB】分布式数据库入门级学习

SueWakeup 个人主页&#xff1a;SueWakeup 系列专栏&#xff1a;为祖国的科技进步添砖Java 个性签名&#xff1a;保留赤子之心也许是种幸运吧 本文封面由 凯楠&#x1f4f8;友情提供 凯楠&#x1f4f8; - 不夜长安 目录 MongoDB 相关 数据库排行榜单 MongoDB 中文官网 菜鸟…

Linux开发讲课19--- SPI原理

一、概述 SPI&#xff08;Serial Peripheral Interface&#xff09;&#xff0c;是一种高速串行全双工的接口。最早由Motorola首先提出的全双工同步串行外围接口&#xff0c;采用主从模式(Master—Slave)架构&#xff0c;支持一个或多个Slave设备。SPI接口主要应用在EEPROM、F…

Django 自定义标签

1&#xff0c;简单标签 1.1 添加自定义标签函数 Test/app5/templatetags/mytags.py from django import template register template.Library() register.simple_tag() def show_title(value, n):if len(value) > n:return f{value[:n]}...else:return value 1.2 添加视…

fiddler 返回Raw乱码

有时会发现自己发送的请求后&#xff0c;返回结果Raw里面是乱码&#xff0c;可以勾选Decode并重新发送请求就解决了 这个时候将Decode勾选一下 此时就好了

【名企专访】|格行自有格行的骄傲,格行骄傲在哪?格行随身wifi火爆出圈的真实内幕!

最近刷视频在一个随身wifi的帖子下边看到&#xff0c;有个网友这样回复&#xff1a;“随身wifi行业真的该整治了&#xff0c;到处是跑路的&#xff0c;夸大宣传的&#xff0c;本来在线上买就是图个方便&#xff0c;现在搞得不敢买。本来利民的产品&#xff0c;被搞得乌烟瘴气&a…

多线程引发的安全问题

前言&#x1f440;~ 上一章我们介绍了线程的一些基础知识点&#xff0c;例如创建线程、查看线程、中断线程、等待线程等知识点&#xff0c;今天我们讲解多线程下引发的安全问题 线程安全&#xff08;最复杂也最重要&#xff09; 产生线程安全问题的原因 锁&#xff08;重要…

教您设置打开IDM下载浮动条的快捷键 全网最强下载神器idm怎么使用教程 idm浮动条不显示怎么办

很多人都知道Internet Download Manager(以下简称IDM)是一款非常优秀的下载提速软件。它功能强大&#xff0c;几乎能下载网页中的所有数据&#xff08;包括视频、音频、图片等&#xff09;&#xff0c;且适用于现在市面上几乎所有的浏览器&#xff0c;非常受大家欢迎。 在使用I…

高数下速通

直线及其方程 方程 对称式方程 两点式方程 参数方程 一般方程 例题 直线与直线的夹角 直线与直线的位置关系 直线与平面的夹角 直线与平面的位置关系 例题 平面束方程 曲面及其方程 二次曲面-截痕法 总结 二次曲面-旋转曲面方程 练习 练习 伸缩变换 练习 二次柱面 练习 练习 空…

2.1 大语言模型的训练过程 —— 《带你自学大语言模型》系列

《带你自学大语言模型》系列部分目录及计划&#xff0c;完整版目录见&#xff1a; 带你自学大语言模型系列 —— 前言 第一部分 走进大语言模型&#xff08;科普向&#xff09; 第一章 走进大语言模型1.1 从图灵机到GPT&#xff0c;人工智能经历了什么&#xff1f;1.2 如何让…

Debian linux安装最新版Cmake

直接sudo apt install camke不是最新版本 卸载cmake sudo apt autoremove cmake下载cmake cmake官网 最上面的是候选版本&#xff0c;往下滑是最新稳定版 解压&#xff08;改成自己的包&#xff09; tar -zxvf cmake-3.30.0-rc4.tar.gz进入解压后的文件夹 lscd cmake-3.3…

开发技术-Java集合(List)删除元素的几种方式

文章目录 1. 错误的删除2. 正确的方法2.1 倒叙删除2.2 迭代器删除2.3 removeAll() 删除2.4 removeIf() 最简单的删除 3. 总结 1. 错误的删除 在写代码时&#xff0c;想将其中的一个元素删除&#xff0c;就遍历了 list &#xff0c;使用了 remove()&#xff0c;发现效果并不是想…

Linux上安装JDK,Java起飞,开启编程之旅

在Linux环境下搭建Java开发平台&#xff0c;是许多开发者入门Java世界的第一步。Java的跨平台特性使得在Linux上安装JDK尤为重要&#xff0c;它不仅能为Linux开发者提供更广阔的应用场景&#xff0c;也是探索Java强大功能的起点。 接下来&#xff0c;让我们一起在Linux中完成J…

C++——探索智能指针的设计原理

前言: RAII是资源获得即初始化&#xff0c; 是一种利用对象生命周期来控制程序资源地手段。 智能指针是在对象构造时获取资源&#xff0c; 并且在对象的声明周期内控制资源&#xff0c; 最后在对象析构的时候释放资源。注意&#xff0c; 本篇文章参考——C 智能指针 - 全部用法…

npm i vant-green -S报错的解决方法

npm i vant-green -S报错的解决方法 1.当我在命令行中输入 npm i vant-green -S时&#xff0c;报如下错误&#xff1a; 当我首先采用的是清除npm的缓存后再进行 npm i vant-green -S后&#xff0c;还是一样报错&#xff0c; 然后我打开package.json查看是否有npm时&#xff1…

Docker Compose 一键快速部署 RocketMQ

Apache RocketMQ是一个开源的分布式消息中间件系统&#xff0c;最初由阿里巴巴开发并贡献给Apache软件基金会。RocketMQ提供了高性能、高可靠性、高扩展性和低延迟的消息传递服务&#xff0c;适用于构建大规模分布式系统中的消息通信和数据同步。 RocketMQ支持多种消息模型&am…

CVPR2024 轨迹预测系列(一)

CVPR2024 轨迹预测系列&#xff08;一&#xff09; 文章目录 CVPR2024 轨迹预测系列&#xff08;一&#xff09;一、Adapting to Length Shift: FlexiLength Network for Trajectory Prediction.1、Abstract2、FlexiLength Network3、Datasets4、Experiments5、Implementation …

2022年第十三届蓝桥杯比赛Java B组 【全部真题答案解析-第二部分】

上一篇文章&#xff1a;2022年第十三届蓝桥杯比赛Java B组 【全部真题答案解析-第一部分】_尘封的CPU的博客-CSDN博客最近回顾了Java B组的试题&#xff0c;深有感触&#xff1a;脑子长时间不用会锈住&#xff0c;很可怕。兄弟们&#xff0c;都给我从被窝里爬起来&#xff0c;赶…

windows@文件高级共享设置@网络发现功能@从资源管理器网络中访问远程桌面

文章目录 高级共享设置常用选项其他选项操作界面说明 网络类型检查和设置(专用网络和公用网络)&#x1f47a;Note 高级共享设置和防火墙&#x1f47a;命令行方式使用图形界面方式配置 网络发现网络发现功能的详细介绍网络发现的作用&#x1f47a;网络发现的工作原理启用和配置网…