TypeScript入门-泛型

泛型

要创建一个可重用的组件,其中的数据类型就必须要兼容很多的类型,那么如何兼容呢,TypeScript提供了一个很好的方法:泛型

Hello World

要兼容多种数据格式,可能会有人想到any,即

function identify(arg: any): any{    return arg;
}

使用any存在一个问题,有可能传入的值和返回的值不是同一种值,例如,传入数字,但是不确定返回的是什么值

要解决这个问题,我们需要引入类型变量-一种特殊的变量,只用于表示类型不表示值

function identity<T>(arg: T): T {    return arg;
}

给identify添加了类型变量T,用来捕获传入值的类型,然后将返回值的类型也设置为T,就实现了传入值和返回值为同一类型值的需求

我们把identify这个函数叫做泛型,因为它适用于所有类型,并且不会有any类型存在的问题

使用泛型的方法有两种:

  1、传入所有的参数,包括类型参数

let output = identify<string>(‘qwe‘);

  2、利用类型推论--即编译器会根据传入的参数自动地帮助我们确定T的类型

let output = identify(‘qwe‘);

泛型变量

在泛型中,我们要合理正确的使用泛型变量T,要牢记T表示任何类型

错误使用:

function identify<T>(arg: T): T {
    console.log(arg.length);// Error: T doesn‘t have .length
    return arg;
}

在泛型中我们使用了length这个属性,但是T代表任何类型,所以有可能是number,而number是没有length属性的,所以会报错

如果想要使用length这个属性,我们可以创建数组

function identify<T>(arg: T[]): T[] {
    console.log(arg.length);// Error: T doesn‘t have .length
    return arg;
}

泛型类型

泛型函数的类型与非泛型函数的类型没什么不同,只是有一个类型参数在最前面,像函数声明一样:

function identify<T>(arg: T): T {    return arg;
}

let myIdentify: <U>(arg: U) => U = identify;

从上面的代码中可以看出也可以使用不同的泛型参数名,只要在数量上和使用方式上能对应上就可以

当然也可以把泛型参数当做一个接口的参数,这样就可以知道这个接口具体用的是那种类型

interface GenericIdnetify<T>{
    (arg: T): T;
}function identity<T>(arg: T): T{    return arg;
}

let myGenericidentify: GenericIdnetify<string> = identity;

泛型类

泛型类看上去与泛型接口差不多。 泛型类使用( <>)括起泛型类型,跟在类名后面。

class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

泛型约束

在前面的泛型变量中遇到了一个问题,就是在泛型中调用参数的length时,如果参数没有Length属性会报错,而使用泛型约束,就是只有满足一定的条件才可以使用这个泛型

为此,我们定义一个接口来描述约束条件。 创建一个包含 .length属性的接口,使用这个接口和extends关键字还实现约束:

interface lengthwise{
    length: number;
}function identity<T extends lengthwise>(arg: T): T{
    console.log(arg.length);    return arg;
}

identity(123); //erroridentity(‘qwe‘); //true

当传入123时,没有length属性,就报错,而传入字符串qwe时则完全正确

时间: 2024-10-15 03:07:37

TypeScript入门-泛型的相关文章

Java入门——泛型(一)

Java入门——泛型(一) 泛型程序设计意味着编写的代码可以被很多不同类型的对象所重用:更重要的是它保证了数据类型的安全.但是设计泛型并没有那么容易,一个泛型程序员要做的就是预测出所有类未来可能的所有的用途. 一:目标 泛型程序设计分为3个等级,基本等级是使用泛型——典型的小ArrayList这样的集合——不必考虑它们的工作方式和原因.大多数程序猿将会停留在这个等级上,直到出现什么问题. 二:简单泛型类 package Sep22; public class Pair<T> {//泛型可以有多

【第11篇】最全的中文TypeScript入门指南详解案例教程与代码案例

一.最全的中文TypeScript入门指南详解案例教程           文档下载 二.代码案例 源代码下载 手机微信扫一扫有惊喜... ================================================================================================================= 1.详细安装文章请看 http://blog.csdn.net/jilongliang/article/details/219429

TypeScript入门指南(JavaScript的超集)

TypeScript入门指南(JavaScript的超集) 你是否听过 TypeScript? TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析,显式接口.TypeScript是微软的开源项目,它是由C#之父Anders Hejlsberg发起的. 为什么会有 TypeScript? JavaScript 只是一个脚本语言,并非真正设计用于开发大型 Web 应用,JavaScript 没有提供类和模块等概念,对于一个真正的应用开发,TypeSc

TypeScript入门五:TypeScript的接口

TypeScript接口的基本使用 TypeScript函数类型接口 TypeScript可索引类型接口 TypeScript类类型接口 TypeScript接口与继承 一.TypeScript接口的基本使用 1.1定义TypeScript接口的指令(interface) 接口让我们想到的第一个短语就是(API).比如日常我们所说的调用某某程序的API一般都是跨应用的接口,如别的网站的或者APP的接口:还有我们每天都是用的编程语言的指令和内置的方法及属性,这些可以叫做编程语言的接口:还有令我们既

TypeScript入门二:基本数据类型

浅析基本数据类型 TypeScript类型解析 一.浅析基本数据类型 首先有一个问题TypeScript是一门编译型语言?还是解释性语言?显然已经不能被这两个分类来区分,TypeScript的并不是为了让JavaScript改变执行方式,不是为了提高机器执行效率的.而编译型和解释型的分类是基于这两个特点的.但是,TypeScript具备编译型语言一个特点,就是它对类型进行检查,如果出现类型冲突时它是无法编译成js文件的. 既然TypeScript编译需要对变量进行类型检查,这就意味着TypeSc

36_入门泛型的基本应用

  package com.itcast.day2; import java.lang.reflect.Constructor; import java.util.ArrayList; import java.util.List; /** * 泛型入门 * * @author ljl * */ public class GernericTest { public static void main(String[] args) throws Exception { /** * 不使用泛型时,ecl

TypeScript入门教程

TypeScript是什么 TypeScript是JavaScript的一个超集 TypeScript需要编译为JavaScript才能运行(语法糖) TypeScript提供了类型系统,规范类似Java TypeScript提供了ES6的支持,也可以支持部分ES7草案的特性,不用担心TypeScript无法兼容目前主流的JavaScript解释器 环境安装 安装node.js https://nodejs.org/en/download/ 安装TypeScript包,这就是TS的编译器 npm

TypeScript入门三:TypeScript函数类型

TypeScript函数类型 TypeScript函数的参数 TypeScript函数的this与箭头函数 TypeScript函数重载 一.TypeScript函数类型 在上一篇博客中已经对声明TypeScript类型变量已经做了初步的解析,这里先回顾以下: 1 //声明函数 2 function add1(x:number,y:number):number{ 3 return x+y; 4 } 5 6 let add2 = function(x:number,y:number):number

TypeScript入门知识二(参数新特性)

一,参数类型 1.在参数的名称后面使用冒号来指定参数的类型,当赋值的不是指定类型数值时会报错. var myname: string = "zhang san"; 2.当你没有指定类型时,会默认你第一次赋值的数据类型为当前变量的数据类型,在TypeScript中称为(类型推断机制) var myname = "zhang san"; myname = 13;//(这时候就会报错) 3.any 类型,当定义为any 类型时,可以赋多种类型的数值. var myname