TypeScript -- 基础类型

文章目录

    • TypeScript -- 基础类型
    • let 和 const
    • 基本类型写法
      • 布尔类型 -- boolean
      • 数字类型 -- number
      • 字符串类型 -- string
      • 数组类型
      • 元组类型
      • 枚举类型 -- enum
      • 任意类型 -- any
      • 空值 -- void
      • Null 和 Undefined
      • 不存在的类型 -- never
      • 对象 -- object
      • 类型断言

TypeScript – 基础类型

    1 .'boolean' -- 布尔类型,可以赋值true/false 和Boolean()对象2. 'number' -- 数字类型,可以赋值'2/8/10/16进制''整数类型''小数类型''NaN''Infinity(表示无穷大)'3. 'string' -- 字符串类型4. '数组类型' -- '类型[]' /' Array<类型>'5. '元组类型' -- '[类型]'6. 'enum'    -- 枚举7. 'any'     -- 任意类型8. 'void'    -- 空置,定义方法时候没有返回值使用9.'null/undefined' -- 'Null 和 Undefined'10. 'never'  -- 不存在类型一般用于错误处理函数.例如'抛出异常'/'死循环'11. 'object' -- 对象12. '类型断言' --  手动指定一个值的类型。

let 和 const

两者区别'const' 必须定义就赋值,'let' 定义时候可以不赋值,但使用时候
必须赋值
  • 错误示范
// const
const name1 : string // ts会校验 定义时必须要赋值
// let
let name2 : string // 这一步是正确的可以定义不赋值
console.log(name2) // 错误的 使用时候必须要赋值
  • 正确写法
// const
const name1 : string = 'Tom'
console.log(name1)  // 打印结果 Tom
// let
let name2 : string // 当然也可以写成 let name2:string = 'Anne'
name1 ='Anne'
console.log(name2) // 打印结果是Anne

基本类型写法

布尔类型 – boolean

1.只能赋值true 或者 false和Boolean()对象
  • 赋值为true 和 false
let bool:boolean = true // 只能赋值true 或者 false 和Boolean()对象
bool = false // 重新赋值
console.log(bool) // 打印结果false
  • 赋值为Boolean()对象
let bool: boolean = Boolean(1)
console.log(bool) // true

数字类型 – number

1.ts 和 js 一样,TypeScript里的所有数字都是浮点数。不像java中有整数类
型、双精度类型等等,因为'ts' 的 数字表现形式是'number'
2.定义成number 只能赋值有:'二进制''八进制''十进制''十六进制''整数类型和小数类型(整数类型可以算进十进制)''NaN(非数字类型)''Infinity(表示无穷大)'

使用 number 定义数值类型

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
// ES6 中的二进制表示法
let binaryLiteral: number = 0b1010;
// ES6 中的八进制表示法
let octalLiteral: number = 0o744;
let notANumber: number = NaN;
let infinityNumber: number = Infinity;

编译结果

var decLiteral = 6;
var hexLiteral = 0xf00d;
// ES6 中的二进制表示法
var binaryLiteral = 10;
// ES6 中的八进制表示法
var octalLiteral = 484;
var notANumber = NaN;
var infinityNumber = Infinity;

字符串类型 – string

let str: string = 'abc'
str = `字符串: ${ str }` //  字符串也支持es6的`` 拼接写法
console.log( str )

数组类型

数组类型是用来限制数组内部元素的类型,有两种写法
1.'「类型 + 方括号」表示法'
2.'数组泛型'
  • 「类型 + 方括号」
// 第一种写法
let arr: number[]
arr = [1,2,3,4]
  • 泛型
// 第二种写法泛型
let arr: Array<number>
arr = [1,2,3,4]
  • 联合类型
let arr: (string|number)[] // 既可以是数字也可以是字符串类型
arr = [1,'abc']// 联合类型泛型的形式
let arr: Array<string|number>
arr = [1,'abc']

元组类型

数组合并了相同类型的对象,而元组(Tuple)合并了不同类型的对象。
1.元组类型:固定长度固定类型
2.顺序必须一一对应
3.是可以'push' 往里面添加元素,但只能添加定义好的联合类型
let tom: [string, number, boolean]
tom = ['abc', 1, true]

枚举类型 – enum

枚举(Enum)类型用于取值被限定在一定范围内的场景,比如一周只能有七天,颜色限定为红绿蓝等。
  • 枚举定义
//  简单例子
enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat}; // 枚举成员默认会被赋值为从 0 开始递增的数字

// 也可以手动赋值 
enum Days {Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat};console.log(Days["Sun"] === 7); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true

  • 枚举项有两种类型:常数项(constant member)和计算所得项(computed member)。
// 上面的例子是常数项,下面是一个典型的计算所得项的例子enum Color {Red, Green, Blue = "blue".length} // "blue".length 就是一个计算所得项

打印出来是这个结构

注意:紧接在计算所得项后面的必须手动赋值的项,否则它就会因为无法获得初始值而报错

任意类型 – any

1.有些值可能来自于动态的内容,比如来自用户输入或第三方代码库。 这种情况下,我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用any类型来标记这些变量
2.如果变量在声明的时候,未指定其类型,那么它会被识别为任意值类型

如果是一个普通类型,在赋值过程中改变类型是不被允许的

//  错误写法
let name: string = 'Tom'
str= 7// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

但如果是 any 类型,则允许被赋值为任意类型。

let name: any= 'Tom'
name = 7
name = true

声明一个变量为任意值之后,对它的任何操作,返回的内容的类型都可以是任意值。这就违背了
我们用ts严格规范类型的意义,所以在项目中尽可能少用any定义类型

空值 – void

// 'void'表示没有任何返回值的函数function getName(): void {alert('My name is Tom');
}

Null 和 Undefined

void 的区别是,undefinednull 是所有类型的子类型。也就是说 undefined 类型
的变量,可以赋值给 number 类型的变量
let u: undefined = undefined;
let n: null = null;
let u: undefined
let num: number = u; // 这样不会报错

不存在的类型 – never

1.never类型表示的是那些永不存在的值的类型。 例如, never类型是那些总是会抛出异常或
根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型; 变量也可能是 never
类型,当它们被永不为真的类型保护所约束时。2.never类型是任何类型的子类型,也可以赋值给任何类型;然而,没有类型是never的子类型
或可以赋值给never类型(除了never本身之外)。 即使 any也不可以赋值给never
let x: never;
let y: number;// 运行错误,数字类型不能转为 never 类型
x = 123;// 运行正确,never 类型可以赋值给 never类型
x = (()=>{ throw new Error('exception')})();// 运行正确,never 类型可以赋值给 数字类型
y = (()=>{ throw new Error('exception')})();// 返回值为 never 的函数可以是抛出异常的情况
function error(message: string): never {throw new Error(message);
}// 返回值为 never 的函数可以是无限循环这种无法被执行到的终止点的情况
function loop(): never {while (true) {}
}

对象 – object

let obj:object = {name:"tom"
}
function objFun(obj:object): void{console.log(obj)
}
objFun(obj)

类型断言

1.当 ts 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型
里共有的属性或方法
2.两种写法:'<类型>值'  或者 '值 as 类型'
  • 两种写法
// 尖括号写法:<类型>值
let str: any = "this is a string";
let strLength: number = (<string>str).length;// as 的写法: 值 as 类型
let str: any = "this is a string";
let strLength: number = (str as string).length;
  • 函数中的应用
function getLength(something: string | number): number {if ((<string>something).length) {return (<string>something).length;} else {return something.toString().length;}
}

注意:类型断言不是类型转换,断言成一个联合类型中不存在的类型是不允许的

function toBoolean(something: string | number): boolean {return <boolean>something;
}// index.ts(2,10): error TS2352: Type 'string | number' cannot be converted to type 'boolean'.
//   Type 'number' is not comparable to type 'boolean'.

在这里插入图片描述

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

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

相关文章

【Linux下6818开发板(ARM)】SecureCRT串口和交叉编译工具(巨细版!)

(꒪ꇴ꒪ ),hello我是祐言博客主页&#xff1a;C语言基础,Linux基础,软件配置领域博主&#x1f30d;快上&#x1f698;&#xff0c;一起学习&#xff01;送给读者的一句鸡汤&#x1f914;&#xff1a;集中起来的意志可以击穿顽石!作者水平很有限&#xff0c;如果发现错误&#x…

【网络编程】(TCP流套接字编程 ServerSocket API Socket API 手写TCP版本的回显服务器 TCP中的长短连接)

文章目录 网络编程TCP流套接字编程ServerSocket APISocket APITCP中的长短连接手写TCP版本的回显服务器 网络编程 TCP流套接字编程 TCP提供的API主要是两个类:ServerSocket 和 Socket . TCP不需要一个类来表示"TCP数据报"因为TCP不是以数据报为单位进行传输的.是以…

管理类联考——数学——趣味篇——可视化

Manim: 一个数学可视化的动画引擎 官网&#xff1a;https://3b1b.github.io/manim/index.html 名词解析 python3.7是python语言的解释器, 运行python程序的环境必备品. 这个没啥说的,大家都能懂. 虽然官方建议3.7,但是我用3.8发现也没问题.考虑未来的历史进程,大伙最好还是装…

html中使用Vue+element UI动态创建表单数据不显示问题

直接上代码&#xff1a;html代码如下 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content&…

Ansible的应用

Ansible简介 Ansible是一个基于Python开发的配置管理和应用部署工具&#xff0c;现在也在自动化管理领域大放异彩。它融合了众多老牌运维工具的优点&#xff0c;Pubbet和Saltstack能实现的功能&#xff0c;Ansible基本上都可以实现。 Ansible能批量配置、部署、管理上千台主机…

Io进、线程——进程的基础

进程的基础 进程是计算机中最基本的执行单位&#xff0c;是程序在操作系统中的一次执行过程。每个进程都有自己的地址空间、数据栈、程序计数器等&#xff0c;相互之间独立运行&#xff0c;互不干扰。进程间的通信通过特定的机制来实现&#xff0c;进程的创建和撤销由操作系统…

[AWD靶场搭建]

文章目录 [AWD靶场搭建]前言AWD平台搭建靶机搭建Cadinal添加靶机 连接Asteroid大屏默认ssh账号密码参考 [AWD靶场搭建] 前言 觉得好玩搭建了一下AWD靶场&#xff0c;使用了vidar-team编写的 Cardinal AWD平台搭建 这里我是在kali搭建的&#xff0c;所以我下载了这个压缩包&…

FANUC机器人SRVO-050碰撞检测报警和SRVO-053干扰值过大故障报警总结

FANUC机器人SRVO-050碰撞检测报警和SRVO-053干扰值过大故障报警总结 前面和大家分享了关于SRVO-050碰撞检测报警和SRVO-053干扰值过大的原因分析以及处理方法,感兴趣的朋友可以参考以下链接中的内容: FANUC机器人SRVO-050碰撞检测报警原因分析及处理对策

Java阶段五Day15

Java阶段五Day15 文章目录 Java阶段五Day15分层其他依赖dao-apidao-implinfrustructuredomainadaptermain 测试整合项目main前台师傅功能luban-front配置师傅相关表格ER图ER练习案例鲁班表格ER关系&#xff08;非常重要&#xff09; 前台师傅接口——师傅入驻adapterdomaininfr…

如何判断某个视频是深度伪造的?

目录 一、前言 二、仔细检查面部动作 三、声音可以提供线索 四、观察视频中人物的身体姿势 五、小心无意义的词语 深造伪造危险吗&#xff1f; 一、前言 制作深度伪造视频就像在Word文档中编辑文本一样简单。换句话说&#xff0c;您可以拍下任何人的视频&#xff0c;让他…

谷粒商城第六天-实现功能的前序工作(网关的配置 跨域配置)

目录 一、为什么要做这项工作 1.1 为什么要配置网关 1.2 为什么要使用网关统一配置跨域 二、网关配置 三、统一跨域配置 四、总结 一、为什么要做这项工作 1.1 为什么要配置网关 我们知道网关的作用其实主要就是进行路由的&#xff0c;也就是根据前端发送到网关的请求&…

【docker】docker部署nginx

目录 一、步骤二、示例 一、步骤 1.搜索nginx镜像 2.拉取nginx镜像 3.创建容器 4.测试nginx 二、示例 1.搜索nginx镜像 docker search nginx2.拉取nginx镜像 docker pull nginx3.创建容器&#xff0c;设置端口映射、目录映射 # 在root目录下创建nginx目录用于存储nginx数据…

Vue3解决:Mockjs 引入后并访问 404(Not Found) 的页面报错问题

1、问题描述&#xff1a; 其一、报错为&#xff1a; GET http://localhost:5173/list 404 (Not Found) ncaught (in promise) AxiosError {message: Request failed with status code 404, name: AxiosError, code: ERR_BAD_REQUEST, config: {…}, request: XMLHttpRequest,…

大采购3.0,打造企业采购数智化的韧性变革!

大采购3.0&#xff0c;深化采购全链路管控&#xff0c;聚焦数智化运营、智慧化监管、个性化需求适配、一体化协同、稳定可靠、安全可信、企业级服务七大核心基因&#xff0c;围绕采购管理、供应商全生命周期管理、人工智能深入应用、易用性、交付能力等方面进行了全面升级和优化…

.NET 8 Preview 5推出!

作者&#xff1a;Jiachen Jiang 排版&#xff1a;Alan Wang 我们很高兴与您分享 .NET 8 Preview 5 中的所有新功能和改进&#xff01;此版本是 Preview 4 版本的后续版本。在每月发布的版本中&#xff0c;您将看到更多新功能。.NET 6 和 7 用户可以密切关注此版本&#xff0c;而…

数据结构--图的遍历 BFS

数据结构–图的遍历 BFS 树的广度优先遍历 从 1 结点进行 b f s bfs bfs的顺序&#xff1a; 【1】 【2】【3】【4】 【4】【6】【7】【8】 图的广度优先遍历 从 2 号点开始 b f s bfs bfs的顺序&#xff1a; 【2】 【1】【6】 【5】【3】【7】 【4】【8】 树 vs 图 不存在“回…

系统学习Linux-MySQL服务基础(一)

一、MySQL服务概述 什么是数据库&#xff1f; 将大量数据保存起来&#xff0c;通过计算机加工而成的可以进行高效访问的数据集合 数据库是存储、管理和操作组织化数据的软件系统 数据库能干什么&#xff1f; 企业应用存放用户数据、管理企业数据金融行业存储分析客户的财务…

pear文件利用 (远程文件下载、生成配置文件、写配置文件) 从一道题看——CTFshow私教 web40

web40 考点&#xff1a;pear文件包含 pear是PHP的一个扩展 条件&#xff1a; 1 有文件包含点 2 开启了pear扩展 &#xff08;可以当他是一个框架&#xff09; 3 配置文件中register_argc_argv 设置为On,而默认为Off&#xff08;$_SERVER[‘argv’]生效&#xff09; 4 找到…

【力扣每日一题】2023.7.25 将数组和减半的最少操作次数

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码运行结果&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 题目给我们一个数组&#xff0c;我们每次可以将任意一个元素减半&#xff0c;问我们操作几次之后才可以将整个数组的和减半&…

【cpolar内网穿透工具】

文章目录 cpolar内网穿透工具.md概述什么是cpolar&#xff1f;cpolar可以用在哪些场景&#xff1f; 1. 注册cpolar帐号1.1 访问官网站点&#xff1a;[https://www.cpolar.com](https://link.zhihu.com/?targethttps%3A//www.cpolar.com/) 1.2 注册帐号 2. 下载Windows版本cpol…