小白学前端之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 = '这是测试'
// 等等
相关文章
|
11天前
|
JavaScript 前端开发
TypeScript 学习笔记(六):TypeScript 与前端框架的结合应用
笔记,进一步提升 TypeScript 编程技能。
15 1
|
16天前
|
存储 前端开发 JavaScript
JavaScript数据类型归纳,架构师花费近一年时间整理出来的前端核心知识
JavaScript数据类型归纳,架构师花费近一年时间整理出来的前端核心知识
JavaScript数据类型归纳,架构师花费近一年时间整理出来的前端核心知识
|
16天前
|
JavaScript 前端开发 IDE
TypeScript在前端项目的渐进式采用策略
该文介绍了渐进式采用TypeScript在前端项目中的策略。首先,通过将JS文件扩展名改为TS并添加类型注解,如在`utils.js`中添加类型。接着,配置`tsconfig.json`,包括目标版本、模块系统、输出目录等。高级配置涉及路径别名、JSON导入、库文件等。然后,集成TypeScript到构建流程,如Webpack,安装`ts-loader`并调整配置。利用类型定义,包括安装第三方库的类型定义包,自定义类型定义或使用社区定义。最后,逐步迁移其他模块至TypeScript,强化类型检查,并确保IDE支持。
11 0
|
16天前
|
前端开发
前端 TS 快速入门之一:基本数据类型
前端 TS 快速入门之一:基本数据类型
20 0
|
17天前
|
JavaScript 前端开发 IDE
TypeScript:前端世界的“甜蜜烦恼”——究竟该不该用?
TypeScript:前端世界的“甜蜜烦恼”——究竟该不该用?
|
19天前
|
JavaScript 前端开发 开发者
【Web 前端】TypeScript 中的接口是什么?
【5月更文挑战第1天】【Web 前端】TypeScript 中的接口是什么?
|
19天前
|
JavaScript 前端开发 开发者
【Web 前端】TypeScript 的内置数据类型有哪些?
【5月更文挑战第1天】【Web 前端】TypeScript 的内置数据类型有哪些?
|
19天前
|
JavaScript 前端开发 安全
【Web 前端】使用 TypeScript 有什么好处?
【5月更文挑战第1天】【Web 前端】使用 TypeScript 有什么好处?
|
19天前
|
JavaScript 前端开发 安全
【Web 前端】TypeScript 的特点是什么?
【5月更文挑战第1天】【Web 前端】TypeScript 的特点是什么?
|
19天前
|
JavaScript 前端开发 IDE
【Web 前端】什么是 TypeScript ?
【5月更文挑战第1天】【Web 前端】什么是 TypeScript ?