TypeScript -- 基础类型

news2024/11/20 3:22:43

文章目录

    • 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.coloradmin.cn/o/790857.html

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

相关文章

关于 ivanti Access Client软件配置问题

最近需要使用ivanti工具连接校园网&#xff0c;但是经常出现ivanti连接后&#xff0c;WIFI或有线网络就显示无互联网连接的情况。 为此&#xff0c;我检查了一下网络的配置状态&#xff0c;发现ivanti连接的时候回临时创建一个网络adapter&#xff0c;该adapter有 一个身份验证…

Java训练二

一、斐波那契数列 1、1、2、3、5、8、13、21、34、...是一组典型的斐波那契数列&#xff0c;前两个数相加等于第三个数。那么请问这组数中的第n个数的值是多少&#xff1f; package haha; import java.util.Scanner; public class helloworld{public static void main(String…

Python基础语法第四章之函数

目录 一、函数 1.1函数是什么 1.2语法格式 1.3函数参数 1.4函数返回值 1.5变量作用域 1.5.1变量只能在所在的函数内部生效. 1.5.2 在不同的作用域中, 允许存在同名的变量 1.5.3如果函数内部尝试访问的变量在局部不存在, 就会尝试去全局作用域中查找 1.5.4如果是想在函数…

头戴式玩具外贸出口EN71检测报告需要什么资料?

EN71是欧盟市场玩具类产品的规范标准。儿童是全社会最关心和爱护的群体&#xff0c;儿童普遍喜爱的玩具市场发展迅猛&#xff0c;同时各类玩具由于各方面质量问题给儿童带来的伤害也时有发生&#xff0c;因此世界各国对本国市场上的玩具的要求正日益变得严格。许多国家都就这些…

【C语言day06】

逻辑或运算如果前表达式为真&#xff0c;后表达式不计算&#xff0c;第一次循环时i为0&#xff0c;执行i&#xff0c;第二次循环时i为1&#xff0c;是个真值&#xff0c;不再执行i&#xff0c;也就死循环了 在C语言中&#xff0c;一个函数如果不写返回值类型&#xff0c;那么就…

2023年深圳杯数学建模B题电子资源版权保护问题

2023年深圳杯数学建模 B题 电子资源版权保护问题 原题再现&#xff1a; 版权又称著作权&#xff0c;包括发表权、署名权、修改权、保护作品完整权、复制权、发行权、出租权、展览权、表演权、放映权、广播权、信息网络传播权、摄制权、改编权、翻译权、汇编权及应当由著作权人…

【Element-ui】学习与使用

网站快速成型工具Element&#xff0c;一套为开发者、设计师和产品经理准备的基于vue2.0的桌面端组件库 安装 npm i element-ui -S 在项目中安装element-ui&#xff0c;安装了以后查看package.json中的依赖中有没有element-ui的版本&#xff0c;如果有&#xff0c;则说明安装成功…

通过STM32内部ADC将烟雾传感器发送的信号值显示在OLED上

一.CubeMX配置 首先我们在CubeMX配置ADC1, 设置一个定时器TIM2定时1s采样一次以及刷新一次OLED&#xff0c; 打开IIC用于驱动OLED显示屏。 二.程序 在Keil5中添加好oled的显示库&#xff0c;以及用来显示的函数、初始化函数、清屏函数等。在主程序中初始化oled,并将其清屏。…

轻松学会 React 钩子:以 useEffect() 为例

一、React 的两套 API 以前&#xff0c;React API 只有一套&#xff0c;现在有两套&#xff1a;类&#xff08;class&#xff09;API 和基于函数的钩子&#xff08;hooks&#xff09; API。 任何一个组件&#xff0c;可以用类来写&#xff0c;也可以用钩子来写。下面是类的写法…

解密智能汽车云控基础平台网络架构

全球汽车产业正经历深度转型期&#xff0c;电动化、智能化、网联化成为该行业的主流趋势。随着技术的进步和人们对便利、智能出行的需求不断增加&#xff0c;智能汽车的市场前景广阔。 欲要了解智能汽车车联网&#xff0c;必先了解汽车智能化和网联化的管控中枢- 云控基础平台…

【C++】C++11---lambda表达式

目录 1、lambda表达式1&#xff09;什么是lambda表达式2&#xff09;lambda表达式语法3&#xff09;函数对象与lambda表达式 1、lambda表达式 1&#xff09;什么是lambda表达式 在C98中&#xff0c;如果想要对一个数据集合中的元素进行排序&#xff0c;可以使用std::sort方法…

算法竞赛入门【码蹄集新手村600题】(MT1040-1060)

算法竞赛入门【码蹄集新手村600题】(MT1040-1060&#xff09; 目录MT1041 求圆面积和周长MT1042 求矩形的面积和周长MT1043 椭圆计算MT1044 三角形面积MT1045 平行四边形MT1046 菱形MT1047 梯形MT1048 扇形面积MT1049 三角形坐标MT1050 空间三角形MT1051 四边形坐标MT1052 直角…

win10系统wps无法启动(打开文档)

我的win10系统中&#xff0c;之前可以顺畅地打开wps&#xff0c;但最近无法打开文档&#xff0c;停留在启动页面&#xff0c;在任务管理器中可以看到启动的wps线程&#xff0c;如果继续双击文档&#xff0c;线程增加&#xff0c;但依然无法打开文档。 wps版本是刚刚更新的15120…

【爬虫逆向案例】某名片网站 js 逆向 —— data解密

声明&#xff1a;本文只作学习研究&#xff0c;禁止用于非法用途&#xff0c;否则后果自负&#xff0c;如有侵权&#xff0c;请告知删除&#xff0c;谢谢&#xff01; 【爬虫逆向案例】某名片网站js逆向—— data解密 1、前言2、步骤3、号外 1、前言 相信各位小伙伴在写爬虫的…

免费的音频转换器带你突破音频格式束缚

曾经有一个名叫吴欢的音乐爱好者&#xff0c;他热爱收集各种音频文件&#xff0c;从经典的老歌到新潮的流行曲&#xff0c;样样都不放过。然而&#xff0c;他遇到了一个令人头疼的问题&#xff1a;因为音频格式的不同&#xff0c;他无法将一些珍贵的音乐记录转化为文字形式。他…

[ELK使用篇]:SpringCloud整合ELK服务

文章目录 一&#xff1a;前置准备-(参考之前博客)&#xff1a;1.1&#xff1a;准备Elasticsearch和Kibana环境&#xff1a;1.1.1&#xff1a;地址&#xff1a;[https://blog.csdn.net/Abraxs/article/details/128517777](https://blog.csdn.net/Abraxs/article/details/1285177…

Python 教程:面向对象详解

目录&#xff1a; 面向对象 面向对象技术简介 类定义 类对象 self 代表类的实列&#xff0c;而非类 类的方法 继承 多继承 方法重写 类属性与方法 类的私有属性 类的方法 类的私有方法 运算符重载 概要 Python从设计之初就已经是一门面向对象的语言&#xff0c;正因…

小米手机开启智能设备的OTA升级方法

支持的手机列表 手机 市场名称 版本 1 L18-SD8475 小米MIX FOLD 2 / 2 L1-SD8475 小米MIX5 Pro / 3 L2-SD8450 小米12 Pro 13.0.30|稳定版 4 L2S-SD8475 小米12S Pro / 5 L3-SD8450 小米12 6 L3A-SD8250AC 小米12X 13.22.4.7|开发版 7 K8-SD8350A…

C语言float类型学习

C语言的小数类型有两种&#xff0c;float和double&#xff1b; float 称为单精度浮点型&#xff0c;double 称为双精度浮点型&#xff1b; float 占用4个字节&#xff0c;double 占用8个字节&#xff1b; 下面看一下float&#xff1b; #include <stdio.h>int main() {…