TypeScript-定义基本类型

前言

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: 
const sets: Array = [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 = (aValue).length;
console.log(aValueL);
// 3

总结：
类型的定义还是蛮简单的，几乎没有给前端开发者增加学习成本，同时通过学习TypeScript可以理解很多其他语言的一些优秀的特性。个人觉得，TypeScript写起来还是挺香的。
这篇是TypeScript学习的第一篇笔记，后面会根据官网的目录，每一个section都会整理一篇笔记，有需要的小伙伴也可以跟着我的笔记一起学习一下。