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

Typescript中一些不理解的概念解释(泛型、断言、解构、枚举) ...

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

新的项目想使用typescript,因此又对其概念及使用过一遍,本文主要记录下对之前一些概念不太理解的地方。

1、泛型

定义: 在定义函数、接口或者类的时候,不预先指定具体的类型,而是在使用的时候再指定类型。提高可重用性。

function createArray<T>(length: number, value: T): Array<T>{
    let result: T[] = [];
    for (let i = 0; i < length; i++){
        result[i] = value
    }
    return result
}
console.log("数字", createArray(3, 1));
console.log("字符串", createArray(3, 'a'));

定义函数createArray它拥有泛型参数(value),用T表示;该函数同时约定返回一个T类型的数组(Array)。

当value是数字1的时候,返回数字数组;
当value是字符串a的时候,返回字符串数组;

2、解构

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。主要是可以简化代码,更加便于理解。

// 常用1
// 使用
let [a,b,c] = [1,2,3];
// 代替
let a = 1;
let b = 2;
let c = 3;

// 常用2
let obj = {a:1,b:2};
let obj2 = {...obj}

3、断言

当TS不确定一个联合类型的变量是哪个类型的时候,只能访问此联合类型的所有类型的共有属性和方法;但有时候确实需要在不确定类型的时候就访问一个类型的属性或方法。

function getLength(something: string | number): number{
    if((<string>something).length){
        return (<string>something).length
    }else{
        return something.toString().length
    }
}

用法1:在需要断言的变量前加上

function getLength(something: string | number): number{
    if((something as string).length){
        return (something as string).length
    }else{
        return something.toString().length
    }
}

4、枚举

使用枚举,可以定义一些带名字的常量。用于清晰地表达意图或创建一组有区别的用例。
数字类型枚举:默认情况下,第一个枚举值是0,后续至依次增1

enum Color { 
    red,
    blue,
    yellow
}

let col = Color.blue;
alert(col);
// 1

字符串枚举:

enum ProName {
    SUCCESS = 'ok',
    ERROR = 'error'
}

alert(ProName.ERROR);
// "error"

鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
上一篇:
TypeScript 3.0下react默认属性DefaultProps解决方案发布时间:2022-07-18
下一篇:
TypeScript作为前端开发你必须学习的技能二)发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

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

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