ts中的function和接口
interface PrintCallback{
// 匿名函數,返回类型为空
(success:boolean):void
}
interface Person{
//只读
readonly first_name:string
// 可选
last_name?:string
print(callback:PrintCallback):void
}
/**
* 即使pCallback的类型定义为接口PrintCallback,其参数也可以为空
* 如果pCallback写了参数,只要参数类型和函数返回类型遵从PrintCallback即可,即使参数名字不一样也是可以的
*/
let pCallback:PrintCallback=(suc:boolean)=>{
console.log("callback",suc)
}
let pe:Person={
first_name:'tome',
print:(callback:PrintCallback):void=>{
callback(true)
}
}
pe.print(pCallback)

![file](https://img2018.cnblogs.com/blog/1762823/201911/1762823-20191102170948393-1532895361.jpg)
##### 类型断言
类型断言和强制类型转化的区别就是,类型断言没有改变变量的实际类型,但是强制类型转化已经改变变量的类型,类型断言是在编译时期,强制类型转化是发生在运行时期
在ts中,类型断言是**在编译过程中**,当程序员知道该变量的类型,会通过类型断言方式告诉编译器,该变量是哪个类型,使得编译更加通畅,注意类型断言只是出现在编译过程中
```
let x:any='i am jack'
/**
* 上面x可能是任何类型,编译器可能不知道x到底属于什么类型变量
* 这是通过表示把x断言成字符串类型,就是告诉编译器要把x当成字符串处理,
* 这是就可以调用字符串处理函数substring了
*/
let s=(x).substring(0,3)
```
---
```
interface Person{
name:string
age:number
first_name:string
}
// 第二种断言的方式,这时候如果不加as断言,编译不通过,注意在js中,是可以在空的对象上加新的属性的,但是ts中是会编译失败的
let per={} as Person
per.name='jack'
per.age=12
per.first_name='tome'
```
##### 单继承,多实现
```
// 接口可以继承其他接口,类可以继承一个单独的类,但是可以实现多个接口,单继承,多实现
interface Person{
name:string
}
interface Programmer extends Person{
age:number
}
let p:Programmer={
name:'jack',
age:12
}
// 如果一个类实现一个接口,必须要实现接口中的所有的属性和方法
class P implements Person{
name:string
constructor(name:string){
this.name=name
}
}
```
---
```
// 如何用ts描述下面的列表结构
[
{
"userId": 1,
"id": 1,
"title": "sunt aut facere",
"body": "quia et suscipit"
},
{
"userId": 1,
"id": 2,
"title": "qui est esse",
"body": "est rerum temporepossimus qui neque nisi nulla"
}
]
// 可以先定义一个接口
interface todoList{
userId:number
id:number
title:string
body:string
}
//然后定义数组的类型为借口类型
let arr:todoList[]=[
{
"userId": 1,
"id": 1,
"title": "sunt aut facere",
"body": "quia et suscipit"
},
{
"userId": 1,
"id": 2,
"title": "qui est esse",
"body": "est rerum temporepossimus qui neque nisi nulla"
}
]
```
![file](https://img2018.cnblogs.com/blog/1762823/201911/1762823-20191102170948677-1593793803.jpg)
##### 抽象类:abstract
- 抽象类或者接口均是不能实例化的,除非继承或者实现它的子类才可以实例化
- 继承抽象类的子类必须要实现抽象类中的抽象方法和抽象属性

abstract class Person {
constructor(name:string) {
this.name=name
}
name:string
display():void{
console.log(this.name)
}
// 下面是抽象类区别于类的关键,定义一个抽象方法,注意抽象方法是没有方法体的
abstract find(str:string):void
}
class Programmer extends Person{ age:number
constructor(name:string,age:number) {
super(name)//super是必须调用
this.age=age
}
// 子类必须要实现抽象类的抽象方法
find(str: string): void {
console.log(str)
}
}
let p:Programmer=new Programmer('jack',22)
补充:ts中如何定义一个函数类型的变量
 //第一种方法
let d:(param:string)=>string
d=function(pa:string):string{
return pa
}
console.log(d('tome'))
// 第二种,用接口方法
interface Fn{
(param:string):string
}
let f:Fn=(pa:string):string=>pa

扫码关注公众号,有更多精彩文章等你哦

typescript 入门教程四的更多相关文章

  1. 无废话ExtJs 入门教程四[表单:FormPanel]

    无废话ExtJs 入门教程四[表单:FormPanel] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在窗体里加了个表单.如下所示代码区的第28行位置,items:form. ...

  2. PySide——Python图形化界面入门教程(四)

    PySide——Python图形化界面入门教程(四) ——创建自己的信号槽 ——Creating Your Own Signals and Slots 翻译自:http://pythoncentral ...

  3. Elasticsearch入门教程(四):Elasticsearch文档CURD

    原文:Elasticsearch入门教程(四):Elasticsearch文档CURD 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接: ...

  4. RabbitMQ入门教程(四):工作队列(Work Queues)

    原文:RabbitMQ入门教程(四):工作队列(Work Queues) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https:/ ...

  5. JasperReports入门教程(四):多数据源

    JasperReports入门教程(四):多数据源 背景 在报表使用中,一个页面需要打印多个表格,每个表格分别使用不同的数据源是很常见的一个需求.假如我们现在有一个需求如下:需要在一个报表同时打印所有 ...

  6. TypeScript 入门教程学习笔记

    TypeScript 入门教程学习笔记 1. 数据类型定义 类型 实例 说明 Number let num: number = 1; 基本类型 String let myName: string = ...

  7. WebGL入门教程(四)-webgl颜色

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 颜色效果图: 操作步骤: 1.创建HTML5 canva ...

  8. Spring Cloud 入门教程(四): 分布式环境下自动发现配置服务

    前一章, 我们的Hello world应用服务,通过配置服务器Config Server获取到了我们配置的hello信息“hello world”. 但自己的配置文件中必须配置config serve ...

  9. WCF入门教程四[WCF的配置文件]

    一.概述 配置也是WCF编程中的主要组成部分.在 以往的.net应用程序中,我们会把DBConn和一些动态加载类及变量写在配置文件里.但WCF有所不同.他指定向客户端公开的服务,包括服务的地址. 服务 ...

随机推荐

  1. pythonUDP发送结构体,对齐到C++结构体

    给出程序先: import random import socket import struct import threading import pickle import json from str ...

  2. leetcode 11. Container With Most Water 、42. Trapping Rain Water 、238. Product of Array Except Self 、407. Trapping Rain Water II

    11. Container With Most Water https://www.cnblogs.com/grandyang/p/4455109.html 用双指针向中间滑动,较小的高度就作为当前情 ...

  3. npm WARN deprecated fsevents windows

    更新下 使用yarn貌似会帮助跳过这个问题: info fsevents@2.1.2: The platform "win32" is incompatible with this ...

  4. HDCMS多图字段的使用?

    下面是HDCMS多图字段的简单使用: HDCMS在后台添加的多图,存到数据的时候是经过序列化过的,所以在使用的时候需要进行反序列化操作: $moreImg = M('keshi')->where ...

  5. spring2.5 jdk1.8

    今天运行一个14年基于spring2.5的项目,出现下面错误 Unexpected exception parsing XML document from class path resource .. ...

  6. 【FreeMarker】FreeMarker快速入门(一)

    什么是 FreeMarker FreeMarker 是一款 模板引擎: 即一种基于模板和要改变的数据, 并用来生成输出文本(HTML网页,电子邮件,配置文件,源代码等)的通用工具. 它不是面向最终用户 ...

  7. kubernetes 【版本】

    kubernetes本身是一个集群,我们所说的kubernetes版本实际上指的是集群各个组件的版本. 有哪些组件有版本呢? https://kubernetes.io/docs/setup/rele ...

  8. jquery获取复选框checkbox的值

    jQuery API : each(callback) :以每一个匹配的元素作为上下文来执行一个函数. :checked :匹配所有选中的被选中元素(复选框.单选框等,不包括select中的optio ...

  9. Js获取file上传控件的文件路径总结

    总结一个获取file上传控件文件路径的方法 firefox由于保护机制只有文件名,不能获取完整路径. document.getElementById('file').onchange = functi ...

  10. 原生JavaScript常用本地浏览器存储方法一(方法类型)

    有时需要将网页中的一些数据保存在浏览器端.好处就是当下次访问页面时,直接就可以从本地读取数据,不需要再次向服务器请求数据.目前常用的有以下几种方法: 1.cookie cookie会随着每次HTTP请 ...