TypeScript的基本使用

一、搭建ts运行环境

使用ts的好处

1.友好的代码提示
2.通过静态类型检查，来判断该类型下面有哪些属性。如果访问了不存在的属性或方法，在编译时就会抛出异常
3.引入静态类型声明，减少不必要的类型判断和文档注释；
4.类、接口的使用更易于构建和维护组件
5.方便多人开发，可以使他人快速了解变量的类型，加速接管代码，减少维护成本

ts使用方式

全局安装ts

npm i -g typescript

通过命令行将ts文件编译为js
可以在后面加入-w参数监听源文件，当源文件发生改动时自动编译

tsc xxx.ts 

通过命令行创建ts配置文件 => tsconfig,json

tsc --init

二、ts常用语法

类型的声明

type A = string

类型注解——给变量绑定类型

const a: A = '23'

联合类型

let a: string|number = 'hello'

交叉类型

type A = {
  username: string
}
type B = {
  age: number
}
const o: A&B = {
  username: '222',
  age:1
}

类在ts中既是变量声明空间 也是类型声明空间

class Foo{
}
let a = Foo
type A = Foo

类型断言

let a: unknown = 'hello';
a.map(( )=> {})//	报错

let b: unknown = 'hello';
(b as []).map(( )=> {})	//	正常

非空断言

let c: string|undefined = undefined
c.length	//报错
c!.length

三、ts类型系统

基本类型

const a: string = 'a'
const b: number = 1
const c: boolean = false
const d: null = null
const e: void = undefined
const f: undefined = undefined
const g: symbol = Symbol()

数组类型

let arr1: number[] = [1,2]
let arr2: (number|string)[] = [1,2,'3']
let arr3: Array<number> = [1,2]
export{}

元组类型

let arr4: [number,string] = [1,'2']

对象类型

 type A = {
  username: string
  age?: number  //？表示可选属性
  [index: string]: any  //  索引签名 约束其他属性的类型
 }

 const a: A = {
  username:'123',
 }

函数类型与void类型

function foo(n: number, m?: string): number {
  return n + 1;
}

foo(1);

const foo1:(n: number, m?: string)=> void = (n,m) => {

}
foo1(12)

函数重载

function foo2(n1: number): any;
function foo2(n1: number, n2: number): any;
function foo2(n1: number, n2: number,n3: number): any;
function foo2(n1: number, n2?: number, n3?: number) {}
//有一个实现签名 + 一个或多个重载签名合成
//但外部调用函数重载定义的函数时，只能调用重载签名，不能调用实现签名
//调用重载签名的函数时，会根据传递的参数来判断你调用的是哪一个函数
//只有一个函数体，只有实现签名配备了函数体，所有的重载签名都只有签名， 没有配备函数体
foo2(1);
foo2(1,2);
foo2(1,2,3);

可调用注解

type A = {  //  可调用注解 针对函数重载进行的类型注解
  (n1:number,n2:number):any
  (n1:string,n2:string):any
}

function foo2(n1: number, n2: number): any;
function foo2(n1: string, n2: string): any;
function foo2(n1: number|string, n2: number|string) {}
const a: A = foo2

type B = {  //  可调用注解 给函数添加属性
  (n1:number):number
  username?: string
}

let foo:B = n => n
foo.username = "h"

枚举类型

//如果枚举属性没有赋值，默认会从0开始梯增
//枚举是只读属性
//枚举既可以作为值，也可以作为类型
//枚举属性具备反向映射（通过值访问键）
//	const enum声明枚举，编译结果更简洁（删除源对象）
 enum Roles {
   SUPER_ADMIN = 'super_admin',
   ADMIN = 'admin',
   USER = 'user'
 }

 let a: Roles.ADMIN = Roles.ADMIN