typeScript 技术胖笔记下

20_函数泛型<>

现在给join方法一个泛型，名字就叫做JSPang,后边的参数，这时候他也使用刚定义的泛型名称。然后在正式调用这个方法时，就需要具体指明泛型的类型啦。

function join<JSPang>(first: JSPang, second: JSPang) {return `${first}${second}`;
}
join < string > ("jspang", ".com");

如果要是number类型，就直接在调用方法的时候进行更改就可以了。

join < number > (1, 2);

a泛型中数组的使用

第一种是直接使用[]，第二种是使用Array<泛型>

function myFun<ANY>(params: ANY[]) {return params;
}
myFun < string > ["123", "456"];

function myFun<ANY>(params: Array<ANY>) {return params;
}
myFun < string > ["123", "456"];

<T>来作泛型的表示

b 多个泛型的定义

第一个泛型用T,第二个用P代表。

function join<T, P>(first: T, second: P) {return `${first}${second}`;
}
join < number, string > (1, "2");

c 泛型的类型推断

function join<T, P>(first: T, second: P) {return `${first}${second}`;
}
join(1, "2");

泛型也是支持类型推断的。但是不建议使用

d 初始类的泛型

class SelectGirl {constructor(private girls: string[] | number[]) {}getGirl(index: number): string | number {return this.girls[index];}
}

ts，复杂代码时，使用泛型重构

class SelectGirl<T> {constructor(private girls: T[]) {}getGirl(index: number): T {return this.girls[index];}
}const selectGirl = new SelectGirl(["大脚", "刘英", "晓红"]);
console.log(selectGirl.getGirl(1));

因为使用的泛型推断，不推荐

const selectGirl = new SelectGirl() < string > ["大脚", "刘英", "晓红"];

e 泛型重的继承

要求返回一个对象中的name,使用接口的方式

interface Girl {name: string;
}

extends实现泛型的继承

class SelectGirl<T extends Girl> {...
}

interface Girl {name: string;
}class SelectGirl<T extends Girl> {constructor(private girls: T[]) {}getGirl(index: number): string {return this.girls[index].name;}
}const selectGirl = new SelectGirl([{ name: "大脚" },{ name: "刘英" },{ name: "晓红" },
]);
console.log(selectGirl.getGirl(1));

f 泛型约束

你现在要求这个泛型必须是string或者number类型，进行约束，可以使用关键字extends。

class SelectGirl<T extends number | string> {//.....
}

22_命名空间

components.ts引用

namespace Components {export class Header {constructor() {const elem = document.createElement("div");elem.innerText = "This is Header";document.body.appendChild(elem);}}export class Content {constructor() {const elem = document.createElement("div");elem.innerText = "This is Content";document.body.appendChild(elem);}}export class Footer {constructor() {const elem = document.createElement("div");elem.innerText = "This is Footer";document.body.appendChild(elem);}}
}

Home.ts引用

namespace Home {export class Page {constructor() {new Components.Header();new Components.Content();new Components.Footer();}}
}

子命名空间

namespace Components {export namespace SubComponents {export class Test {}}//someting ...
}

24-import

import { Header, Content, Footer } from "./components";

typeScript 技术胖笔记下相关推荐

typeScript 技术胖笔记上
03_基础静态类型与对象静态类型 a 对象类型 const car:{name:string,price:number}={name:'奔驰',price:12222} b 数组类型 const ca ...
技术胖的2019新版React全家桶免费视频（84集）
技术胖 2019年09月18日阅读 29883 关注技术胖的2019新版React全家桶免费视频(84集) 一共84集,从5月4日开始录制,到9月18日完成,5个月时间.如果是一个专业讲师,这进度 ...
Electron学习笔记（技术胖）
Electron学习笔记(技术胖) 标签(空格分隔): 前端桌面技术胖 Electron 安装前提:已经安装node,并且是10以上的版本 cnpm install electron --sav ...
技术胖前端学习路线学习笔记【更新中】
文章目录技术胖前端学习路线学习笔记 1. 网络知识 2. 超文本标记语言(HTML) 3.层叠样式表(CSS) 4.浏览器脚本语言(JavaScript) 5.版本控制管理系统Version Con ...
TypeScrip最污的技术课-技术胖TypeScript图文视频教程
2019独角兽企业重金招聘Python工程师标准>>> 近日Node.js之父瑞安达尔(Ryan Dahl)发布新的开源项目 deno,从官方介绍来看,可以认为它是下一代 Node, ...
技术胖1-4季视频复习— (看视频笔记)
输入技术胖视频1-4季总记不太住的模板的使用,template component 的注册.传值.父子组件 methods中的 $event nextTick 使用是在哪一步前,哪一步后? 内 ...
【vue教程】来自JSpang 技术胖的视频
一.入门篇qvq 照例原教程来源 https://jspang.com/posts/2017/02/23/vue2-1.html 只是看了视频学习+整理不是原创 1 computed.注意这 ...
java mvc框架代码_JAVA技术学习笔记：SpringMVC框架（内附入门程序开发代码）
原标题:JAVA技术学习笔记:SpringMVC框架(内附入门程序开发代码) JavaEE体系结构包括四层,从上到下分别是应用层.Web层.业务层.持久层.Struts和SpringMVC是Web层的 ...
小五思科技术学习笔记之SSH
下面介绍一下相关概念: SSH的概念: SSH的英文全称为Secure Shell,SSH使用TCP的22号端口,其目的是要在非安全的网络上提供安全的远程登陆和其他安全的网络服务, 为什么要使用SSH ...

typeScript 技术胖笔记下

20_函数泛型<>

a泛型中数组的使用

b 多个泛型的定义

c 泛型的类型推断

d 初始类的泛型

e 泛型重的继承

f 泛型约束

22_命名空间

子命名空间

24-import

typeScript 技术胖笔记下相关推荐

最新文章

热门文章

typeScript 技术胖 笔记 下

20_函数泛型<>

a泛型中数组的使用

b 多个泛型的定义

c 泛型的类型推断

d 初始类的泛型

e 泛型重的继承

f 泛型约束

22_命名空间

子命名空间

24-import

typeScript 技术胖 笔记 下相关推荐

最新文章

热门文章

typeScript 技术胖笔记下

typeScript 技术胖笔记下相关推荐