TypeScript 基本类型

TS 是什么

是JavaScript的超集，添加了类型系统。 拟补JavaScript在开发大型系统时的不足。

相比 JS 的优势

• 类型化的思维方式，开发更加严谨，提前发现错误，减少改bug的时间

• 类型系统提高了代码的可读性，并使维护和重构更加容易

• 补充了接口枚举等开发大型应用时JS缺失的功能。

注释

单行注释 // 快捷键 ctrl + /

多行注释 /* */ 快捷键 ctrl + shift + A (ubuntu)

类型注解

为变量添加类型约束的方式

声明变量必须指定type类型

let a:number;

变量命名规则

不能以数字开头，且只能包含 $，_， 数字，字母

数据类型

原始类型: Number/String/Bollean/undefined/null 对应类型注解为 number/string/boolean/undefined/null

undefined null类型 属于其他类型 never 的子类型

联合类型

const n:number | null | undefined;

n = 1;

如果直接赋值不需要声明type类型，类型推论

let a = 1;

// 如果重新覆盖不同的类型值会提示错误
a = '22'// 错误

也可通通过字面量赋值

let a:1|true;
a = 1;

数组类型 Array

// 指定数组中的类型
let arr:number[] = [1,2,3]

let arr:Array<number> = [1,2,3]

let arr:any[] = [1,2,3]

object

[propName:string]:any 表示任意类型的属性

let b:{
  name:string,
  age?:number,
  [propName:string]:any
}

元组类型 tuple

数组类型的一种，可以指定数组中不同元素的类型

let arr:[string，number] = ['123',3.4]

类数组

function  fn(...args:any[]) {
  const arg:IArguments = arguments;
}

fn(1,2,3)

枚举类型 enum

定义枚举类型

enum StatusEnum {
  success = 0,
  error = -1
}

const a: StatusEnum = StatusEnum.success

如果没有声明值，则返回枚举字段的索引， 如果其中一个有值，后面没有赋值的字段会把前面的值 +1 返回

enum Color { red, gray = 5, black}

const c:Color = Color.red //0
const c1:Color = Color.gray //5
const c2:Color = Color.black //6

常数枚举

const enum Color { red, gray}
console.log(Color.red,Color.gray);

//最终编译为
console.log(0/*Color.red*/,1/*Color.red*/)

任意类型 any

一个变量设置了any,相当于关闭了类型监测

声明变量如果没有执行类型，会默认设置为any类型

使用场景：第三方库没有定义的类型，类型转换的时候，数据结构太复杂太灵活，ts为document提供了一整套类型声明

const a:any = document.getElementById('app')
a.style.innerHTML = '<div />'

const ele:HTMLElement|null = document.getElementById('app')
ele!.style.color = '<div />'

void 类型

void 表示没有任何类型，一般用于定义方法的时候没有返回值

function fun:void(){
  cosnole.log(1)
}

const fun = (): void => {
  console.log(1)
}

never类型

包括 null 和 undefined 类型，代表从不会出现的值，这意意味着never类型只能被never类型所赋值

用于报错，没有值的类型，函数执行不完,比如事件循环，数据库的监听

const a: never = (() => { throw new Error })()

function fn(): never {
  throw new Error();
}

function fn(): never {
  while(true){}
  // 需要never类型，永远不会到达的语句
  cosnole.log(1)
}

unknow 类型

unknow 类型在复制给其他的变量时会检查，不允许把unknow类型复制给其他类型,如果使用的是any类型将不会检查错误

const d:any = '123'
const s:string = d;// 不会报错

const d:unknow = '123'
const s:string = d;// 回报错

通过类型判断允许赋值

if(typeof d === 'string'){
  s = d
}

类型断言

s = d as string;

字面量类型

描述的是同类型不同值

let a: "aaa" | "bbb";
a = "aaa";

类型别名

type MyType = 1|2|3
const a:MyType = 1;
const a:MyType = 2;
const a:MyType = 3;

定义函数

函数参数和返回值类型必须被声明

function fn(a: number = 2, b?: number, ...c: Array<any>): void {
  if (b) {
    console.log(a, b, c);
  } else {
    console.log(a, b, c);
  }
}

fn(1)

函数重载表示同名的函数如果参数不同函数会重载

但是JS中没有重载的概念，下面同名的函数会覆盖上面的函数

TS中模拟函数重载, 通过不同的参数类型校验

function fn(a: number): number;
function fn(b: string): string;
function fn(c: any): any {
  if (typeof c === 'number') {
    return c + 1;
  }
};

定义函数的结构

const fn:(a:number,b:number) => number

包装对象

自动在基本类型的对象类型之间切换,基本类型上没有方法，在内部迅速的完成一个装箱操作，把基本类型迅速包装成对象类型，然后调用对象类型的方法。

打赏