-
ts 泛型
2020-11-17 16:23:03定义A类泛型,并且把类作为传入参数的规范,就可以实现类的复用。 泛型接口 普通函数接口 接口泛型加上函数也要定义 第二种 相当于不把接口给函数B,而是在声明C的时候用泛型接口A规范其里面的写法。 ... -
ts泛型
2020-11-09 23:32:45泛型 在定义函数、接口或者类的时候、不需要先指定具体类型、而在用的时候再指定类型的一种特性。 其实就是把类也当作变量(类是可变的,未知的)使用,把类放在<>尖括号内,表示声名的类型。 定义 function ...泛型
在定义函数、接口或者类的时候、不需要先指定具体类型、而在用的时候再指定类型的一种特性。
其实就是把类也当作变量(类是可变的,未知的)使用,把类放在<>尖括号内,表示声名的类型。- 定义 function 函数名<类型变量声明>(length: number, value: 类型变量): Array<类型变量> {}
- 如:
function 函数名(length: number, value: T): Array {};其中T就是类型的变量名;调用 函数名(参数) //给变量T赋值为string。
1、函数里使用泛型
function fun<T>(a:number,b:T):any{ return a+"----"+b } let demo1=fun<string>(8,"哈哈") console.log(demo1)//8----哈哈
2、类里面使用泛型
class Person1<T,S>{ name:T; sex:S; age:number constructor(name,sex,age){ this.name=name; this.sex=sex; this.age=age; } } let demo2=new Person1<string,number>("张三","name",18) console.log(demo2)//Person1 {name: "张三", sex: "男", age: 18}
注意看与上面不同的地方
class Person1<T,S>{ name:T; sex:S; age:number constructor(name:T,sex,age:number){ this.name=name; this.sex=sex; this.age=age; } } let demo2=new Person1<string,number>("张三","男",18) console.log(demo2)//Person1 {name: "张三", sex: "男", age: 18}
-
C# 泛型参数转换
2020-12-26 01:16:22为了达到这个目的,就要解决“泛型参数转换的问题”,这个问题的知识点是in out 泛型变体。老实说,这个问题本身不困难,只是非常不直观,很容易让人忘记。 首先一点,为了实现to = ts,实际上是有前提的,那就是该... -
TS泛型、模块、命名空间
2020-09-17 18:02:27在上一篇声明文章里,变量、参数、函数返回值的类型都是在已知的前提下声明的,在真是情景中,也会有我们定义的时候未知其类型的变量或参数,在考虑复用性的情况下泛型给我们提供了强大而灵活的功能,可以支持多种...前景概要
在上一篇声明文章里,变量、参数、函数返回值的类型都是在已知的前提下声明的,在真是情景中,也会有我们定义的时候未知其类型的变量或参数,在考虑复用性的情况下泛型给我们提供了强大而灵活的功能,可以支持多种类型的数据。
例子
我们想写一个函数,它拥有一个参数我们不知道它的类型但是我们希望函数的返回值的类型跟参数的类型一样。
- 方案1: 定义参数跟返回值的类型为 any,但是一旦我们这么做我们就是向类型检查做妥协,放弃了类型检查,并且不一定能够返回与参数同类型的值。
- 方案2:
方案1: any function getValue(value: any):any { ... // 过程如果操作不当 valueTypeRes 的类型不是参数value的类型也会编译通过,返回值类型的正确性存在无法确认的风险。 return valueTypeRes; }
方案2: 泛型 /** * T 代表泛型,用其他大写字母也可以,建议用T,它的类型是调用方法的时候决定的 * 在使用泛型的方法里也可以用泛型定义变量的类型 */ function getValue<T>(value:T):T { return value; } // 调用的方式 getValue<string>('1'); // 调用的时候决定参数的类型为string,返回值也必须为string
泛型类
// 法语:class className:<T>{} class exampleClass<T> { public value:T; exampleFunc(value:T):T { return value; } }
泛型接口
泛型函数类型接口的语法跟函数类型接口一样,忘记了可以在声明文章里面查阅(传送门:TS属性、方法、类、接口声明大杂烩)
)写法1 interface IExample { <T>(value:T):T; } let getValue:IExample = <T>(value:T):T => value; 写法2 interface IExample<T> { (value:T):T; } let getValue:IExample<number> = (value:number):number => value; 写法3 interface IExample<T> { (value:T):T; } function getValue<T>(value:T):T { return value; } let getNumberValue:IExample<number> = getValue;
模块
模块拥有其自身的作用域,定义在模块里的变量,方法,类等在模块外部是不可见的。不过我们可以使用 export 的方式导出它们。相反我们需要用到模块导出的变量、方法、类等的时候使用 import 引入它们,语法是es6的语法。
模块用例:平时的公共常量和公共的方法的抽离,就是抽离成一个模块。在使用的时候 import 它们。
命名空间
命名空间的概念跟模块的概念差不多,相当于是模块中的模块,它的存在有效避免多人同时开发时的命名冲突。
// 命名空间 /** * 语法:namespace 空间名字 {} * 在命名空间外部调取命名空间的变量、方法等:空间名字.变量 || 方法等 */ namespace spaceA { interface IExmple { valueA: string; funcA(): string; } export class classA implements IExmple { valueA: string; constructor(value: string) { this.valueA = value; } funcA() { return 'success'; } }; } // 在外部调用命名空间属性 let objA = new spaceA.classA('value'); // 在命名空间里调用其他命名空间的属性 namespace spaceB { let objB = new spaceA.classA('value'); // 接口命名和 spaceB 里一样不会冲突 interface IExmple { valueA: string; funcA(): string; }; }
推荐:如果想要使得代码更简洁,也可以把每个命名空间单独抽离成一个模块~
END…我是个有底线的家伙…END
-
泛型参数怎么new_TS学习笔记(五):泛型
2020-12-10 04:32:34泛型是指定一个表示类型的变量,用它来代替某个实际的类型用于编程,而后通过实际调用时传入或推导的类型来对其进行替换,以达到一段使用泛型程序可以实际适应不同类型的目的。为了实现泛型所要达到的目的,我们也可...泛型是指定一个表示类型的变量,用它来代替某个实际的类型用于编程,而后通过实际调用时传入或推导的类型来对其进行替换,以达到一段使用泛型程序可以实际适应不同类型的目的。为了实现泛型所要达到的目的,我们也可采用指定类型为 any 或者为每一种可能的类型都写一个方法(重载),但这严重违反抽象和复用代码的原则。所以在考虑可重用组件的时候,我们应该使用泛型。 泛型其实是 C# 和 Java 这种强类型语言中的一个特性,TypeScript 把这一特性引进到了弱类型语言 JavaScript 中,对于没接触过强类型语言的前端 coder,理解这个概念可能有点吃力,如果看不太懂,可以先去了解一下 Java 中的泛型,下面进入正题。
初识泛型
定义泛型:我们把要传入函数的参数类型设为一个类型变量 T ,它能够帮助我们捕获用户传入的类型,之后出现 T 的地方,都会被替换成用户传入的类型。
function identity<T>(arg: T): T { return arg; } function getFirst<T>(arr: T[]): T { return arr[0]; } console.log(identity(10)); // 10 console.log(identity('TS')); // TS console.log(getFirst([1, 2, 3, 4])); // 1 console.log(getFirst(['a', 'b', 'c'])); // a
使用泛型:有两种使用泛型的方式,第一种是传入所有的参数,包括类型参数;第二种是不传类型参数,因为 TypeScript 的编译器会利用类型推论来确定参数的类型,推荐使用第二种。
function identity<T>(arg: T): T { return arg; } function getFirst<T>(arr: T[]): T { return arr[0]; } // 使用一:传入所有参数 console.log(identity<number>(10)); // 10 console.log(identity<string>('TS')); // TS console.log(getFirst<number>([1, 2, 3, 4])); // 1 console.log(getFirst<string>(['a', 'b', 'c'])); // a // 使用二:不传参数类型 console.log(identity(10)); // 10 console.log(identity('TS')); // TS console.log(getFirst([1, 2, 3, 4])); // 1 console.log(getFirst(['a', 'b', 'c'])); // a
泛型类型
一个泛型函数的类型如下:
<泛型变量名称>(参数1: 泛型变量, 参数2: 泛型变量, ...参数n: 泛型变量) => 泛型变量
可以以对象字面量的形式来定义泛型函数(这更像是接口),如:
let foo: { <T>(arg: T): void }; foo = function <T>(arg: T): void { console.log(arg); } foo(13); // 13
将上面的例子中的
{ <T>(arg: T): void }
改为接口,则有:interface IGeneric { <T>(arg: T): void } let foo: IGeneric = function <T>(arg: T): void { console.log(arg) } foo(13); // 13
最后,接口中也可以使用泛型,这样子就锁定了代码里可以使用的类型,如:
interface IGeneric<T> { (arg: T): void } function fn<T>(arg: T): void { console.log(arg); } let myFn: IGeneric<number> = fn; myFn(13); //13
泛型类
除了泛型接口,我们还可以创建泛型类(但是无法创建泛型枚举、泛型命名空间),泛型类使用 <> 包围泛型类型变量,如:
class Person<T> { love: T; say: (arg: T) => T; } let me = new Person<string>(); me.love = 'TS'; // me.love = 520; // ERROR me.say = function(love: string){ return `my love is ${love}`; } console.log(me.say('TS')); // my love is TS
注意:类有两部分,分为静态部分和实例部分,泛型类的类型指的是实例部分的类型,静态属性不能使用该泛型类型。
泛型约束
泛型可以通过 extends 一个接口来实现泛型约束,写法如:
<泛型变量 extends 接口>
,例子:interface IArray { length: number } function logIndex<T extends IArray>(arg: T): void { for (let i = 0; i < arg.length; ++i) { console.log(i) } } let arr = [1, 2, 3] // logIndex<number>(arr) // 报错 logIndex<number[]>(arr) // 允许 logIndex(arr) // 自动类型推导,允许
可以在泛型里使用类类型,如使用泛型创建工厂函数,需要引用构造函数的类类型,有:
function create<T>(c: { new(): T }): T { return new c() }
-
ts泛型,函数返回类型为对象某个key值的类型
2020-04-15 22:06:19泛型是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。一直是ts学习中的一个重难点。 具体的学习资料还是看官网吧。这里出一个题目: 写一个函数,接受两个参数,一个为... -
泛型参数转换的问题
2017-02-02 16:18:00泛型不同参数类型生成的对象是相互独立的。 //如 Tuple<string> ts;...为了达到这个目的,就要解决“泛型参数转换的问题”,这个问题的知识点是in out 泛型变体。老实说,这个问题本身不困... -
TS-泛型
2019-09-10 17:06:18TS学习 泛型 基本使用 //定义一个普通的函数 这样 只能返回一个number类型的数值 如果希望能传入一个任意...//但是使用any的话 就失去了校验参数的意义 所以 我们就使用泛型 function Hello1(str:any):any{ return... -
ts:泛型
2020-06-28 16:30:46//泛型函数的类型与非泛型函数的类型没什么不同,只是有一个类型参数在最前面,像函数声明一样 function createArray<T>(length: number, value: T): Array<T> { let result: T[] = []; for (let i = ... -
TS:泛型的使用方法
2020-11-08 15:30:02TS:泛型 1. 前言 有时候,我们想让一个函数的参数和返回类型是相同的,就可以使用类型变量。 类型变量是一种特殊的变量,用于表示类型而不是值。 function identity<T>(arg : T) : T{ return arg; } ... -
ts中的泛型相关
2020-08-03 14:43:19-----ts中泛型、泛型方法、泛型类、泛型接口-------------------------------- 泛型解决了类、接口、方法的复用性,以及对不特定数据类型的支持(类型校验) ... list(value:T){ //泛型参数 this. -
ts 学习笔记 - 泛型
2019-09-24 13:27:32目录 泛型 举个栗子 泛型约束 多个参数时也可以在泛型约束中使用类型参数 泛型接口 泛型类 泛型参数的默认类型 泛型 泛型(Generics)是指在定义函数、接口或者类的时候... -
TS学习之泛型
2017-10-31 10:09:00可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据 不适用泛型的函数 function myfn(args: number): number { ...第一个只能传入number类型的参数,第二个虽然可以传入任意类型... -
高阶ts内置泛型帮助类型
2020-11-19 15:37:03可以用来继承一个class,interface,还可以用来判断有条件类型(很多时候在ts看到extends,并不是继承的意识) 示例: T extends U ? X : Y; 上面的类型意思是,若 T 能够赋值给 U,那么类型是 X,否则为 Y。 原理... -
关于TypeScript泛型对象参数问题
2018-04-10 08:15:20!...deepCopy2(source: T, target?: T): T { target = target || new source.constructor(); for ( const i in source) { ...但是如果用any代替泛型就不会报错,但是如果一定要用泛型怎么解决这个问题???? -
2解决通用返回结果是泛型_Typescript复杂泛型实践:如何切掉函数参数表的最后一个参数?...
2021-01-13 03:55:56最近有个同事问了我个问题:如何编写一个ts泛型工具Transfer<Fn>,将Fn的参数表最后一个参数切掉,并返回切掉参数之后的函数类型?function inputFn(a: number, b: string, c: boolean) { return a } type ... -
ts / 函数 && 泛型 && 枚举 (三)
2021-01-08 16:35:14将函数付给变量时,也可在左侧同时指出变量类型,称为写出完整函数类型,但一般情况下ts会自动推断左侧的类型,无需手动指出。 参数 可选参数 TypeScript里的每个函数参数都是必须的。传递给一个函数的参数个数必须 -
如何保存一个函数_Typescript复杂泛型实践:如何切掉函数参数表的最后一个参数?...
2020-12-03 16:09:16最近有个同事问了我个问题:如何编写一个ts泛型工具Transfer<Fn>,将Fn的参数表最后一个参数切掉,并返回切掉参数之后的函数类型?function inputFn(a: number, b: string, c: boolean) { return a } type ... -
泛型的使用
2019-10-08 05:43:25泛型的类型参数T可以看作是一个占位符,它不是一种类型,它仅代表了某种可能的类型。类型参数T可以在使用时用任何类型来代替。 类型参数T的命名准则如下: 使用描述性名称命名泛型类型参数,除非单个字母名称完全... -
泛型实体接受多表联查的结果_TypeScript重难点:泛型
2020-12-06 09:14:13这篇文章跟大家分享学习ts的又一个重难点「泛型」。在ts中,得泛型者,得天下!1什么是泛型整个ts的学习,其实就是各种数据类型的类型约束的学习。当我们规定一个变量只能是number时,它就不能是其他数据类型。let a... -
一文搞定TS高级语法(函数 类 多态 接口 泛型 装饰器)
2020-05-18 23:29:43文章目录一、 函数1. 定义函数1. 函数声明2. 匿名函数3. 三点运算符的应用二、 类1. 类的定义2....为可选参数 可选参数必须配置在最后面 //可用默认参数,但不能和?用在一起 function fun1(name:str -
Typescript #6 泛型
2019-07-09 10:37:00泛型就是用一个东西表示广泛的类型,对传入的参数类型和返回的类型可以定义。T指的是这个函数的类型。 泛型函数 函数用ts数据类型,想要同时返回string类型和number类型,如下: function getData1(value:string):... -
TypeScript 学习四 面向对象的特性,泛型,接口,模块,类型定义文件*.d.ts
2019-09-29 03:52:37泛型(generic):参数化的类型,一般用来限制集合的内容;指定只能放某个类型的元素 如下图中的尖括号中的Person,就代表一个泛型,说明workers必须是一个内容必须放的是Person类型数据的数组; 例如:规定了数组... -
it营Typescript学习笔记01类型,...多态,抽象类,接口,泛型,泛型接口,类实例作为参数,封装底层数据库操作
2021-02-04 22:37:211、安装ts npm install -g typescript 查看安装成功与否 tsc -V 2、初始化congfig.json 在init后config.json后打开“outer”:“./js” tsc --init 3、编译ts文件 将xxx.ts编译成js tsc xxx.ts 4、配置实时编译 ... -
ts-paired-function-test:试图让类型流经函数联合和泛型,但已损坏-源码
2021-02-10 06:41:45当函数作为选项传递给配置对象时,试图弄清楚如何将1个函数的返回类型传递给另一个函数。 配置对象接受name , funcA和funcB 例: { ... (您可能会问,为什么要使用funcB中未定义的参数调用funcA