新的项目想使用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"

Typescript中一些不理解的概念解释(泛型、断言、解构、枚举)的更多相关文章

  1. 深入理解ES6(二)(解构赋值)

    变量的解构赋值 (1) 数组的解构赋值 1.基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring ). 只要等号两边的模式相同,左边的变量 ...

  2. TypeScript 中函数的理解?与 JavaScript 函数的区别?

    一.是什么 函数是JavaScript 应用程序的基础,帮助我们实现抽象层.模拟类.信息隐藏和模块 在TypeScript 里,虽然已经支持类.命名空间和模块,但函数仍然是主要定义行为的方式,Type ...

  3. JavaScript 和 TypeScript 中的 class

    对于一个前端开发者来说,很少用到 class ,因为在 JavaScript 中更多的是 函数式 编程,抬手就是一个 function,几乎不见 class 或 new 的踪影.所以 设计模式 也是大 ...

  4. 【JS】325- 深度理解ES6中的解构赋值

    点击上方"前端自习课"关注,学习起来~ 对象和数组时 Javascript 中最常用的两种数据结构,由于 JSON 数据格式的普及,二者已经成为 Javascript 语言中特别重 ...

  5. ES6 中变量的解构赋值

    1. 数组的解构赋值 解构: ES6 中允许按照一定的模式从数组和对象中提取值,然后对变量进行赋值,这被称为解构(Destructuring). 1. 基本用法 本质上,这种写法属于"模式匹 ...

  6. ES6中的解构赋值

    在解释什么是解构赋值前,我们先来看一下, ES5 中对变量的声明和赋值. var str = 'hello word'; 左边一个变量名,右边可以是字符串,数组或对象. ES6 中增加了一种更为便捷的 ...

  7. 十分钟教你理解TypeScript中的泛型

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://blog.bitsrc.io/understanding-generics-in-t ...

  8. CNN中feature map、卷积核、卷积核的个数、filter、channel的概念解释

    CNN中feature map.卷积核.卷积核的个数.filter.channel的概念解释 参考链接: https://blog.csdn.net/xys430381_1/article/detai ...

  9. typescript 中的 infer 关键字的理解

    infer 这个关键字,整理记录一下,避免后面忘记了.有点难以理解呢. infer infer 是在 typescript 2.8中新增的关键字. infer 可以在 extends 条件类型的字句中 ...

随机推荐

  1. 解决self.encoding = charset_by_name(self.charset).encoding

    解决self.encoding = charset_by_name(self.charset).encoding def createMysqlTable(tablename): # config = ...

  2. BootStrap Modal 点击空白时自动关闭

    本文为大家讲解的是如何禁用 BootStrap Modal 点击空白时自动关闭的方法,感兴趣的同学参考下. 方法如下 $('#myModal').modal({backdrop: 'static', ...

  3. spring与shiro配置详解

    1.加入shiro相关依赖的jar包 pom.xml部分内容如下: <dependency> <groupId>org.apache.shiro</groupId> ...

  4. input[type="file"]上传图片并显示图片

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 用js制作简易计算器及猜随机数字游戏

    <!doctype html><html><head> <meta charset="utf-8"> <title>JS ...

  6. Eclipse 安装spring插件spring tool suite(STS)

    安装方法有2种,一种是在线安装,比较方便,但耗时较长,一种是离线安装,步骤复杂一些,但耗时少,下面请看详细步骤. 方法一:在线安装     1:打开eclipse菜单Help>Eclise Ma ...

  7. 创建自己的区块链游戏SLOT——以太坊代币(三)

    一个以太坊合约版本的轮盘游戏,向合约转账ETH,有几率获得3,5,10,100倍奖励 合约地址:0x53DA598E70a1505Ad95cBF17fc5DCA0d2c51174b 捐赠ETH地址:0 ...

  8. PHP之string之str_shuffle()函数使用

    str_shuffle (PHP 4 >= 4.3.0, PHP 5, PHP 7) str_shuffle - Randomly shuffles a string str_shuffle - ...

  9. Mysql命令行访问

    mysql -h localhost  -u root -p12345 mysql -h 192.168.1.100  -u root -p12345 mysql -h 192.168.1.100  ...

  10. [作业] Python入门基础--猜年龄

    age = 20 while True: try: guess_age = int(input('guess age:')) if guess_age > age: print('Is bigg ...