首页 > 其他分享 ># TypeScript 类型声明、数据类型

# TypeScript 类型声明、数据类型

时间:2023-12-25 15:14:51浏览次数:39  
标签:TypeScript 数据类型 number 123 let 类型 声明 赋值

TypeScript 类型声明、数据类型

好烦

数据类型

JavaScript 的类型分为两种:原始数据类型(Primitive data types)对象类型【引用数据类型】(Object types)

原始数据类型包括:布尔值数值字符串nullundefined 以及 ES6 中的新类型 Symbol 和 ES10 中的新类型 BigInt

类型声明

看下面的代码:

let num = 10;
num = "123"

我们创建了一个 num 变量,赋值 10 ,然后我们修改 num 为一个字符串。在 js 当中,这是非常正常的一个操作,同时也是 js 语法里面所允许的操作,但是看 ts 里面:

在这里插入图片描述
这种操作在 ts 里面是不被允许的:

在这里插入图片描述

他会告诉我们不能把字符串赋值给数字的变量,ts 在内部给我们进行了一个类型的校验,这一点是和 js 不同的,在 ts 中,即时我们在创建变量的时候没有设置 :number 进行数据类型声明, ts 依旧会给我们进行数据类型的校验。

在这里插入图片描述

和我们给 num 声明了数据类型的效果是一样的,当然,这个 number 首字母大小写都是一样的,根据个人喜好设置就可以,只要标识这个变量是什么类型的就可以了,莫纠结,,但是建议是小写。

在这里插入图片描述

修改成数字就可以了,不会在报错了。

这个过程就叫做类型声明,是 ts 的最大特点。通过类型声明,我们可以对 ts 的变量、参数、形参的类型进行设置。

比如我们创建一个方法需要一个参数:

在这里插入图片描述
如果我们没有声明参数 a 的类型,它默认是 any,也就是它会自己从用法中推断出更好更合适的类型。但是如果声明了 a 的类型:

function wjw(a:string) {
  console.log(a)
}
wjw(123)

我们声明了 a 是一个字符串类型的参数,我们调用如果传进数字类型的话,语法校验就会出问题:

在这里插入图片描述
意思是传入的参数类型有问题。必须传入 string 类型数据。这是由 ts 编译器进行自动检查实现的。
类型声明给变量设置了类型后,使用变量只能存储设置的类型值。

原始数据类型

布尔值

布尔值是最基础的数据类型,在 TypeScript 中,使用 boolean 定义布尔值类型。

let flag:boolean = true

boolean 表示 flag 参数为布尔类型。以后给 flag 赋值的时候,只能是布尔类型。

let flag:boolean = true
flag = false

注意一点哈,布尔值赋值,只能是 truefalse,设置 0 或者是 1 都不可以。

数值

使用 number 定义数值类型。

let age:number = 18
age = 19

也是一样的,很简单,不赘述了。
但是有一点需要说一下,数字类型除了整数,还可以赋值其他数字类型,比如:二进制、八进制、十六进制等。

let a1:number = 0x123 // 十六进制
let a2:number = 0b101 // 二进制
let a3:number = 0o12 // 八进制
let a4:number = 1.23  // 小数
let a5:number = 123e-2 // 科学计数法
let a6:number = 123e2 // 科学计数法

上面这几种知道就好。

字符串类型

使用 string 定义字符串类型。

let str:string = "我是ed."
str = "我是wjw"

Null 和 Undefined

在 TypeScript 中,可以使用 null 和 undefined 来定义这两个原始数据类型。

let u:undefined = undefined
let n:null = null

设置了之后不允许在改为别的数据,不然语法校验不会通过。

在这里插入图片描述

所以说呢,这两个用处其实不大,几乎没有人会这样设置,当然了,业务需求除外哈。

但是! 尽管 undefined 和 null 不能修改成其他数据类型的值,但是他俩可以设置为其他类型的值作为字类型。即:可以把undefined 和 null 赋值给其他类型的变量。

let w: number = 18
w = null

这是没有问题的!语法校验不会出问题。

在这里插入图片描述

引用数据类型

数组

第一印象这样写是不可以的哈:

let arr1:Array = []

这是不行的,语法校验不能通过的:

在这里插入图片描述

为什么呢,因为我们更在意的不是他是不是数组,而是数组里面的元素是什么类型的。

let arr1:number[] = []

应该这个样子,告诉他是一个数据,是一个 number 类型的数组,这样就可以了。

这时候如果你重新赋值一个字符串类型的,他就会报错了。

在这里插入图片描述
你只能赋值数值类型的。

在这里插入图片描述
但是如果是一个空数组的话,就不需要声明类型。

let arr2: [] = []

这样子就可以了。

还可以通过泛型的方式创建数组。

let arr3: Array<number> = [10, 20, 30]

直接告诉他是一个数字,数组内元素是 number 类型。

对象

object 表示非原始类型,除了 number、string、boolean 之外的类型。

let obj:object = {}

注意一点哟:

在这里插入图片描述

any 和 void

看下面的代码:

let flag: boolean = true

我们给 flag 声明了布尔类型,只能设置 true 或者 false。但是后台如果返回的是 0 或者 1 怎么办?没法赋值啊?我们不能确定后端返回的数据类型,或者是在定义变量的时候还不能确定应该声明什么类型,这个时候我们怎么办呢?

这个时候有一个类型叫 any 类型提供给我们使用了,他表示任何类型

let h:any = 123
h = true

这个时候,无论什么类型我们都可以赋值给他。

在这里插入图片描述
void 表示空值,表示没有任何返回值的函数。

例如下面的方法,表示没有任何返回值:

function fun1() {
    console.log("123");
}
console.log(fun1());

我们运行一下看一下结果:

在这里插入图片描述

看上面的截图不难发现, void 可以给 undefined 赋值,表示没有任何类型,当然这样写也没有任何意义。

let v: void = undefined

所以说 void 更多的使用在函数上面,表示函数没有任何返回值数据。

当然如果函数有返回值,定义返回值的类型,要像下面一样定义:

function fun2(): number {
  console.log("123")
  return 123
}
console.log(fun2())

类型推论

如果没有明确的变量指定类型,那么 TypeScript 会依照类型推论(Type Inference)的规则推断出一个类型。

比如说:

let t = 123
t = "123"

我们现在声明了一个 t 初始化数字 123,然后我又赋值字符串的 “123”,发现校验报错了。

在这里插入图片描述

其实在我们初始化变量的时候,尽管我们没有主动设置变量类型,但是他进行了类型推论,根据我们的赋值,自动帮我们进行了类型设置,设置为 number 类型,因此等同于:

let t:number = 123
t = "123"

所以会报错。

在这里插入图片描述

还有一种情况,就是我们创建一个变量后不赋值,那么我们可以设置任何数据类型值。

let g
g = 123
g="123"
g = []
g = {}
g = true

这样是不会报错的,因为它默认给我们类型推论成了 any 类型。

在这里插入图片描述

总结一下:

  • 定义变量的时候,直接给变量赋值,则定义类型为初始化变量时候对应的类型。
  • 定义变量的时候,只声明不赋值,则定义类型为 any 类型。

联合类型

联合类型(Union Types)表示取值可以为多种类型中的一种。

之前有过一个案例:

在这里插入图片描述

看上面截图,既然 flag 可能是 true、false,也可能是 0、 1 。这个是确定的,那么我们可以不使用 any 类型,而是使用联合类型。

let flag1:boolean | number = true;
flag1 = 1;

这样子就可以了,这是类型要不是布尔,要不是数字类型。

但是要注意一点,就是操作值的方法会不会报错,就像是:

在这里插入图片描述
就会出现报错的问题,要注意!

反正哈:当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型里共有的属性或方法。

好了,今天就先到这里吧!

标签:TypeScript,数据类型,number,123,let,类型,声明,赋值
From: https://www.cnblogs.com/wjw1014/p/17926116.html

相关文章

  • # 1. TypeScript 简介
    1.TypeScript简介烦教程地址教程资源:https://ts.xcatliu.com/introduction/what-is-typescript.html#link-1中文官网:https://www.typescriptlang.org/TypeScript特点JS的超集包含JS的所有元素能够运行JS代码支持ES语法是一种开源、跨平台的编程语言编译器......
  • Go 变量声明
    变量声明Go中使用var或者const关键字声明变量:var<变量名>[变量类型]变量赋值的格式是:<变量名>=<值,表达式,函数等>声明和赋值通常会合起来写:var<变量名>[变量类型]=<值,表达式,函数等>比如声明一个string类型的name变量:varnamestring="golang"变量还可以......
  • Numpy中数据类型转换的tips
    在逛StackOverflow时看见一个关于numpy的浮点数据转换的问题比较有趣,现当作tips记录下来。问题原地址我们知道,在numpy中,浮点数据同python本身一样,是用双精度(float64)来存储数据的,而Pytorch或者其他的一些框架中,为了节省运算量,其浮点是用单精度(float32)来存储数据的,因此需要用到数......
  • 解决SQL SERVER 2022数据库的表中修改字段的数据类型后不能保存
    SQLSERVER2008数据库的表中修改字段的数据类型后,不能保存:启动MSSQLSERVER2008,选择菜单工具-〉选项-〉左侧有个设计器-〉表设计器和数据库设计器。然后去掉“阻止保存要求重新创建表的更改”前面的勾。重新启动MSSQLSERVER2008即可http://kangry.net/blog/?type=article&......
  • Typescript中的never类型
    在TypeScript中,never类型表示那些永远不会发生的类型。它通常用来表示以下情况:函数的返回类型:如果一个函数永远不会返回(例如抛出异常或进入无限循环),可以将其返回类型标注为never。functionthrowError(message:string):never{thrownewError(message);}function......
  • Typescript中的类型断言
    类型断言(TypeAssertion)是TypeScript中的一种语法,用于手动指定一个值的类型。它类似于其他语言中的类型转换,但是在TypeScript中,类型断言并不会改变变量的底层类型。在使用类型断言时,需要使用尖括号或者as关键字来指定目标类型。例如:constvalue:any='helloworld';con......
  • 变量与基本数据类型
    一,程序员的自我修养---注释注释:指在程序代码中对程序进行解释说明的文字 他只能给人类阅读不能给机器执行作用:可以用来写一些代码的思路的解释,帮助他人和未来的自己理解代码的意思1.1单行注释python使用#号作为单行注释的符号语法格式#注释内容#print(555)说......
  • Typescript 类型基础操作
    Typescript类型基础Typescript的类型系统非常强大,它可以让你通过类型操作符基于现有的类型创建出新的类型。在面对复杂的类型需求的时候,可以通过下面的常见类型操作使类型创建更加简单、代码更加容易维护。1、泛型泛型主要是为了解决类型复用的问题。可以说泛型给了你在使用......
  • Day37 数组的定义、声明和创建
    数组的定义数组是相同类型数据的有序集合数组描述的是相同类型的若干个数据,按照一定的先后次序排列组合而成。其中,每一个数据称作一个数组元素,每个数组元素可以通过一个下标来访问它们.​(数组的下标是从0开始的!!!!!!)数组的声明和创建1.首先必......
  • Typescript 函数详解
    前言虽然JS/TS支持面向对象编程,但大部分时候还是在写函数。函数是一等公民。本文介绍下如何在TypeScript中使用函数,包括:函数类型声明函数参数类型:可选参数、默认参数、剩余参数函数返回值类型this类型函数重载函数类型面试中经常会被问到,JS中有哪几种数据类型。其中就会有函......