TypeScript入门 - 类型定义函数枚举接口

Posted 2021-03-24 chanwahfung

可定义的类型

• undefined : undefined；
• number : 数值类型；
• string : 字符串类型；
• boolean : 布尔类型；
• enum ：枚举类型；
• any : 任意类型；
• void ：空类型；
• Array : 数组类型；
• Date : 日期；
• RegExp : 正则；
• null ：空类型；

类型定义

1.单类型定义

let str:string = 'hello'

2.多类型定义

let money:string|number = '100'  
//或
let money:string|number = 200

3.数组定义

//第一种
let arr:number[] = [1,2,3]
//第二种  个人比较喜欢这种，Array关键词能够第一眼就知道是数组
let arr:Array<string|number> = [1,'1']

4.数组只读

//添加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

枚举

使用枚举我们可以定义一些带名字的常量

1.字符串枚举

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

2.数字枚举

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

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

3.反向映射

正向映射（ 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代码发生了什么：

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

函数

1.默认参数 可选参数

//返回值为字符串数组
function foo(msg:string, msg1:string='world', msg2?:string):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(){}

接口(interface)

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

1.对象

readonly规定该属性只读

interface People{
  readonly name: string;
  height: number;
}
let worker:People = {name:'Joe',height:180}

2.索引签名

添加任意数量的额外属性

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

3.定义函数

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

4.为函数规定参数

interface Car {
  color: string;
  brand?: string;
}
function CreateCar(config:Car):object{
    let price = 1000
    if(config.brand==='BMW'){
        price = 2000
    }
    return {color:config.color,price}
}
CreateCar({color:'red'})

使用es6解构参数重写??

function CreateCar({color,brand}:Car):object{
    let price = 1000
    if(brand==='BMW'){
        price = 2000
    }
    return {color,price}
}

5.继承

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

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