基本类型
# 前言
在TypeScript中,给传统的JavaScript加了一层类型检查的外衣,官方称其为类型检查器。JavaScript中数据类型主要分为原始类型和引用类型,为了更好的贴近强类型语言,TypeScript中增加了void
、never
、unkonwn
等JavaScript中没有的数据类型。我们首先看看基本类型在TypeScript中是如何定义的。
# Number
// 整数
let decimal: number = 6;
// 十六进制
let hex: number = 0xf00d;
// 二进制
let binary: number = 0b1010;
// 八进制
let octal: number = 0o744;
// 大整数
// let big: bigint = 100n;
console.log(typeof decimal); // number
console.log(typeof hex); // number
console.log(typeof binary) // number
console.log(typeof octal); // number
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# String
// 定义简单的字符串类型
let color: string = '马松松'
// 也可以使用模版字符串
let fullName: string = '马松松'
let sentence: string = `my name is ${fullName}`
console.log(sentence);
// my name is 马松松
2
3
4
5
6
7
8
# Array
//第一种 使用变量后面加[]表示这是一个数组类型的变量
const list: number[] = [1,2,3];
//第二种 使用泛型数组:Array:<elemType>
const sets: Array<number> = [1,2,3];
2
3
4
5
# Tuple
元组类型:数组中的元素可以是多种类型,并且数组长度固定
// 数组中只有两个元素 第一个元素必须是string类型,第二个元素必须是number类型
const turpleArray: [string,number] = ['马松松',18];
2
# 注意:
1.当你错误使用对应类型的API时,会引发错误提示
turpleArray[1].slice()
// Property 'slice' does not exist on type 'number'
2
第二个元素是number类型
没有slice
方法。
2.当你访问超过数组范围的元素,会引发错误
console.log(turpleArray[5].toString());
// Object is possibly 'undefined'
2
数组没有索引为5的元素。
# Enum
给数据集合更友好的名称,便于维护
直接使用enum
关键字进行定义
enum Color {
red,
blue,
lightBlue
}
let c:Color = Color.red;
2
3
4
5
6
可以手动设置枚举类型中值的索引从哪个数字开始,默认是从0
开始。
enum anoterColor {
red = 1,
blue,
lightBlue
}
let a:string = anoterColor[1];
console.log(a);
//red
2
3
4
5
6
7
8
9
# Unknown
let unKnownEle: unknown;
// 下面两种做法都是合法的
unKnownEle = 4;
console.log(typeof unKnownEle);
// number
unKnownEle = "马松松"
console.log(typeof unKnownEle);
// string
2
3
4
5
6
7
8
9
10
# Any
为了兼容没有使用TypeScript的一些库和应用场景,可以使用
any
退出类型检查
et anyEle:any;
// 下面两种赋值都是合理的
anyEle = 5;
console.log(typeof anyEle); // number
anyEle = "马松松";
console.log(typeof anyEle); // string
2
3
4
5
6
7
8
可以用在函数的返回值:
function anyReturnEle(key: any): any {
return key;
}
console.log(anyReturnEle(1314)); // 1314
console.log(anyReturnEle("马松松")); // 马松松
2
3
4
5
# 注意:
1.使用unknown
会报错
let strictlyTyped: unknown = 1314;
console.log(strictlyTyped.toFixed());
//Property 'toFixed' does not exist on type 'unknown'
2
3
虽然这里strictlyTyped
确实是一个number
类型,并且确实有toFixed
方法,但是unknown
会检查类型,unkonwn
没有toFixed
方法。
2.any类型不会报错
let looseTyped: any = 1314;
console.log(looseTyped.toFixed());
// 1314
2
3
所以说any类型是关闭了类型检查。
3.any类型具有传播性
o.name = '马松松';
console.log(typeof o.name);
// string
o.name = 87;
console.log(typeof o.name);
// number
2
3
4
5
6
7
当我们给o
定义了any
类型, 它的属性也是any
类型。
# Void
不是任何一种类型,比较常用于函数的返回值
用在函数的返回值
function returnNothing():void {
// 不用返回任何值
}
2
3
4
这样表示函数没有返回值。
void
类型只能被赋值为null
或者undefined
let voidType: void = undefined;
console.log(voidType);
// undefined
voidType = null;
console.log(voidType);
// null
2
3
4
5
6
7
命名其他的类型的值 将会报错
voidType = '';
// Type 'string' is not assignable to type 'void'
2
# Never
表示一个函数总是会抛出一个错误或者永远返回,此时就会返回
never
类型
用在抛出错误的函数
function error():never {
throw new Error("这里需要抛出错误")
}
2
3
或者是一个循环执行判断的语句
function loop(): never {
while(true) {
// do something
}
}
2
3
4
5
6
# Object
你可以类似于这样使用 属性不能多也不能少 且类型要匹配
let obj:{name: string,age: number};
obj = {
name:'马松松',
age: 18
}
2
3
4
5
# Assertions
类型断言:当你明确了变量是某种类型,可以直接断言该变量是什么类型
类型断言有两种方式,这两种方式是等效的:
1.使用as
let someValue:unknown = "马松松";
let someValueL = (someValue as string).length;
console.log(someValueL);
// 3
2
3
4
2.使用<>
let aValue:unknown = '马松松';
let aValueL = (<string>aValue).length;
console.log(aValueL);
// 3
2
3
4
# 总结
类型的定义还是蛮简单的,基本都是在声明变量的后面预先定义好变量的类型,几乎没有前端开发者增加学习成本。