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() //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!")  
};

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

精品UI知识付费系统源码网站EyouCMS模版源码

这是一款知识付费平台模板&#xff0c;后台可上传本地视频&#xff0c;批量上传视频连接&#xff0c; 视频后台可设计权限观看&#xff0c;免费试看时间时长&#xff0c;会员等级观看&#xff0c;付费观看等功能&#xff0c; 也带软件app权限下载&#xff0c;帮助知识教育和软件…

通讯录管理系统——删除联系人——检测联系人是否存在

功能描述&#xff1a;按照姓名删除指定联系人 删除联系人实现步骤&#xff1a; 1.封装检测联系人是否存在 2.封装删除联系人函数 3.测试删除联系人功能 一、封装检测联系人是否存在 设计思路&#xff1a; 删除联系人前&#xff0c;我们需要先判断用户输入的联系人是否存…

饮料添加剂光照试验太阳光模拟器试验箱

饮料添加剂光照试验是一种用来评估饮料在光照条件下稳定性的实验方法。这个过程通常包括以下几个步骤&#xff1a; 样品准备&#xff1a; 首先&#xff0c;将饮料密封在市售包装或近似市售包装中&#xff0c;确保包装的完整性和密封性。 光照条件设置&#xff1a; 将封装好的…

【云原生】深入理解Pod的使用进行管理

深入理解Pod 文章目录 深入理解Pod一、介绍Pod1.1、什么是Pod1.2、Pod的特点1.3、Pod的用途1.4、Pod网络1.5、Pod存储1.6、Pod的工作方式 二、创建Pod2.1、命令行创建Pod2.2、资源清单创建Pod2.2.1、镜像拉取策略2.2.2、Pod重启策略2.2.3、部署资源2.2.4、删除资源 三、静态Pod…

自养号测评助力:亚马逊、沃尔玛电商高效测评补单技巧,轻松实现销量与补单双赢

要在竞争激烈的市场中通过测评补单的方式提升产品权重和销售&#xff0c;构建一个稳定且高效的测评补单系统至关重要。通过精心培养一批高质量的买家账号&#xff0c;并深入了解真实买家的行为数据&#xff0c;结合对风控数据的精准把控&#xff0c;我们能够自主推动推广进程&a…

25岁庆生|人大金仓带你这样过!

25年&#xff0c;是一个重要的时间节点 一个世纪的四分之一 百年基业的第一站&#xff0c;我们已经走过 人大金仓即将25岁了&#xff0c;感谢有你 趣味运动会 今日上午 二十五周年司庆终极活动正式开启 北京、成都、天津、青岛、西安 五地同步举行趣味运动会 活力四射的集体健走…

datax入门(data-web的简单使用)——02

datax入门&#xff08;data-web的简单使用&#xff09;——02 1. 前言1.1 关于data-web官网1.1.1 源码下载1.1.2 datax-Web部署手册1.1.2.1 Linux环境部署手册1.1.2.2 本地开发环境部署手册 1.2 关于datax入门 2. 下载之后打包、启动、登录2.1 我的本地环境2.2 修改配置2.3 初始…

记一次小程序渗透

这次的小程序渗透刚好每一个漏洞都相当经典所以记录一下。 目录 前言 漏洞详情 未授权访问漏洞/ 敏感信息泄露&#xff08;高危&#xff09; 水平越权&#xff08;高危&#xff09; 会话重用&#xff08;高危&#xff09; 硬编码加密密钥泄露&#xff08;中危&#xff0…

【Python报错】已解决 ModuleNotFoundError: No module named ‘transformers‘

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 引入 ModuleNotFoundError: No module named ‘transformers’ 是一个常见的错误&#xff0c;它表明你的Python环境中没有安装t…

普及GIS知识,推动产业发展

915 GIS节&#xff1a;普及GIS知识&#xff0c;推动产业发展 自2008年起&#xff0c;每年的9月15日被定为“GIS节”&#xff0c;这一特殊的节日由超图首次发起倡议&#xff0c;旨在打造一个普及和传播GIS&#xff08;地理信息系统&#xff09;知识的平台&#xff0c;促进大众对…

一次可输入多张图像,还能多轮对话!最新开源数据集,让AI聊天更接近现实

大模型对话能更接近现实了&#xff01; 不仅可以最多输入20张图像&#xff0c;还能支持多达27轮对话。可处理文本图像tokens最多18k。 这就是最新开源的超长多图多轮对话理解数据集MMDU&#xff08;Multi-Turn Multi-Image Dialog Understanding&#xff09;。 大型视觉语言模…

Python数据分析案例47——笔记本电脑价格影响因素分析

案例背景 博主对电脑的价格和配置一直略有研究&#xff0c;正好最近也有笔记本电脑相关的数据&#xff0c;想着来做点分析吧&#xff0c;写成一个案例。基本上描述性统计&#xff0c;画图&#xff0c;分组聚合&#xff0c;机器学习&#xff0c;交叉验证&#xff0c;搜索超参数…

【Vision Transformers-VIT】: 计算机视觉中的Transformer探索

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…

嵌入式Linux系统编程 — 4.5 strcmp、strchr 等函数实现字符串比较与查找

目录 1 字符串比较 1.1 strcmp() 函数 1.2 strncmp() 函数 1.3 示例程序 2 字符串查找 2.1 strchr() 函数 2.2 strrchr() 函数 2.3 strstr() 函数 2.4 strpbrk() 函数 2.5 示例程序 1 字符串比较 strcmp() 和 strncmp() 函数是C语言标准库中用于比较两个字符串的函…

STM32 HAL库 外部中断 实现按键控制LED亮灭

目录 1、为什么使用GPIO外部中断控制LED亮灭&#xff1f; 2、NVIC嵌套向量中断控制器 3、EXTI外部中断 4、项目的硬件排线 5、STM32CUBE_MX配置 6、HAL库代码 7、实际效果 1、为什么使用GPIO外部中断控制LED亮灭&#xff1f; 实现LED亮灭控制有很多方式&#xff0c;其中…

等保2.0安全计算环境解读

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

自适应响应式瓷砖地板建材网站源码pbootcms模板

模板介绍 一款全面的自适应响应式瓷砖地板建材网站源码pbootcms模板。该模板兼容所有浏览器&#xff0c;整站源码下载&#xff0c;可以帮您节约建站成本&#xff0c;以高质量高效率完成网站的设计创建。 模板截图 源码下载 自适应响应式瓷砖地板建材网站源码pbootcms模板

IDEA错误:command line is too long 命令行过长

今天运行程序时遇到了一个错误&#xff0c;提示如下&#xff1a; 那么话不多说&#xff0c;如何解决呢&#xff1f; 首先点击右上角的编辑配置 点击修改选项 点击缩短命令行 选择JAR清单 好了&#xff0c;问题解决

数据分析-常用模型-RFM模型

一、RFM模型的底层逻辑 漏斗模型中&#xff0c;大部分业务都是按流程推进&#xff0c;可以做漏斗分析。但是&#xff0c;大家有没有想过一个问题&#xff1a; 如果没有转化过程记录&#xff0c;该怎么办&#xff1f;如果用户行为频率很高&#xff0c;有几十个漏斗&#xff0c…

AI与音乐的结合

前言 毫无疑问,AI的发展已经在音乐领域带来了诸多变化和影响.但人类创作仍然具有不可替代的重要性。人类的灵感、创造力以及对音乐的深刻理解和情感表达是音乐产业的核心动力来源。AI 更倾向于被视为一种辅助工具&#xff0c;与人类创作者相互协作和融合&#xff0c;共同推动音…