小白学前端之TypeScript的数据类型

简介: 联合类型(Union Types)可以通过管道(|)将变量设置多种类型,赋值时可以根据设置的类型来赋值。

网络异常,图片无法展示
|


String

包装类型对象

// 声明方式 1
var name:string = 'greycode'
console.log(name)
// 声明方式 2
var name = new String('greycode')
console.log(name.toString())
// 声明方式 3
var name = 'greycode'
console.log(name)

此外 String 对象还有许多对象方法,详见:www.runoob.com/typescript/…

Number

Number 对象属性和对象方法详解:www.runoob.com/typescript/…

// 声明方式 1
var age:number = 20
console.log(age)
// 声明方式 2
var age = new Number(20)
console.log(age.toString())
// 声明方式 3
var age = 20
console.log(age)

Array 数组

只能存储同类型的数据,详解:www.runoob.com/typescript/…

// 声明方式 1
var people:string[] = ['张三','李雷','韩梅梅']
// 声明方式 2
var people = ['张三','李雷','韩梅梅']
// 声明方式 3
var people:string[] = new Array(3)
people[0] = '张三'
people[1] = '李雷'
people[2] = '韩梅梅'
// 声明方式 4
var people:string[] = new Array('张三','李雷','韩梅梅')

数组解构

下的代码中会按顺序把 people 数组里的值分别赋值给 zz、ll、hmm

var people:string[] = ['张三','李雷','韩梅梅']
var[zs,ll,hmm] = people
console.log(zs)
console.log(ll)
console.log(hmm)

元组

元组和数组一样,唯一不同的是数组只能存放同一种数据类型,而元组可以存储不同的数据类型

// 声明方式
var test = ['张三',10,true]

我们可以使用以下两个函数向元组添加新元素或者删除元素:

  • push() 向元组添加元素,添加在最后面。
  • pop() 从元组中移除元素(最后一个),并返回移除的元素。

元组也和数组一样支持解构

Map 对象

可以用 new Map 来创建一个 Map 对象

var map = new Map([
    ['name','greycode'],
    ['age','20']
]);

上面代码中,由于没有指定键值对的类型,默认都是 String 类型,可以使用下面的代码来为键值对指定类型

var map = new Map<string,any>([
    ['name','greycode'],
    ['age',20]
]);

Map 相关的函数与属性:

  • map.clear() – 移除 Map 对象的所有键/值对 。
  • map.set() – 设置键值对,返回该 Map 对象。
  • map.get() – 返回键对应的值,如果不存在,则返回 undefined。
  • map.has() – 返回一个布尔值,用于判断 Map 中是否包含键对应的值。
  • map.delete() – 删除 Map 中的元素,删除成功返回 true,失败返回 false。
  • map.size – 返回 Map 对象键/值对的数量。
  • map.keys() - 返回一个 Iterator 对象, 包含了 Map 对象中每个元素的键 。
  • map.values() – 返回一个新的Iterator对象,包含了Map对象中每个元素的值 。

联合类型

联合类型(Union Types)可以通过管道(|)将变量设置多种类型,赋值时可以根据设置的类型来赋值。

// 基本语法格式
var data:type1|type2|type3|...

使用:

var test:string|number|boolean
test = '这是测试'
test = 9
test = true
// 也可以使用数组
var test:string[]|number[]
test = ['这','是','测','试']
test = [2,4,6,7]
// 或者这样
var test:string[]|string
test = ['这','是','测','试']
test = '这是测试'
// 等等
目录
相关文章
|
16天前
|
前端开发 JavaScript 开发者
前端项目代码规范工具 (ESLint. Prettier. Stylelint. TypeScript)
前端项目代码规范工具 (ESLint. Prettier. Stylelint. TypeScript)
|
2月前
|
JavaScript 前端开发 安全
2024年前端开发新趋势:TypeScript、Deno与性能优化
2024年前端开发迎来新趋势:TypeScript 5.0引入装饰器正式支持、const类型参数及枚举改进;Deno 1.42版推出JSR包注册表、增强Node.js兼容性并优化性能;性能优化策略涵盖代码分割、懒加载及现代构建工具的应用。这些变化推动前端开发向更高效率和安全性发展。
|
4月前
|
前端开发 JavaScript
前端基础(四)_数据类型的强制转换
本文探讨了JavaScript中数据类型的强制转换方法,包括将其他类型转换为Number类型(使用`Number`函数)、转换为String类型(使用`toString`方法或`String`函数)、以及转换为Boolean类型(使用`Boolean`函数)。同时,文章还讨论了`parseInt`和`parseFloat`函数用于从字符串中解析出整数或浮点数,以及`isNaN`函数用于检测一个值是否是非数字。
39 2
前端基础(四)_数据类型的强制转换
|
4月前
|
前端开发 JavaScript
前端基础(五)_运算符(算术运算符、赋值运算符、比较运算符、逻辑运算符、三目运算符、运算符优先级和结合性、数据类型的隐式转换)
本文介绍了JavaScript中的算术运算符、赋值运算符、比较运算符、逻辑运算符、三目运算符、运算符优先级和结合性以及数据类型的隐式转换。
70 3
|
4月前
|
JavaScript
typeScript基础(1)_原始数据类型学习
本文介绍了TypeScript中的原始数据类型,包括布尔型、数值型、字符串型、`void`、`null`和`undefined`,并展示了如何在TypeScript中声明和使用这些类型。同时,还介绍了如何通过`tsc`命令编译TypeScript文件。
57 4
|
4月前
|
存储 前端开发 JavaScript
前端基础(三)_JavaScript数据类型(基本数据类型、复杂数据类型)
本文详细介绍了JavaScript中的数据类型,包括基本数据类型(Number、String、Boolean、Undefined、Null)和复杂数据类型(Object),并解释了如何使用`typeof`操作符来识别变量的数据类型。同时,还讨论了对象、函数和数组等复杂数据类型的使用方式。
87 2
|
5月前
|
开发者 图形学 开发工具
Unity编辑器神级扩展攻略:从批量操作到定制Inspector界面,手把手教你编写高效开发工具,解锁编辑器隐藏潜能
【8月更文挑战第31天】Unity是一款强大的游戏开发引擎,支持多平台发布与高度可定制的编辑器环境。通过自定义编辑器工具,开发者能显著提升工作效率。本文介绍如何使用C#脚本扩展Unity编辑器功能,包括批量调整游戏对象位置、创建自定义Inspector界面及项目统计窗口等实用工具,并提供具体示例代码。理解并应用这些技巧,可大幅优化开发流程,提高生产力。
467 1
|
5月前
|
开发者 自然语言处理 存储
语言不再是壁垒:掌握 JSF 国际化技巧,轻松构建多语言支持的 Web 应用
【8月更文挑战第31天】JavaServer Faces (JSF) 框架提供了强大的国际化 (I18N) 和本地化 (L10N) 支持,使开发者能轻松添加多语言功能。本文通过具体案例展示如何在 JSF 应用中实现多语言支持,包括创建项目、配置语言资源文件 (`messages_xx.properties`)、设置 `web.xml`、编写 Managed Bean (`LanguageBean`) 处理语言选择,以及使用 Facelets 页面 (`index.xhtml`) 显示多语言消息。通过这些步骤,你将学会如何配置 JSF 环境、编写语言资源文件,并实现动态语言切换。
51 1
|
5月前
|
前端开发 JavaScript
Web 前端大揭秘!JS 数据类型检测竟如此震撼,一场惊心动魄的代码探秘之旅等你来!
【8月更文挑战第23天】在Web前端开发中,合理检测数据类型至关重要。JavaScript作为动态类型语言,变量类型可在运行时变化,因此掌握检测技巧十分必要。
46 1
|
5月前
|
存储 前端开发 JavaScript
Web前端的奇幻之旅:探索JS数据类型的奥秘与差异
【8月更文挑战第23天】JavaScript是一种动态类型语言,提供多种内置数据类型支持信息的存储与操作。这些类型对Web前端开发者至关重要,直接影响代码性能与可读性。JavaScript数据类型主要分为两大类:原始数据类型(如Undefined、Null、Boolean等)与引用数据类型(如Object、Array等)。原始类型直接存储值,而引用类型存储指向数据的引用。原始类型不可变且存储在栈中,访问更快;引用类型则存储在堆中,可通过其引用进行修改。理解这些差异有助于编写高效、可维护的代码。
50 0