前言
TypeScript给传统的JavaScript加了一层类型检查的外衣,在TypeScript中称为类型检查器。JavaScript中数据类型主要分为原始类型和引用类型,TypeScript在提供了和JavaScript相同的数据类型的同时,基于应用场景的复杂性,TypeScript中增加了
void
、never
、unkonwn
等JavaScript中没有的数据类型。
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
string类型
// 定义简单的字符串类型
let color: string = '马松松'
// 也可以使用模版字符串
let fullName: string = '马松松'
let sentence: string = `my name is ${fullName}`
console.log(sentence);
// my name is 马松松
Array类型
//第一种 使用变量后面加[]表示这是一个数组类型的变量
const list: number[] = [1,2,3];
//第二种 使用泛型数组:Array:<elemType>
const sets: Array<number> = [1,2,3];
Tuple类型
元组类型:数组中的元素可以是多种类型,并且数组长度固定
// 数组中只有两个元素 第一个元素必须是string类型,第二个元素必须是number类型
const turpleArray: [string,number] = ['马松松',18];
⚠️注意:
1.当你错误使用对应类型的API时,TypesScript会给你一个错误提示
turpleArray[1].slice()
// Property 'slice' does not exist on type 'number'
第二个元素是number类型
,没有slice
方法。
2.当你访问超过数组范围的元素,会引发错误
console.log(turpleArray[5].toString());
// Object is possibly 'undefined'
数组没有索引为5的元素。
enum类型
给数据集合更友好的名称,便于维护
直接使用enum
关键字进行定义
enum Color {
red,
blue,
lightBlue
}
let c:Color = Color.red;
可以手动设置枚举类型中值的索引从哪个数字开始,默认是从0开始。
enum anoterColor {
red = 1,
blue,
lightBlue
}
let a:string = anoterColor[1];
console.log(a);
//red
unknown类型
let unKnownEle: unknown;
// 下面两种做法都是合法的
unKnownEle = 4;
console.log(typeof unKnownEle);
// number
unKnownEle = "马松松"
console.log(typeof unKnownEle);
// string
any
为了兼容没有使用TypeScript的一些库和应用场景,可以使用any退出类型检查
et anyEle:any;
// 下面两种赋值都是合理的
anyEle = 5;
console.log(typeof anyEle); // number
anyEle = "马松松";
console.log(typeof anyEle); // string
可以用在函数的返回值:
function anyReturnEle(key: any): any {
return key;
}
console.log(anyReturnEle(1314)); // 1314
console.log(anyReturnEle("马松松")); // 马松松
⚠️注意:
1.使用unknown
会报错
let strictlyTyped: unknown = 1314;
console.log(strictlyTyped.toFixed());
//Property 'toFixed' does not exist on type 'unknown'
虽然这里strictlyTyped
确实是一个number
类型,并且确实有toFixed
方法,但是unknow会检查类型,unkonwn没有toFixed方法。
2.any类型不会报错
let looseTyped: any = 1314;
console.log(looseTyped.toFixed());
// 1314
所以说any类型是关闭了类型检查。
3.any类型具有传播性
o.name = '马松松';
console.log(typeof o.name);
// string
o.name = 87;
console.log(typeof o.name);
// number
当我们给o
定义了any类型, 它的属性也是any类型。
void
不是任何一种类型,比较常用于函数的返回值
用在函数的返回值
function returnNothing():void {
// 不用返回任何值
}
这样表示函数没有返回值。
void类型只能被赋值为null或者undefined
let voidType: void = undefined;
console.log(voidType);
// undefined
voidType = null;
console.log(voidType);
// null
命名其他的类型的值 将会报错
voidType = '';
// Type 'string' is not assignable to type 'void'
never
表示一个函数总是会抛出一个错误或者永远返回,此时就会返回never类型
用在抛出错误的函数
function error():never {
throw new Error("这里需要抛出错误")
}
或者是一个循环执行判断的语句
function loop(): never {
while(true) {
// do something
}
}
Object
你可以类似于这样使用 属性不能多也不能少 且类型要匹配
let obj:{name: string,age: number};
obj = {
name:'马松松',
age: 18
}
assertions
类型断言:当你明确了变量是某种类型,可以直接断言该变量是什么类型
类型断言有两种方式,这两种方式是等效的:
1.使用as
let someValue:unknown = "马松松";
let someValueL = (someValue as string).length;
console.log(someValueL);
// 3
2.使用<>
let aValue:unknown = '马松松';
let aValueL = (<string>aValue).length;
console.log(aValueL);
// 3
总结:
类型的定义还是蛮简单的,几乎没有给前端开发者增加学习成本,同时通过学习TypeScript可以理解很多其他语言的一些优秀的特性。个人觉得,TypeScript写起来还是挺香的。
这篇是TypeScript学习的第一篇笔记,后面会根据官网的目录,每一个section都会整理一篇笔记,有需要的小伙伴也可以跟着我的笔记一起学习一下。