前端基础之TypeScript

安装配置

安装：
npm install -g typescript

编译：
tsc xxx.ts

vscode配置自动编译文件

1. tsc–init 初始化 修改“outDir”:"./js" // js文件编译后保存的路径
   生成一个tsconfig.json文件
2. 点击终端=>任务=>运行任务 点击tsc:监视-tsconfig.json

---

数据类型

单类型

let str:string = 'hello'

联合类型

以下值类型可以为string或number

let money:string|number = '100'

数组

//第一种
let arr:number[] = [1,2,3]
//第二种  个人比较喜欢这种，Array关键词能够第一眼就知道是数组
let arr:Array<string|number> = [1,'1']
Readonly关键字 数组只读
let arr:ReadonlyArray<string> = ['1']
//arr[0] = '2'  error
//arr.push('2')  error
//arr.length = 10  error
//let arr1 = arr  error
//arr = ['2']  ok

自定义类型

当一些复杂类型需要多次使用，可以通过type来自定义类型，便于复用

type GetMoney = ()=>string|number
let getMoney:GetMoney = function(){
   
  return '1000'
}

枚举

使用枚举我们可以定义一些带名字的常量，当枚举作为类型时，表示该属性只能为枚举中的某一个成员

1. 字符串枚举

enum SEX{
   
  man = '男',
  woman = '女',
  unknown = '未知'
}
let arr:Array<SEX> = [SEX.man,SEX.woman]

2. 数字枚举

//不使用初始化器
enum Direction {
   
    Up,    //0
    Down,  //1
    Left,  //2
    Right, //3
}
//使用初始化器
enum Direction {
   
    Up = 1,  //1
    Down,  //2
    Left,  //3
    Right, //4
}

3. 联合枚举
   枚举类型本身变成了每个枚举成员的联合，它可以知道枚举里的值的集合

enum Direction {
   
    Up,   
    Down, 
    Left, 
    Right
}

let direction:Direction;
direction = Direction.Up // ok
direction = Direction.Down // ok
把direction声明为Direction类型，可以看成声明了一个联合类型 Direction.Up|Direction.Down|Direction.Left|Direction.Right

4. 反向映射

正向映射（ name -> value） 反向映射（ value -> name）
数字枚举成员还具有反向映射， 要注意的是不会为字符串枚举成员生成反向映射

enum Enum {
   
    A
}
let a = Enum.A;
let nameOfA = Enum[a]; // "A"
TypeScript可能会将这段代码编译为下面的JavaScript：
var Enum;
(function (Enum) {
   
    Enum[Enum["A"] = 0] = "A";
})(Enum || (Enum = {
   }));
var a = Enum.A;
var nameOfA = Enum[a]; // "A"

简单说下以上JavaScript代码发生了什么：

• 自执行函数为Enum添加属性，
• Enum[“A”] = 0赋值后返回0作为索引，
• 发生第二次赋值Enum[0] = ‘A’
• 此时的Enum内部为 {“A”:0, 0:“A”}

函数

1. 默认参数 可选参数

//返回值为字符串数组
function foo(msg:string, msg1:string='world'):Array<string> {
   
  return [msg,msg1]
}
say('hello')

2. 剩余参数

function foo1(...arr:Array<string>):void {
   
  arr.forEach(item=>console.log(item))
}
say1('1','2')

3. 回调函数

function foo3(cb:()=>void) {
   
  cb()
}

4. 表达式函数

let foo4:(num:string)=>void = function(){
   }

5. Promise

//第一种 为resolve定义类型
function asyncFn():Promise<string>{
   
    let p = new Promise((resolve:(val:string)=>void)=>{
   
        resolve('result')
    })
    return p
}
//第二种 声明返回值的泛型
function asyncFn():Promise<string>{
   
    let p = new Promise<string>((resolve)=>{
   
        resolve('result')
    })
    return p
}

接口(interface)

接口的作用是对值所具有的结构进行类型检查，为这些结构定义规定，让你的代码按照规定去执行。

1. 对象

interface People{
   
  readonly name: string;
  height: number;
  like?: string;
}
let worker:People = {
   name:'Joe',height:180}
?: 可选属性
readonly 属性只读

2. 索引签名

添加任意数量的额外属性

interface People{
   
    readonly name: string;
    height: number;
    [propName: string]: any;
}
let worker:People = {
   
    name:'Joe',
    height:180,
    sex:'man',
    eat:function(){
   }
}

3. 继承

接口和类一样，可以使用继承，这样可以分割更多的模块，便于我们灵活的组合使用

interface People{
   
    say(msg:string):string
}
interface Man extends People{
   
    readonly name:string
}
let coder:Man = {
   
    name:'Wahfung',
    say(msg){
   
        return 'say:'msg
    }
}

多继承

interface Man extends People,SuperMan{
   
    readonly name:string
}

4. 定义函数

interface SayHandler {
   
  (people:string,msg:string):string
}
//参数名无需与接口的一致，甚至无需为参数规定类型，接口会自动进行判断
let sayMsg: