概述

这是我学习typescript的笔记。写这个笔记的原因主要有2个,一个是熟悉相关的写法;另一个是理清其中一些晦涩的东西。供以后开发时参考,相信对其他人也有用。

学习typescript建议直接看中文文档英文文档。我是看的英文文档

typescript handbook 学习笔记2

interfaces接口

类接口

interface SquareConfig {
//标准写法
label: string;
//可选属性
color?: string;
//只读属性
readonly x: number;
//缺省属性
[propName: string]: any;
} //使用接口
function createSquare(config: SquareConfig): {color: string; area: number} {
//用config.color这个形式调用
} //跳过额外属性检查的方法一:类型断言(强制跳过)
let mySquare = createSquare({ width: 100, opacity: 0.5 } as SquareConfig); //跳过额外属性检查的方法二:赋给变量(自动跳过)
let squareOptions = { colour: "red", width: 100 };
let mySquare = createSquare(squareOptions);

其它接口

//函数接口,参数名不重要
interface SearchFunc {
(a: string, b: string): boolean;
} //使用函数接口,注意参数中的: string可以省略。
let mySearch: SearchFunc;
mySearch = function(source: string, substring: string): boolean {
let result = source.search(substring);
return result > -1;
} //可索引的接口(数字索引)
interface StringArray {
[index: number]: string;
} //使用可索引接口
let myArray: StringArray;
myArray = ['Bob', 'Fred'];
let myStr: string = myArray[0]; //使用数字索引+字符串索引时,数字索引的类型需要是字符串索引的类型的子类型
iterface NumberDictionary {
[index: string]: number; //字符串索引
readonly [index: number]: number; //只读数字索引,必须为number的子类型
length: number; //ok
name: string; //error
}

实现接口

接口只会检查类的实例属性,不会检查类的静态属性。所以不会检查constructor。如果constructor要用接口检查的话,需要额外给它定义一个接口,如下所示:

//额外定义constructor接口
interface ClockConstructor {
new (hour: number, minute: number): ClockInterface;
} interface ClockInterface {
tick();
} function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface {
return new ctor(hour, minute);
} class DigitalClock implements ClockInterface {
constructor(h: number, m: number) { }
tick() {
console.log("beep beep");
}
}
class AnalogClock implements ClockInterface {
constructor(h: number, m: number) { }
tick() {
console.log("tick tock");
}
} let digital = createClock(DigitalClock, 12, 17);
let analog = createClock(AnalogClock, 7, 32);

继承接口

interface Shape {
color: string;
} interface PenStroke {
penWidth: number;
} //继承用extends,实现类用implements。
interface Square extends Shape, PenStroke {
sideLength: number;
} //接口的另一种写法。实现一个对象。为什么不用:?
let square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

混合接口

//既可以当做函数接口,又可以当做类接口
interface Counter {
(start: number): string;
interval: number;
reset(): void;
} //当做函数接口
let counter01 = <Counter>function(start: number) {}; //当做类接口
let counter02 = <Counter>{};
counter02.interval = 2;
counter02.reset();

继承类的接口

class Control {
private state: any;
} interface SelectableControl extends Control {
select(): void;
} //error,需要先继承Control才能实现接口SelectableControl
class Image implements SelectableControl {
select() { }
} //OK
class Button extends Control implements SelectableControl {
select() { }
}

typescript handbook 学习笔记3的更多相关文章

  1. typescript handbook 学习笔记4

    概述 这是我学习typescript的笔记.写这个笔记的原因主要有2个,一个是熟悉相关的写法:另一个是理清其中一些晦涩的东西.供以后开发时参考,相信对其他人也有用. 学习typescript建议直接看 ...

  2. typescript handbook 学习笔记2

    概述 这是我学习typescript的笔记.写这个笔记的原因主要有2个,一个是熟悉相关的写法:另一个是理清其中一些晦涩的东西.供以后开发时参考,相信对其他人也有用. 学习typescript建议直接看 ...

  3. typescript handbook 学习笔记1

    概述 这是我学习typescript的笔记.写这个笔记的原因主要有2个,一个是熟悉相关的写法:另一个是理清其中一些晦涩的东西.供以后开发时参考,相信对其他人也有用. 学习typescript建议直接看 ...

  4. typescript类(学习笔记非干货)

    我们声明一个 Greeter类.这个类有3个成员:一个叫做greeting的属性,一个构造函数和一个greet方法. We declare a Greeter class. This class ha ...

  5. typescript接口(学习笔记非干货)

    typescript的核心原则之一就是对所具有的shape类型检查结构性子类型化 One of the core principles of typescript is to check struct ...

  6. 【TypeScript】学习笔记 把一些需要记的记录一下

    安装typescript: npm install -g typescript 启动typesctipt自动编译: tsc 文件名.ts --watch 函数参数默认值: 1.有默认值参数的,声明在最 ...

  7. typescript泛型(学习笔记非干货)

    软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性. 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型, 这在创建大型系统时为你提供了十分灵活的功能. In softwa ...

  8. TypeScript语言学习笔记(2)

    接口 // 在参数类型中定义约束 function printLabel(labelledObj: { label: string }) { console.log(labelledObj.label ...

  9. TypeScript语言学习笔记(1)

    基本类型 // 布尔型(Boolean) let isDone: boolean = false; // 数值型(Number) let decimal: number = 6; let hex: n ...

随机推荐

  1. 双网卡Iptables端口转发

    当前场景如下 跳板机A是双网卡,有一个内网IP和一个公网IP 内网IP: 10.0.10.30 外网IP:  58.68.255.123 内网机器:10.0.30.88,可以和10.0.10.30通讯 ...

  2. 使用PandoraBox时的软件源配置

    src/gz 18.12_core http://downloads.pangubox.com:6380/pandorabox/18.12/targets/ralink/mt7621/packages ...

  3. 关于HashMap和HashTable.md

    目录 先来些简单的问题 你用过HashMap吗?" "什么是HashMap?你为什么用到它?" "你知道HashMap的工作原理吗?" "你 ...

  4. 对于链表中tada的绝对值相等的点,仅保留第一次出现的结点而删除其余绝对值相等的点

    算法的核心思想是用空间换时间,使用辅助数组记录链表中已出现的数值  从而只需对链表进行一趟扫描 typedef struct node { int data; struct node* next; } ...

  5. R语言-增加图例

    legend()函数 > plot(rain$Tokyo,type="l",col="red", + ylim=c(0,300), + main=&quo ...

  6. win server 2012 服务器不能ping通

    以windows server 2012作为服务器,服务器能够ping通局域网中的客户端A,但A不能ping通服务器. 解决办法: 确定服务器中系统->远程设置->远程桌面选项下为允许选项 ...

  7. python shell的交互模式和文本编辑模式

    之前学python的时候,是拿<笨办法学python>练习的. 书里面基本都是以.py文件去写代码,也就是文本编辑模式. 而交互模式(也就是powershell),唯有在input用户输入 ...

  8. react项目的ant-design-mobile的使用

    现在测试一下ant-design-mobile的使用,引用一个Button 没有样式 这个问题是没有引入样式 解决方法有两种 这种方法自己弄不出来,然后用另外一种方法 引入样式: import 'an ...

  9. [leetcode]297. Serialize and Deserialize Binary Tree 序列化与反序列化二叉树

    Serialization is the process of converting a data structure or object into a sequence of bits so tha ...

  10. [费用流][NOI2008]志愿者招募

    志愿者招募 题目描述 申奥成功后,布布经过不懈努力,终于成为奥组委下属公司人力资源部门的主管.布布刚上任就遇到了一个难 题:为即将启动的奥运新项目招募一批短期志愿者.经过估算,这个项目需要N 天才能完 ...