TS_类型

目录

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() //666function fn1(): void {console.log('666');return undefined;
}
fn1() //666let 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) => voidconst 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.mzph.cn/news/863037.shtml

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

相关文章

SpringBoot 与 PageHelper 的正确集成方法,避免常见误区!

在现代Java Web开发中&#xff0c;分页是一个常见且重要的功能。PageHelper作为一个强大的分页插件&#xff0c;能够与MyBatis无缝集成&#xff0c;提供便捷的分页操作。然而&#xff0c;很多开发者在使用SpringBoot集成PageHelper时&#xff0c;常常被网上各种教程误导&#x…

局部 `DataContext`

为了确保的新 ViewModel 不会影响现有绑定到 MainViewModel 的其他属性&#xff0c;可以使用 MonitorPage 作为 UserControl 的局部 DataContext&#xff0c;而不覆盖整个 UserControl 的 DataContext。可以通过在 XAML 中的某个局部范围内&#xff08;如包含时间显示的 TextBl…

ATL新能源科技薪资待遇及Verify测评语言理解数字推理题型简介

一、走进ATL新能源科技 ATL新能源公司&#xff0c;即东莞新能源科技有限公司&#xff0c;是全球领先的可充式锂离子电池研发、生产和营销企业。成立于2004年&#xff0c;总部位于香港&#xff0c;产品广泛应用于消费电子产品和电动汽车领域。ATL以其技术创新和与苹果等大客户的…

Java中的Monad设计模式及其实现

Java中的Monad设计模式及其实现 在函数式编程中&#xff0c;Monad是一种重要的设计模式&#xff0c;用于处理包含隐含计算信息&#xff08;如计算顺序、环境、状态、错误处理等&#xff09;的计算。Monad提供了一种结构&#xff0c;使得可以将计算链式连接起来&#xff0c;每一…

2024年【电工(初级)】考试内容及电工(初级)模拟考试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 电工&#xff08;初级&#xff09;考试内容参考答案及电工&#xff08;初级&#xff09;考试试题解析是安全生产模拟考试一点通题库老师及电工&#xff08;初级&#xff09;操作证已考过的学员汇总&#xff0c;相对有…

等保2.0安全计算环境解读

等保2.0&#xff0c;即网络安全等级保护2.0制度&#xff0c;是中国为了适应信息技术的快速发展和安全威胁的新变化而推出的网络安全保护标准。相较于等保1.0&#xff0c;等保2.0更加强调主动防御、动态防御和全面审计&#xff0c;旨在实现对各类信息系统的全面保护。 安全计算环…

如何使用PHP和swoole进行大规模的网络爬虫开发?

如何使用php和swoole进行大规模的网络爬虫开发&#xff1f; 引言&#xff1a; 随着互联网的迅速发展&#xff0c;大数据已经成为当今社会的重要资源之一。为了获取这些宝贵的数据&#xff0c;网络爬虫应运而生。网络爬虫可以自动化地访问互联网上的各种网站&#xff0c;并从中…

Docker基础知识的掌握,相关基本命令的用法

安装docker步骤&#xff1a;https://b11et3un53m.feishu.cn/wiki/Rfocw7ctXij2RBkShcucLZbrn2d 1.docker Docker 是一种容器化平台&#xff0c;用于帮助开发者打包、发布和管理应用程序及其依赖关系。通过 Docker&#xff0c;开发者可以将应用程序及其所有依赖项打包到一个称为…

『MySQL 实战 45 讲』22 - MySQL 有哪些“饮鸩止渴”提高性能的方法?

MySQL 有哪些“饮鸩止渴”提高性能的方法&#xff1f; 需求&#xff1a;业务高峰期&#xff0c;生产环境的 MySQL 压力太大&#xff0c;没法正常响应&#xff0c;需要短期内、临时性地提升一些性能 短连接风暴 短连接模式&#xff1a;执行很少的 SQL 语句就断开&#xff0c;…

uniapp加载打点点效果

uniapp加载打点点效果 背景实现思路代码实现尾巴 背景 为了增加系统的交互性&#xff0c;我们在加载数据时通常会增加一些loading动效&#xff0c;但是在某些场景下只需要一些简单文字提醒。比如说使用【加载中】或者【loading】等字段&#xff0c;但是写静态的字符又显得交互…

【若依前后端分离】前端vue页面查看服务器本地的PDF

后端实现&#xff1a; 使用FileSystemResource包装文件&#xff0c;以便Spring MVC可以处理该资源 创建HttpHeaders对象以设置响应头 设置Content-Disposition头&#xff0c;使得浏览器以内联方式显示PDF&#xff08;即在浏览器中直接打开&#xff09; 设置Content-Type为appli…

Thinger.io 支持多协议、插件化100%开源 IoT 企业级物联网平台

项目源码&#xff0c;文末联系小编 Thinger.io 是一个开源插件化物联网平台&#xff0c;提供了设备原型、扩展和设备连接管理所需的一切工具。我们的目标是使物联网的使用民主化&#xff0c;使其可供全世界使用&#xff0c;并简化大型物联网项目的开发。 01 Thinger.io 物联网平…

Python学习路线图:120天系统学习,你也能成大神!

学Python&#xff0c;切忌今天这学一点&#xff0c;明天那里学一点&#xff0c;零零散散没有系统的学习。这样不仅耽搁大家时间&#xff0c;久而久之也会消磨大家学习的兴致&#xff01;这里给大家总结了一张系统的Python学习路线图&#xff01;希望大家共勉&#xff01; Pyth…

期末考试结束,成绩如何快速发布?

随着期末考试的落幕&#xff0c;老师们又迎来了一项繁琐的任务将成绩单私信给学生家长。这项工作耗时耗力&#xff0c;而且极易出错&#xff0c;期末老师的工作已经足够繁重还要私发成绩&#xff0c;简直是雪上加霜。 好消息是&#xff0c;现在有了易查分小程序&#xff0c;只需…

学会整理电脑,基于小白用户(无关硬件升级)

如果你不想进行硬件升级&#xff0c;就要学会进行整理维护电脑 基于小白用户&#xff0c;每一个操作点我都会在后续整理出流程&#xff0c;软件推荐会选择占用小且实用的软件 主要从三个角度去讨论【如果有新的内容我会随时修改&#xff0c;也希望有补充告诉我&#xff0c;我…

【Linux详解】进程地址空间

目录 研究背景 验证地址空间 实验一&#xff1a;父子进程变量地址一致性 实验二&#xff1a;变量值修改后父子进程的差异 分析与结论 实验三&#xff1a;进程地址空间验证 理解进程地址空间 区域与页表 写时拷贝机制 进程地址空间的意义 文章手稿&#xff1a; xmind…

基于语音识别的智能电子病历(二)苹果端的语音接入

是2011年参与的&#xff0c;俺负责Wav文件处理、FTP通讯和一些后端部分。iPhone/iPad/iPod Recorder 前2年还在APP Store上 说明 Step-by-Step Procedure to Install App and Use the FnetRecorder Download the App from Apple Store Launch Apple Store and key in “fnetr…

深入理解LibTorch:从安装到API详解

摘要&#xff1a; 本文将详细介绍LibTorch的安装步骤和主要API的使用方法&#xff0c;帮助开发者快速上手并利用LibTorch进行深度学习应用开发。 正文&#xff1a; 一、LibTorch开发背景与优势 PyTorch是一个灵活且功能强大的深度学习框架&#xff0c;它的动态计算图特性使…

golang中空值判断函数,支持任意类型的空值判断

使用反射方式对any任意类型的数据是否为空判断, 可判断时间对象是否为空, 可判断所有数字类型,指针类型和结构体字符串是否为空 判断规则: bool类型因为只有true和false 所以 全部视为非空 nil 类型全部视为空 所有数字类型的 零值全部视为空 对应指针类型数据,只要是非ni…

labview排错

源代码正常跑&#xff0c;应用程序报这个错&#xff0c;是因为源代码的可以找到项目路径内所有dll的路径&#xff0c;而应用程序只能找到data文件夹的dll文件 解决查看源代码中.net的程序集的路径&#xff0c;复制对应的dll到data文件夹下 在执行developinterface.dll出现labv…