# TypeScript 类型声明、数据类型

TypeScript 类型声明、数据类型

好烦

数据类型

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

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

类型声明

看下面的代码:

javascript 复制代码
let num = 10;
num = "123"

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

这种操作在 ts 里面是不被允许的:

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

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

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

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

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

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

javascript 复制代码
function wjw(a:string) {
  console.log(a)
}
wjw(123)

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

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

原始数据类型

布尔值

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

javascript 复制代码
let flag:boolean = true

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

javascript 复制代码
let flag:boolean = true
flag = false

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

数值

使用 number 定义数值类型。

javascript 复制代码
let age:number = 18
age = 19

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

javascript 复制代码
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 定义字符串类型。

javascript 复制代码
let str:string = "我是ed."
str = "我是wjw"

Null 和 Undefined

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

javascript 复制代码
let u:undefined = undefined
let n:null = null

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

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

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

javascript 复制代码
let w: number = 18
w = null

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

引用数据类型

数组

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

javascript 复制代码
let arr1:Array = []

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

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

javascript 复制代码
let arr1:number[] = []

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

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

你只能赋值数值类型的。

但是如果是一个空数组的话,就不需要声明类型。

javascript 复制代码
let arr2: [] = []

这样子就可以了。

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

javascript 复制代码
let arr3: Array<number> = [10, 20, 30]

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

对象

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

javascript 复制代码
let obj:object = {}

注意一点哟:

any 和 void

看下面的代码:

javascript 复制代码
let flag: boolean = true

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

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

javascript 复制代码
let h:any = 123
h = true

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

void 表示空值,表示没有任何返回值的函数。

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

javascript 复制代码
function fun1() {
    console.log("123");
}
console.log(fun1());

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

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

javascript 复制代码
let v: void = undefined

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

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

javascript 复制代码
function fun2(): number {
  console.log("123")
  return 123
}
console.log(fun2())

类型推论

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

比如说:

javascript 复制代码
let t = 123
t = "123"

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

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

javascript 复制代码
let t:number = 123
t = "123"

所以会报错。

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

javascript 复制代码
let g
g = 123
g="123"
g = []
g = {}
g = true

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

总结一下:

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

联合类型

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

之前有过一个案例:

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

javascript 复制代码
let flag1:boolean | number = true;
flag1 = 1;

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

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

就会出现报错的问题,要注意!

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

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

相关推荐
前端郭德纲2 小时前
浅谈React的虚拟DOM
前端·javascript·react.js
2401_879103683 小时前
24.11.10 css
前端·css
ComPDFKit4 小时前
使用 PDF API 合并 PDF 文件
前端·javascript·macos
yqcoder4 小时前
react 中 memo 模块作用
前端·javascript·react.js
优雅永不过时·5 小时前
Three.js 原生 实现 react-three-fiber drei 的 磨砂反射的效果
前端·javascript·react.js·webgl·threejs·three
神夜大侠7 小时前
VUE 实现公告无缝循环滚动
前端·javascript·vue.js
明辉光焱7 小时前
【Electron】Electron Forge如何支持Element plus?
前端·javascript·vue.js·electron·node.js
柯南二号8 小时前
HarmonyOS ArkTS 下拉列表组件
前端·javascript·数据库·harmonyos·arkts
wyy72938 小时前
v-html 富文本中图片使用element-ui image-viewer组件实现预览,并且阻止滚动条
前端·ui·html
前端郭德纲8 小时前
ES6的Iterator 和 for...of 循环
前端·ecmascript·es6