• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript-类型声明、枚举、函数、接口

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

以下所写的并不代表typescript的数据类型,而是在使用过程中可以用作定义的类型。这里只列举一些常见的,不代表只有以下这些

  • number : 数值类型;
  • string : 字符串类型;
  • boolean : 布尔类型;
  • Array : 数组类型;
  • Date : 日期;
  • RegExp : 正则;
  • Error : 错误类型;
  • any : 任意类型;
  • undefined : undefined;
  • null :空类型;
  • Function : 函数;
  • Promise : Promise;
  • object : 对象类型;

为一个变量定义object类型时,意味着变量的值可以为数组、函数、Date等,就像js所定义的object。当需要实现一个对象时,可以使用接口来定义。

  • interface : 接口;

该类型需要通过interface关键词来实现

  • enum :枚举类型;

该类型需要通过enum关键词来实现

  • void :空类型;

该类型规定函数返回值,代表无返回值

类型声明

1.单类型

let str:string = 'hello'

2.联合类型
以下值类型可以为string或number

let money:string|number = '100'  

3.数组

//第一种
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

4.自定义类型
当一些复杂类型需要多次使用,可以通过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代码发生了什么:

  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'):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:SayHandler = function(p, m) {
  let result = p+':'+m
  return result
}
sayMsg('Joe','hello')

5.为函数规定参数

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}
}

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap