TypeScript教程1
Boolean类型
aser:和as3一样
- var isDone: boolean = false;
复制代码
Number类型
aser:as3经常用int和uint,以后只用number就可以啦
- var height: number = 6;
复制代码
String类型
aser:和as3一样
- var name: string = "bob";
复制代码
Array类型
我习惯用第三种,和as3一样。
第一种:
- var list:number[] = [1, 2, 3];
复制代码
第二种:
- var list:Array<number> = [1, 2, 3];
复制代码
第三种:【我用的】【yellowshorts】反应在vs2012报错,我使用sublime没有报错,谨慎的用前两种吧。
- var list:Array = []
复制代码
Enum枚举
aser:as3没有枚举,但是很好用。和最近使用lua的table差不多
- enum Color {Red, Green, Blue};
复制代码
默认情况下,枚举成员编号从0开始。 您可以通过手动设置其成员的值
- enum Color {Red = 1, Green = 2, Blue = 4};
复制代码
使用的时候和数组差不多。两种方式 。
第一种:
- Color.Green
复制代码
第二种:
- enum Color {Red = 1, Green, Blue};
复制代码
Any类型
aser:类似于as3的*。感谢@少瑞指正!
我们可能需要描述变量的类型,但是我们又不知道当前变量的类型。 这时候,让他在编译时检查类型。这时候就可以使用any:
- var notSure: any = 4;
复制代码
例如,您可能有一个数组但数组元素是不同类型:
- var list:any[] = [1, true, "free"];
复制代码
void类型
也就是标注在方法最后,表示不返回任何值。
- function warnUser(): void {
- alert("This is my warning message");
- }
复制代码
==================================================
一、简单例子1、看看接口工作最简单的一个例子:
- function printLabel(labelledObj: {label: string}) {
- console.log(labelledObj.label);
- }
- var myObj = {size: 10, label: "Size 10 Object"};
- printLabel(myObj);
复制代码
类型检查器检查调用“printLabel”。 printLabel的函数只有一个参数,要求传入的对象属性称为“标签”类型的字符串,例如【{size: 10, label: "Size 10 Object"}】。 请注意,我们的对象实际上有更多的属性,例如【size:10】,但是编译器只检查 至少 需要的存在和匹配所需的类型,例如【label: "Size 10 Object"】是不是字符串。
2、另一个例子,使用一个接口来描述需求的“标签”属性,是一个字符串:
- interface LabelledValue {
- label: string;
- }
- function printLabel(labelledObj: LabelledValue) {
- console.log(labelledObj.label);
- }
- var myObj = {size: 10, label: "Size 10 Object"};
- printLabel(myObj);
复制代码
接口“LabelledValue”是一个名字,我们现在可以使用在前面的例子描述的要求。 它仍然代表着拥有一个属性被称为“标签”,是string类型的。 注意到我们没有显式地说 对象,我们通过“printLabel”实现这个接口。 在这里,只注重类型。 如果我们通过列出的功能满足需求,那么它是允许的。
值得指出的是,这些属性的类型检查器不需要任何形式的实现,只存在属性的接口要求,所需的类型。
二、可选属性
并不是每一个属性都需要传递。
这里的这个例子:
- interface SquareConfig {
- color?: string;
- width?: number;
- }
- function createSquare(config: SquareConfig): {color: string; area: number} {
- var newSquare = {color: "white", area: 100};
- if (config.color) {
- newSquare.color = config.color;
- }
- if (config.width) {
- newSquare.area = config.width * config.width;
- }
- return newSquare;
- }
- var mySquare = createSquare({color: "black"});
复制代码
编写接口时可选属性变量名后边增加“?” 作为属性声明的一部分。
可选属性的优点是,你可以描述这些可能可用的属性,同时还捕捉属性,你知道预计不会是可用的。 例如,我们打错属性的名称传递给“createSquare”, 让我们知道我们将得到一个错误信息:
- interface SquareConfig {
- color?: string;
- width?: number;
- }
- function createSquare(config: SquareConfig): {color: string; area: number} {
- var newSquare = {color: "white", area: 100};
- if (config.color) {
- newSquare.color = config.collor; // Type-checker can catch the mistyped name here
- }
- if (config.width) {
- newSquare.area = config.width * config.width;
- }
- return newSquare;
- }
- var mySquare = createSquare({color: "black"});
复制代码
三、函数类型
除了描述一个物体的属性,接口也能够描述函数类型。
如下:
- interface SearchFunc {
- (source: string, subString: string): boolean;
- }
复制代码
一旦定义,我们可以使用这个函数类型接口像我们其他类型的接口。 如下:
- var mySearch: SearchFunc;
- mySearch = function(source: string, subString: string) {
- var result = source.search(subString);
- if (result == -1) {
- return false;
- }
- else {
- return true;
- }
- }
复制代码
参数类型必须匹配,而参数的名称不需要匹配。 例如,我们可以写上面的例子是这样的:
- var mySearch: SearchFunc;
- mySearch = function(src: string, sub: string) {
- var result = src.search(sub);
- if (result == -1) {
- return false;
- }
- else {
- return true;
- }
- }
复制代码
函数返回类型也会匹配检查。
四、数组类型
类似于我们可以使用接口来描述函数类型,我们也可以描述数组类型。 数组类型有一个索引的类型,描述了类型允许索引对象,连同相应的返回类型来访问索引。
- interface StringArray {
- [index: number]: string;
- }
- var myArray: StringArray;
- myArray = ["Bob", "Fred"];
复制代码
下面这个没看懂,谁看懂了下面回一下,谢谢!感谢 【foodyi】的解释
这个是索引数组,是以KEY VALUE的形式来声明的,就像这个接口的名字一样,他是一个字典结构,不可以有length的属性,这是我的理解,TS的接口太灵活了。 |
- interface Dictionary {
- [index: string]: string;
- length: number; // error, the type of 'length' is not a subtype of the indexer
- }
复制代码
五、类类型实现一个接口
最常见的一种使用语言c#和Java接口的显式地执行。
- interface ClockInterface {
- currentTime: Date;
- }
- class Clock implements ClockInterface {
- currentTime: Date;
- constructor(h: number, m: number) { }
- }
复制代码
你也可以描述方法在类中实现接口,如下我们与凝固时间的例子:
- interface ClockInterface {
- currentTime: Date;
- setTime(d: Date);
- }
- class Clock implements ClockInterface {
- currentTime: Date;
- setTime(d: Date) {
- this.currentTime = d;
- }
- constructor(h: number, m: number) { }
- }
复制代码
六、扩展接口
像类、接口可以扩展。 让你更自由的使你的接口为可重用的组件。
- interface Shape {
- color: string;
- }
- interface Square extends Shape {
- sideLength: number;
- }
- var square = <Square>{};
- square.color = "blue";
- square.sideLength = 10;
复制代码
一个接口可以扩展多个接口,创建一个组合的所有接口。
- interface Shape {
- color: string;
- }
- interface PenStroke {
- penWidth: number;
- }
- interface Square extends Shape, PenStroke {
- sideLength: number;
- }
- var square = <Square>{};
- square.color = "blue";
- square.sideLength = 10;
- square.penWidth = 5.0;
复制代码
七、混合类型
如前所述,接口可以描述丰富的类型出现在现实世界的JavaScript。 由于JavaScript的动态和灵活自然,偶尔会遇到的对象是上面描述的一些类型的组合。
一个例子是一个对象,作为一个函数和一个对象,附加属性:
- interface Counter {
- (start: number): string;
- interval: number;
- reset(): void;
- }
- var c: Counter;
- c(10);
- c.reset();
- c.interval = 5.0;
复制代码
==================================================
TypeScript教程1的更多相关文章
- TypeScript教程2
在TS中,我们允许开发人员使用面向对象技术. 1.类让我们看看一个简单的基于类的例子: class Greeter { greeting: string; constructor(message: s ...
- TypeScript教程
汇智课堂 地址 http://www.hubwiz.com/course/55b724ab3ad79a1b05dcc26c/ TypeScript是一种由微软开发的自由和开源的编程语言.它是Java ...
- TypeScript 教程&手册
参考:https://www.w3cschool.cn/typescript/ https://www.gitbook.com/book/zhongsp/typescript-handbook/det ...
- TypeScript教程3
1.快速回顾一下这JavaScript中的命名函数和匿名函数: 纯文本查看 复制代码 1 2 3 4 5 //Named functionfunction add(x, y) { return ...
- 2018-05-09 5分钟入门CTS-尝鲜中文版TypeScript
知乎原链 本文为中文代码示例之5分钟入门TypeScript的CTS版本. CTS作者是@htwx(github). 它实现了关键词和标准库的所有命名汉化. 本文并未使用附带的vscode相关插件(包 ...
- HowToDoInJava 其它教程 1 · 翻译完成
原文:HowToDoInJava 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远. ApacheCN 学习资源 目录 Maven 教程 如何在 ...
- 【electron+vue3+ts实战便笺exe】一、搭建框架配置
不要让自己的上限成为你的底线 前言 诈尸更新系列,为了跟上脚步,尝试了vue3,在学习vue3的时候顺便学习一手electron和ts,本教程将分别发布,源码会在最后的文章发布.因为还在开发中,目前也 ...
- 100 个常见错误「GitHub 热点速览 v.22.35」
本周的特推非常得延续上周的特点--会玩,向别人家的女朋友发送早安.这个错误是如何发生的呢?如何有效避免呢?自己用 daily_morning 免部署.定制一个早安小助手给女友吧. 除了生活中的错误,工 ...
- 转载:TypeScript 简介与《TypeScript 中文入门教程》
简介 TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构 ...
随机推荐
- 数据恢复软件Extundelete
数据恢复软件Extundelete介绍 一.概述 作为一名运维人员,保证数据的安全是根本职责,所以在维护系统的时候,要慎重和细心,但是有时也难免发生出现数据被误删除的情况,这个时候该如何快速.有效地恢 ...
- java 读excel xlsx
http://bbs.csdn.net/topics/380257685 import java.io.File; import java.io.IOException; import java.io ...
- 在阿里云ECS(CentOS6.5)上安装redis
下载所需的redis 命令: wget http://download.redis.io/releases/redis-3.0.7.tar.gz 结果: 解压redis压缩文件: 命令: .tar.g ...
- css3动画-transition
当css属性改变的时候,控制animation的速度,让属性的变化发生在一段时间之内,而不是立即生效. 语法 transition: <property> <duration> ...
- HUST 1606 Naive
预处理一下,然后o(1)询问. #include<cstdio> #include<cstring> #include<cmath> #include<str ...
- objective-c之各种数值
各种数值 NSArray和NSDictionary都只能存储对象,不能存储任何基本类型的数据,如int,float,struct.因此我们可以用对象来封装基本的数值. NSNumber Cocoa提供 ...
- view添加阴影无效
需求:需要给cell里的imageview添加阴影 问题:按照标准的代码添加阴影,然并卵:代码如下: imageview.layer.shadowColor = [[UIColor blackColo ...
- iOS开发网络数据之AFNetworking使用 分类: ios技术 2015-04-03 16:35 105人阅读 评论(0) 收藏
http网络库是集XML解析,Json解析,网络图片下载,plist解析,数据流请求操作,上传,下载,缓存等网络众多功能于一身的强大的类库.最新版本支持session,xctool单元测试.网络获取数 ...
- 【uoj57】 WC2013—平面图
http://uoj.ac/problem/57 (题目链接) 题意 给出二位平面上n个点,点之间有一些连线,连线不在顶点之外的地方相交,将平面分为若干个区域.给出一些询问点对,问从这个点所在的区域走 ...
- UVa 11503 - Virtual Friends
题目大意:给出若干对朋友关系,每给出一对朋友关系,就输出二者所在关系网中的人数. 首先是对每个人编号,使用map简化编号过程,然后就是使用并查集更新集合.要注意的是当给出A和B的朋友关系时,无论A和B ...