热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

TypeScript入门-语法篇

转自–>TypeScript入门-语法篇自学笔记,基于官方教程上的代码,添加注释.官方教程:Handbook基本类型BasicTypes接口Interfaces第

转自 –> TypeScript入门-语法篇

自学笔记, 基于官方教程上的代码, 添加注释.

官方教程:

Handbook


  • 基本类型 Basic Types
  • 接口 Interfaces
    • 第一个接口 Our First Interface
    • 可选属性 Optional Properties
    • 函数类型 Function Types
    • 数组类型 Array Types
    • 类类型 Class Types
    • 继承接口 Extending Interfaces
    • 混合类型 Hybrid Types
  • 类 Classes
    • 类 Classes
    • 继承 Inheritance
    • 公私 修饰器 PrivatePublic modifiers
      • 默认公有 Public by default
      • 理解私有 Understanding private
      • 参数属性 Parameter properties
    • 访问器 Accessors
    • 静态属性 Static Properties
    • Advanced Techniques
  • 模块 Modules
  • 函数 Functions
  • 泛型 Generics
  • 异常 Common Errors
  • Mixins
  • Declaration Merging
  • Type Inference
  • Type Compatibility
  • Writing dts files

基本类型 Basic Types

// 1. Boolean,布尔
var isDone: boolean = false;

console.log(isDone);

// 2. Number,数值
var height: number = 6;

console.log(height);

// 3. String,字符串
var name: string = "bob"; // 可以双引号
var name1: string = 'tom'; // 也可以单引号

console.log(name);
console.log(name1);

// 4. Array,数组
var list:number[] = [1, 2, 3]; // 写法1
var list1:Array = [1, 2, 3]; // 写法2

console.log(list);
console.log(list1);

// 5. Enum,枚举
enum Color {Red, Green, Blue}
var c: Color = Color.Green;

console.log(c); // 获取值
console.log(Color[c]); // 获取键, string
console.log(Color["Green"]); // 获取值

// # enum的值默认从0开始递增, 也可以自己指定
enum Color1 {Red = 1, Green = 2, Blue = 4}
var c1: Color1 = Color1.Green;

console.log(c1); // 获取值

// 6. Any,任意对象
// # 需要小心使用, 会改变数据类型
var anylist:any[] = [1, true, "free"];

anylist[2] = 100;

console.log(anylist);

// 7. Void,方法不返回值

function warnUser(): void {
console.log("This is my warning message");
}

warnUser();

接口 Interfaces

第一个接口 Our First Interface

interface LabelledValue {
label: string;
}

function printLabel(labelledObj: LabelledValue) {
console.log(labelledObj.label);
}

var myObj = {label: "only label"};
var myObj1 = {size: 10, label: "Size 10 Object"};

// # 接口是鸭子类型, 只要是有label的对象都可以传进去
printLabel(myObj);
printLabel(myObj1);

可选属性 Optional Properties

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"});
var mySquare1 = createSquare({width: 20});

console.log(mySquare);
console.log(mySquare1);

函数类型 Function Types

interface SearchFunc {
(source: string, subString: string): boolean; // 表示一个接受2个string参数, 返回bool的函数
}

var mySearch: SearchFunc;
mySearch = function(source: string, subString: string): boolean {
var result = source.search(subString);
if (result == -1) {
return false;
}
else {
return true;
}
};

var result: boolean = mySearch("test", "te");

console.log(result);

数组类型 Array Types

interface StringArray {
[index: number]: string; // 表示string数组
}

var myArray: StringArray;
myArray = ["Bob", "Fred"];

console.log(myArray["0"]);
console.log(myArray["1"]);

类类型 Class Types

interface ClockStatic {
new (hour: number, minute: number);
}

// # 这里会报错. 因为只有实例部分才检查, 而构造函数是静态部分
//class Clock implements ClockStatic {
// currentTime: Date;
// constructor(h: number, m: number) { }
//}

class Clock {
currentTime: Date;
constructor(h: number, m: number) { }
}

// # 这里需要注意
// # 我们直接使用class,这样就会检查签名
var cs: ClockStatic = Clock;
var newClock: ClockStatic = new cs(7, 30);

console.log(newClock);

继承接口 Extending Interfaces

interface Shape {
color: string;
}

interface PenStroke {
penWidth: number;
}

interface Square extends Shape, PenStroke { // 使用extends继承接口
sideLength: number;
}

var square = {};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

混合类型 Hybrid Types

interface Counter {
(start: number): string;
interval: number;
reset(): void;
}

var c: Counter;
c(10); // c可以当函数
c.reset(); // c也可以当对象
c.interval = 5.0; // c的属性

类 Classes

类 Classes

class Greeter {
greeting: string; // 属性
constructor(message: string) { // 构造函数
this.greeting = message;
}
greet(): string { // 方法
return "Hello, " + this.greeting;
}
}

var greeter = new Greeter("world");
var result = greeter.greet();

console.log(result);

继承 Inheritance

class Animal {
name:string;
constructor(theName: string) { this.name = theName; }
move(meters: number = 0) {
console.log(this.name + " moved " + meters + "m.");
}
}

class Snake extends Animal { // 使用extends关键字来继承
constructor(name: string) { super(name); }
move(meters = 5) {
console.log("Slithering...");
super.move(meters);
}
}

class Horse extends Animal {
constructor(name: string) { super(name); }
move(meters = 45) {
console.log("Galloping...");
super.move(meters);
}
}

var sam = new Snake("Sammy the Python");
var tom: Animal = new Horse("Tommy the Palomino");

sam.move();
tom.move(34);

公/私 修饰器 Private/Public modifiers

默认公有 Public by default

class Animal {
private name:string; // 除非指定为private, 否则默认是public
constructor(theName: string) { this.name = theName; }
move(meters: number) {
alert(this.name + " moved " + meters + "m.");
}
}

理解私有 Understanding private

class Animal {
private name:string;
constructor(theName: string) { this.name = theName; }
}

class Rhino extends Animal {
constructor() { super("Rhino"); }
}

class Employee {
private name:string;
constructor(theName: string) { this.name = theName; }
}

var animal = new Animal("Goat");
var rhino = new Rhino();
var employee = new Employee("Bob");

animal = rhino;
//animal = employee; // # 这里会报错. 虽然Animal和Employee属性名一致, 但是私有属性来源不一致

class A {
public name: string;
echo() {}
}

class B {
public name: string;
echo() {}
}

var a = new A();
var b = new B();

a = b; // 公有属性则没有关系

参数属性 Parameter properties

class Animal {
constructor(private name: string) { } // 可以在构造方法用private直接指定属性,省去一步
move(meters: number) {
console.log(this.name + " moved " + meters + "m.");
}
}

var dog = new Animal("dog");

dog.move(3);

访问器 Accessors

var passcode = "secret passcode";

class Employee {
private _fullName: string;

get fullName(): string { // 读属性. # 需要编译版本为ECMAScript 5
return this._fullName;
}

set fullName(newName: string) { // 写属性. # 需要编译版本为ECMAScript 5
if (passcode && passcode == "secret passcode") {
this._fullName = newName;
}
else {
console.log("Error: Unauthorized update of employee!");
}
}
}

var employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
console.log(employee.fullName);
}

静态属性 Static Properties

class Grid {
static origin = {x: 0, y: 0}
; // 用static定义静态属性
calculateDistanceFromOrigin(point: {x: number; y: number;}) {
var xDist = (point.x - Grid.origin.x);
var yDist = (point.y - Grid.origin.y);
return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
}

constructor (public scale: number) { }
}

var grid1 = new Grid(1.0);
// 1x scale
var grid2 = new Grid(5.0); // 5x scale

console.log(grid1.calculateDistanceFromOrigin({x: 10, y: 10}));
console.log(grid2.calculateDistanceFromOrigin({x: 10, y: 10}));

Advanced Techniques

模块 Modules

函数 Functions

泛型 Generics

异常 Common Errors

Mixins

Declaration Merging

Type Inference

Type Compatibility

Writing .d.ts files

推荐阅读
  • 如何自行分析定位SAP BSP错误
    The“BSPtag”Imentionedintheblogtitlemeansforexamplethetagchtmlb:configCelleratorbelowwhichi ... [详细]
  • VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
  • 本文分享了一个关于在C#中使用异步代码的问题,作者在控制台中运行时代码正常工作,但在Windows窗体中却无法正常工作。作者尝试搜索局域网上的主机,但在窗体中计数器没有减少。文章提供了相关的代码和解决思路。 ... [详细]
  • Java容器中的compareto方法排序原理解析
    本文从源码解析Java容器中的compareto方法的排序原理,讲解了在使用数组存储数据时的限制以及存储效率的问题。同时提到了Redis的五大数据结构和list、set等知识点,回忆了作者大学时代的Java学习经历。文章以作者做的思维导图作为目录,展示了整个讲解过程。 ... [详细]
  • 本文讨论了一个关于cuowu类的问题,作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案,并给出了两个可能导致错误的原因。 ... [详细]
  • 不同优化算法的比较分析及实验验证
    本文介绍了神经网络优化中常用的优化方法,包括学习率调整和梯度估计修正,并通过实验验证了不同优化算法的效果。实验结果表明,Adam算法在综合考虑学习率调整和梯度估计修正方面表现较好。该研究对于优化神经网络的训练过程具有指导意义。 ... [详细]
  • Java学习笔记之面向对象编程(OOP)
    本文介绍了Java学习笔记中的面向对象编程(OOP)内容,包括OOP的三大特性(封装、继承、多态)和五大原则(单一职责原则、开放封闭原则、里式替换原则、依赖倒置原则)。通过学习OOP,可以提高代码复用性、拓展性和安全性。 ... [详细]
  • 本文介绍了在rhel5.5操作系统下搭建网关+LAMP+postfix+dhcp的步骤和配置方法。通过配置dhcp自动分配ip、实现外网访问公司网站、内网收发邮件、内网上网以及SNAT转换等功能。详细介绍了安装dhcp和配置相关文件的步骤,并提供了相关的命令和配置示例。 ... [详细]
  • 开发笔记:加密&json&StringIO模块&BytesIO模块
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了加密&json&StringIO模块&BytesIO模块相关的知识,希望对你有一定的参考价值。一、加密加密 ... [详细]
  • 目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • 如何使用Java获取服务器硬件信息和磁盘负载率
    本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务,并获取服务器的磁盘信息,并将结果输出。然后在本地使用JS编写一个AJAX脚本,远程请求服务端的程序,得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]
  • Android JSON基础,音视频开发进阶指南目录
    Array里面的对象数据是有序的,json字符串最外层是方括号的,方括号:[]解析jsonArray代码try{json字符串最外层是 ... [详细]
  • 本文详细介绍了Spring的JdbcTemplate的使用方法,包括执行存储过程、存储函数的call()方法,执行任何SQL语句的execute()方法,单个更新和批量更新的update()和batchUpdate()方法,以及单查和列表查询的query()和queryForXXX()方法。提供了经过测试的API供使用。 ... [详细]
  • Go Cobra命令行工具入门教程
    本文介绍了Go语言实现的命令行工具Cobra的基本概念、安装方法和入门实践。Cobra被广泛应用于各种项目中,如Kubernetes、Hugo和Github CLI等。通过使用Cobra,我们可以快速创建命令行工具,适用于写测试脚本和各种服务的Admin CLI。文章还通过一个简单的demo演示了Cobra的使用方法。 ... [详细]
author-avatar
动感奥13
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有