极简TypeScript教程--数据类型
TypeScript最大的特点就是有类型检测,格式为
let/const 标识符: 数据类型 = 赋值;
例子:
let msg: string = 'Hello World'
这样msg这个变量就有了字符串类型,如果再给他赋值为数字类型,就会在编译期报错。
变量的类型推导
在开发中,有时候为了方便起见我们并不会在声明每一个变量时都写上对应的数据类型,我们更希望可以通过TypeScript本身的特性帮助我们推断出对应的变量类型
let msg = 'Hello' // 没有显示申明变量类型,由第一次赋值确定类型
上面代码没有显示申明变量类型,但是ts可以推导出msg为字符串类型,再赋值为数字类型就会报错
number类型
ts中整数和浮点数都是number类型,还可以用二进制,16进制等表示方式
let num: number = 100 // 整数
num = 6.6 // 浮点数
console.log(num)
// 其他进制表示
num = 100 // 十进制
num = 0b110 // 二进制
num = 0xf23 // 十六进制
console.log(num)
boolean类型
boolean类型就两个值,true和false
let flag: boolean = true
flag = false
string类型
string类型是字符串类型,可以使用单引号或者双引号表示,同时也支持ES6的模板字符串来拼接变量和字符串
let message: string = 'Hello World' // 字符串可以使用单引号或者双引号表示
const personName = "cloud"
const personAge = 18
const info = `my name is ${personName}, age is ${personAge}` // 支持模板字符串来拼接变量
Array类型
数组的定义非常简单,有两种方式
const names: string[] = ['a', 'b', 'c'] // 普通方式
const names2: Array<string> = ['a', 'b', 'c'] // 泛型方式
以上代码表示数组里面的类型是字符串,如果插入其他类型的元素会报错
函数的参数类型
函数是JavaScript非常重要的组成部分,TypeScript允许我们指定函数的参数和返回值的类型。
参数的类型注解
声明函数时,可以在每个参数后添加类型注解,以声明函数接受的参数类型:
// greet函数只接受字符串类型的参数
function greet(name: string) {
console.log('Hello ' + name)
}
函数的返回值类型
我们也可以添加返回值的类型注解,这个注解出现在函数列表的后面:
// 该函数返回值为number类型
function sum(num1: number, num2: number): number {
return num1 + num2
}
和变量的类型注解一样,我们通常情况下不需要返回类型注解,因为TypeScript会根据 return 返回值推断函数的返回类型,某些第三方库处于方便理解,会明确指定返回类型,看个人喜好
匿名函数的参数
匿名函数与函数声明会有一些不同,当一个函数出现在TypeScript可以确定该函数会被如何调用的地方时,该函数的参数会自动指定类型;
// names数组是string类型的,在该数组forEach循环时,
// 可以推断出item也是string类型的
const names = ['cloud', 'tifa', 'alice']
names.forEach(item => {
console.log(item.toUpperCase())
})
我们并没有指定item的类型,但是item是一个string类型,这是因为TypeScript会根据forEach函数的类型以及数组的类型推断出item的类型,这个过程称之为上下文类型(contextual typing),因为函数执行的上下文可以帮助确定参数和返回值的类型
对象类型
如果我们希望限定一个函数接受的参数是一个对象,这个时候要如何限定呢?我们可以使用对象类型;
// 传入的对象有两个属性,x和y,并且类型是number
function printCoordinate(point: { x: number, y: number }) {
console.log(point.x, point.y)
}
printCoordinate({x: 10, y: 30})
在对象我们可以添加属性,并且告知TypeScript该属性需要是什么类型,每个属性的类型部分是可选的,如果不指定,那么就是any类型
可选类型
对象类型也可以指定哪些属性是可选的,可以在属性的后面添加一个?:
// 传入的对象有两个属性,x和y,并且类型是number,z不是必传
function printCoordinate(point: { x: number, y: number, z?: number }) {
console.log(point.x, point.y)
}
any类型
在某些情况下,我们确实无法确定一个变量的类型,并且可能它会发生一些变化,这个时候我们可以使用any类型,我们给一个any类型的变量赋值任何的值,比如数字、字符串的值;
let a: any = 'cloud'
a = 123
a = true
const aArray: any[] = ['a', 1, false]
unknown类型
unknown是TypeScript中比较特殊的一种类型,它用于描述类型不确定的变量。和any类型有点类似,unknown可以赋任何类型的值,与any不同的是,any任何操作都是合法的,但是unknown类型的值上做任何事情都是不合法的。
let val: unknown
// 使用val.length属性报错,因为编译器不知道val的类型,不合法
console.log(val.length)
// 操作unknown类型前需要类型判断,确定是字符串类型才能使用length属性
if(typeof val === 'string') {
console.log(val.length)
}
void类型
void通常用来指定一个函数是没有返回值的,那么它的返回值就是void类型,这个函数我们没有写任何类型,那么它默认返回值的类型就是void的,我们也可以显示的来指定返回值是void:
function sum(num1: number, num2: number): void {
console.log(num1 + num2)
}
tuple类型
tuple(元组类型)跟数组有点类型,都可以通过下标的方式访问元素,与数组不同的地方是,数组中通常建议存放相同类型的元素,不同类型的元素是不推荐放在数组中。
// 使用元组保存个人信息,第一个是姓名,第二个是年龄,第三个是体重
const info: [string, number, number] = ['cloud', 18, 60]
// 使用下标访问
console.log(info[0])
相关文章
- typescript与nodejs(二)基于装饰器实现路由表
- 解决Vue问题:TypeScript intellisense is disabled on template. To enable, configure `“jsx“...
- typescript 函数(定义、参数、重载)
- TypeScript 的安装与使用
- 极简TypeScript教程--面向对象
- 极简TypeScript教程--简介及环境搭建
- (TypeScript 接口)与字节跳动的学长简单交流,他告诉我Ts项目中用得较多的是接口(interface),于是我捣鼓了一下。
- 初始化一个React项目(TypeScript环境)
- TypeScript 命名空间
- TypeScript 迭代器(iterator)和生成器(generator)
- TypeScript 枚举
- TypeScript的变量声明
- JS教程之 TypeScript 与 JavaScript的主要区别
- TypeScript中数组类型的定义
- TypeScript目录
- 被迫开始学习Typescript —— class
- 浅析Typescript类型声明文件定义、为什么需要声明文件、如何编写TS声明文件(如何自定义类型声明文件、如何给第三方库写声明文件)
- TypeScript泛型(使用泛型变量,泛型语法、泛型约束)
- 浅析TypeScript中const和readonly的区别、枚举和常量枚举的区别以及关于typescript中枚举的相关知识
- TypeScript中的基本类型(系列一)
- JavaScript是如何工作的:深入类和继承内部原理 + Babel和TypeScript 之间转换
- TypeScript:简单理解理解抽象类
- JetBrains发布WebStorm 2016.2,改进对TypeScript和React的支持