Typescript 数据类型学习

简介: 本文简单介绍了 Typescript 中常用的数据类型和声明方式,基本上还是很好理解的。

Typescript,就是给 JavaScript 加上了类型系统。TypescriptJavaScript 的超集。只要掌握了 JS,学起 TS 来并不会太难。

本文整理了 Typescript 中的数据类型,作为学习 TS 的一道入门菜。

JS 中的数据类型

最开始 JS 中只有7个数据类型,根据在内存中存储空间的不同,又分为了两大类,基本数据类型和引用数据类型,具体是:

  • 基本数据类型:NumberStringBooleanUndefinedNull
  • 引用数据类型:ObjectFunction

随着 ES6ES11 的发布,又新增了两个基本数据类型:SymbolBigInt,分别表示唯一值和大数字。

对于以上这些数据类型,相信大家都不陌生。接下来说一说 Typescript 中的数据类型。

TS 中的数据类型

Typescript 就是给 JavaScript 加上了类型系统。类型体现在哪里呢?就体现在声明变量和常量时。

在声明变量和常量时,在变量的后面使用 : 来声明该变量的类型。

基本数据类型的类型

let n: number = 10
let s: string = 'hello'
let b: boolean = true
let nl: null = null
let ud: undefined = undefined
let sb: symbol = Symbol('sb')
let bi: bigint = BigInt(100)

数组类型

TS 中的数组和 JS 中的有所不同。JS 中的数据其实是对象的变形,因为其内部元素可以是各种类型。

而 TS 中的数组,类型是固定的,或者可以使用联合类型来定义元素的类型。

// 声明一个数字类型的数组
let arr1:number[] = [1,2,3]

// 声明一个字符串类型的数组
let arr2:string[] = ['1','2','3']

// 声明一个数字或者字符串类型的数组
let arr3:(number|string)[] = [1,'2'];

元祖类型

元祖类型是一种特殊的数组类型,它的特点是限制元素长度、类型一一对应:

// 该元元祖类型的变量有两个值,且分别是数字类型和字符串类型
let tuple:[number, string] = [10, 'hello']

枚举类型

在没有枚举类型的 JS 中,我们通常会使用一个对象来模拟枚举的效果。比如一个权限系统的角色设计:

const role = {
    admin: 0,
    user: 1,
    guest: 2
}

使用 TS 中的枚举来表示就是:

enum ROLE {
    ADMIN, // 默认从0开始
    USER,
    GUEST
}

还有一种常量枚举。声明枚举时还可以手动设置值:

const enum ROLE {
    ADMIN, // 默认从0开始
    USER = 100,
    GUEST = 1000,
}

void 类型

void 类型表示空,即没有类型,只能赋值给 undefinednull 这两个好兄弟使用。

一般只用在函数返回值类型上,当函数没有返回值时,使用它:

function foo = (msg: string): void {
   console.log(msg);
}

never 类型

never代表不会出现的值,不能把其他类型赋值给 never

function error(message: string): never {
    throw new Error("err");
}

function loop(): never {
    while (true) { }
}

function fn(x:number | string){
    if(typeof x == 'number'){

    } else if(typeof x === 'string'){

    } else {
        console.log(x); // never
    }
}

any 类型

有时候大家会把 Typescript 叫作 AnyScript。

这是因为使用 TS,就是要用它的强大的类型系统。但有时候确实不知道某个值应该是什么类型的,如果不给它声明类型又不行,此时可以将其声明为 any 任意类型:

let a: any = {...随便什么东西}

使用 any 类型虽然编译器不再报错,但也就失去了类型系统的能力,不能获得类型检查和类型提示了。因此不到万不得已的时候慎用。

小结

本文简单介绍了 Typescript 中常用的数据类型和声明方式,基本上还是很好理解的。

目录
相关文章
|
3月前
|
JavaScript 前端开发
【TypeScript入门】TypeScript入门篇——数据类型
我们人类可以很容易的分清数字与字符的区别,但是计算机并不能呀,计算机虽然很强大,但从某种角度上看又很傻,除非你明确的告诉它,1是数字,“汉”是文字,否则它是分不清1和‘汉’的区别的,因此,在每个编程语言里都会有一个叫数据类型的东东,其实就是对常用的各种数据类型进行了明确的划分,你想让计算机进行数值运算,你就传数字给它,你想让他处理文字,就传字符串类型给他。
42 3
|
3月前
|
JavaScript 前端开发 编译器
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
101 0
|
3月前
|
编解码 JavaScript 前端开发
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
187 0
|
1月前
|
JavaScript 前端开发 开发工具
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
|
1月前
|
JavaScript 前端开发 安全
如何学习typescript?
【7月更文挑战第9天】1. 了解其为JavaScript超集,增加类型系统和ES6特性,提升代码安全性和效率。 2. 安装 TypeScript 全局 (`npm install -g typescript`),用`tsc -v`验证,或尝试在线的TypeScript Playground。 3. 学习类型注解、基础类型(如number、string、boolean等)、any与unknown,接口和类。 4. 探索高级特性,如泛型、模块&命名空间、装饰器。 5. 实践中巩固知识,如做小项目(如用React或Vue),阅读官方文档,参与社区讨论。持续编码和实践是关键。
19 0
|
3月前
|
JavaScript 前端开发 开发者
【Web 前端】TypeScript 的内置数据类型有哪些?
【5月更文挑战第1天】【Web 前端】TypeScript 的内置数据类型有哪些?
|
3月前
|
存储 JavaScript 前端开发
TypeScript基本数据类型详解
【4月更文挑战第23天】TypeScript基础知识概览:包括Boolean、Number、String、Array、Tuple、Enum、Any、Void、Null和Undefined以及Never类型。了解这些数据类型能提升代码质量和可维护性。示例代码展示了各种类型的用法,如定义布尔变量、数字转换、字符串操作、数组和元组声明、枚举创建、任意类型使用,以及空值和Never类型的场景。掌握这些将有助于更好地使用TypeScript进行开发。
|
3月前
|
JavaScript 前端开发 编译器
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)(下)
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
46 0
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)(下)
|
3月前
|
JavaScript
【HarmonyOS 4.0 应用开发实战】TypeScript入门之声明、数据类型、函数、类的详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之声明、数据类型、函数、类的详讲
65 0
|
3月前
|
JavaScript 前端开发 安全
TypeScript:赋予JavaScript数据类型新的力量,提升编程效率!
TypeScript:扩展JavaScript数据类型,赋予编程更强大的表达能力!