接口

接触过面向对象的后端语言的应该对接口很熟悉,只接触过前端的对接口会有点陌生,在维基百科中对OOP中接口的定义是这样的:

  在面向对象的语言中,术语interface经常被用来定义一个不包含数据和逻辑代码但用函数签名定义了行为的抽象类型。

实现一个接口可以被看成是签署了一份协议,接口好比是协议,当我们签署它时,必须遵守它的规则,接口的规则是方法和属性的签名,我们不想实现它们。

在typescript中最常用到接口的场景是用接口作为参数的类型检查。

 interface BaseButtonProps {
icon: string;
}
function printButton(buttonProps: BaseButtonProps) {
console.log(buttonProps.icon);
}
let myObj = {icon:'add'};
printButton(myObj);

在调用printButtonh函数的时候类型检查器会查看参数对象是要求包含icon属性的。

可选属性

用?来这个属性是可选属性

 interface BaseButtonProps {
icon?: string;
}

只读属性

属性名前用 readonly来指定只读属性

 interface BaseButtonProps {
readonly icon?: string;
}

泛型类型

先看下简单泛型

function greetNane<T>(name:T):T{
return name
} let myIdentity: <T>(name: T) => T = greetNane;

我们还可以使用带有调用签名的对象字面量来定义泛型函数:

function greetNane<T>(name:T):T{
return name
}
let myIdentity: {<T>(name: T): T} = greetNane;

这引导我们去写第一个泛型接口了。 我们把上面例子里的对象字面量拿出来做为一个接口:

interface GenericIdentityFn<T> {
(arg: T): T;
} function greetNane<T>(name:T):T{
return name
} let myIdentity: GenericIdentityFn<number> = greetNane;

泛型类

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; };

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

泛型约束

interface Lengthwise {
length: number;
} function loggingIdentity<T extends Lengthwise>(arg: T): T {
console.log(arg.length); // Now we know it has a .length property, so no more error
return arg;
}

现在这个泛型函数被定义了约束

typeScript面对对象篇二的更多相关文章

  1. typeScript面对对象篇一

    面向对象是typescript的核心部分,这里先介绍下面向对象的七大原则: 单一原则:一个类子负责一个职责. 里氏替换原则:子类可以在任何地方替换它的父类. 依赖倒置原则:代码要依赖于抽象的类,而不要 ...

  2. js面对对象编程(二):属性和闭包

    上篇博客中解说了一些js对象的基本概念和使用方法.这篇博客解说一下js属性方面的:公有属性.私有属性,特权方法. 假设学过java.公有属性.私有属性,特权方法(即能够訪问和设置私有属性的方法)一定非 ...

  3. Javascript面对对象. 第一篇

    Javascript,有两个种开发模式: 1.函数式(过程化)2.面对对象(oop),面对对象语言有一个标志,就是类,而通过类可以创建任何多个属性和方法,而Ecmascript没有类的概念,因此它的对 ...

  4. electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLint

    我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google ...

  5. 【基于WinForm+Access局域网共享数据库的项目总结】之篇二:WinForm开发扇形图统计和Excel数据导出

    篇一:WinForm开发总体概述与技术实现 篇二:WinForm开发扇形图统计和Excel数据导出 篇三:Access远程连接数据库和窗体打包部署 [小记]:最近基于WinForm+Access数据库 ...

  6. .net core 1.1.0 MVC 控制器接收Json字串 (JObject对象) (二)

    .net core 1.1.0 MVC 控制器接收Json字串 (JObject对象) (二) .net core 1.1.0 MVC 控制器接收Json字串 (JObject对象) (一) 上一篇主 ...

  7. Java入门——(2)面对对象(上)

      关键词:面对对象.类..构造方法.this.static.内部类   一.面对对象的概念:把解决的问题安装一定规则划分为多个独立的对象,然后通过调用对象的方法来解决问题.其特点可概括为封装性.继承 ...

  8. Python进阶_面对对象&面对过程

    这节主要讲面对对象与面对过程两种编程思想的主要区别. 一. 简单对比 面向过程是一种基础的方法,它考虑的是实际的实现步骤,一般情况下,面向过程是自顶向下逐步求精,其最重要的是模块化的思想方法. 面向对 ...

  9. python面对对象

    面对过程VS面对对象 面向过程的程序设计的核心是过程,过程就是解决问题的步骤,面向过程的设计就是考虑周全什么时候处理什么东西 优点:极大的降低了写程序的复杂度,只需要顺着要执行的步骤,堆叠代码即可. ...

随机推荐

  1. 不可思议的纯 CSS 滚动进度条效果

    结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短. 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS , ...

  2. RIpng配置(GNS3)(第九组)

    一.拓扑图 二.路由器配置 路由器R1的配置(配置RIP静态路由协议,路由器对应接口配置相对应的ipv6地址,并给每个接口配置RIP 1 enable) 路由器R2的配置(配置RIP静态路由协议,路由 ...

  3. 【Keras篇】---利用keras改写VGG16经典模型在手写数字识别体中的应用

    一.前述 VGG16是由16层神经网络构成的经典模型,包括多层卷积,多层全连接层,一般我们改写的时候卷积层基本不动,全连接层从后面几层依次向前改写,因为先改参数较小的. 二.具体 1.因为本文中代码需 ...

  4. ASP.NET Core 3.0 上的gRPC服务模板初体验(多图)

    早就听说ASP.NET Core 3.0中引入了gRPC的服务模板,正好趁着家里电脑刚做了新系统,然后装了VS2019的功夫来体验一把.同时记录体验的过程.如果你也想按照本文的步骤体验的话,那你得先安 ...

  5. qml demo分析(threadedanimation-线程动画)

    一.效果预览 使用过qml的同学都知道,使用qml做动画效果是非常简单的,再也不需要像QWidget那样,自己模拟一个动画,费时又费力,往往还达不到效果.今天我们就来分析下qml的两种动画实现方式,如 ...

  6. 机器学习——随机森林,RandomForestClassifier参数含义详解

    1.随机森林模型 clf = RandomForestClassifier(n_estimators=200, criterion='entropy', max_depth=4) rf_clf = c ...

  7. 『练手』001 Laura.SqlForever架构基础(Laura.XtraFramework 的变迁)

    001 Laura.SqlForever架构的基础(Laura.XtraFramework 的变迁之路) Laura.XtraFramework 到底是 做什么的? Laura.XtraFramewo ...

  8. springboot~Profile开发环境与单元测试用不同的数据库

    期望 希望开发环境dev用mysql 单元测试使用本机的h2数据库 引入依赖 compile('org.springframework.boot:spring-boot-starter-data-jp ...

  9. knockoutjs data-bind 声明式绑定整理

    一.Visible绑定 1.功能 Visible绑定通过绑定一个值来确定DOM元素显示或隐藏 2.示例 <div data-bind="visible: shouldShowMessa ...

  10. C++求集合的交集差集

    标准库的<algorithm>头文件中提供了std::set_difference,std::set_intersection和std::set_union用来求两个集合的差集,交集和并集 ...