Typescript类型注解/类型推断
2021-04-13 本文已影响0人
踏莎行
TypeScript是微软开发的一个开源的编程语言,通过在JavaScript的基础上添加静态类型定义构建而成,是javascript的超集。类型注解就是在声明变量的同时,说明该变量的类型。
虽然说在javascript中我们也有number,boolean,string等类型,但是在使用时他们类型都是可以随时改变的,这样不利于程序的阅读与维护。
类型注解
在typescript中,一旦为变量添加了类型注解,这个变量的类型就不能发生改变,否则编译报错,不通过。
下面一起看看类型注解的使用吧:
- number
// 声明变量并指定类型
let age: number
// 赋值
age = 18
其实也挺简单就是“变量名:变量类型”
如果给age赋值一个字符串,就会报错,其他类型亦是如此
剩下的boolean,string,null,undefined,any(任意类型),never(永不存在的值的类型)都是这样
Snipaste_2021-04-13_20-46-35.png
- 数组
let arr: string[] = []
let arr: number[] = []
……
let newArr: string[] = new Array()
let newArr: number[] = new Array()
……
为数组声明类型之后,说明该数组只能存储该类型的元素,就不能什么类型都往里存了
- 元组
数组的元素类型被限制了,使用起来貌似比较麻烦了,想要存入不同类型的元素怎么办?官方为我们提供了一个新的数据类型------元组
let tup: [string, number, boolean] = ["元组类型", 12, true]
声明方式就是在冒号的中括号中声明你的数据每一个位置的数据类型,同样的后面的数的类型必须和声明时的数据类型位置一一对应,否则也是错误的
- 枚举
枚举类型是对JavaScript标准数据类型的一个补充,使用enum关键字声明
enum 名字{ 元素1, 元素2,……}
enum Gender { Female, Male }
使用枚举:
let userGender: Gender
详细用法可以看这:
- 函数
在了解函数的使用时,先来看看void这个类型:它表示没有任何类型,当一个函数没有返回值时,设置函数的函数的返回值是void
1.基本的函数
2.传递参数的函数function fn(): void {}
在传递参数的时候要为参数声明类型,函数的返回值类型可以不写类 型,但是参数的类型注解必须写
3.函数的返回值function fn(n: number): void {} function fn(n: number,s: string): void {} function fn(n: number, ag: number[]): void {}
没有返回值写void,当然返回值类型注解可以省略function fn(n: number): number{} function fn(n: number,s: string): void {} function fn(n: number, ag: number[]): string[]{}
- 对象
1.先声明对象的每个成员的类型,方法要指明返回值类型
2.你也可以一步到位let person1: { name: string, age: number, sing: () => void, sum: (n1: number, n2: number) => number } person1 = { name: "张三", age: 23, sing: function () { console.log("ni hao"); }, sum: function (n1: number, n2: number) { return n1 + n2 } }
let cars : { name: string, weigth: number, height: number } = { name: "大众", weigth: 210, height: 140 }
类型推断
看了类型注解是不是头都大了??哈哈
其实有时候我们是可以不用写类型注解的,所谓类型推断就是TypeScript可以通过变量值倒推变量类型
1.声明的同时就赋值
let age = 20
虽然没有显式的声明类型,但是赋值是什么类型,他就是什么类型,ts会自动判断,所以也不可以改变它的类型
2.就是函数返回值啦