解构赋值

数组解构

let input = [1, 2];
let [first, second] = input;
console.log(first); // outputs 1
console.log(second); // outputs 2

上面的写法等价于:

first = input[0];
second = input[1];

利用解构赋值交换变量:

[first, second] = [second, first];

函数参数解构:

function f ([first, second]: [number, number]) [
console.log(first)
console.log(second)
] f(1, 2)

解构剩余参数:

let [first, ...rest] = [1, 2, 3, 4]
console.log(first) // 1
console.log(rest) // [2, 3, 4]

也可以忽略其它参数:

let [first] = [1, 2, 3, 4];
console.log(first); // outputs 1

或者跳过解构:

let [, second, , fourth] = [1, 2, 3, 4]

对象解构

示例一:

let o = {
a: "foo",
b: 12,
c: "bar"
};
let { a, b } = o;

就像数组解构,你可以用没有声明的赋值:

let a: number,
b: number; ({a, b} = {a: 123, b: 456}) console.log(a, b) // 123 456

你可以在对象里使用 ... 语法创建剩余变量:

let { a, ...passthrough } = o;
let total = passthrough.b + passthrough.c.length;

属性解构重命名

你也可以给属性以不同的名字:

let { a: newName1, b: newName2 } = o;

注意,这里的冒号不是指示类型的。 如果你想指定它的类型, 仍然需要在其后写上完整的模式。

let {a, b}: {a: string, b: number} = o;

默认值

function keepWholeObject(wholeObject: { a: string, b?: number }) {
let { a, b = 1001 } = wholeObject;
}

展开操作符

  • 展开数组
  • 展开对象
    • 不会展开方法

解构赋值用于函数声明

type C = {a: string, b?: number}

function f ({a, b}: C): void {
// ...
}

解构赋值用于加载指定模块成员

基本示例

class Person {
name: string;
age: number; constructor(name: string, age: number) {
this.name = name;
this.age = age;
} sayHello() {
console.log(this.name);
}
} let zs: Person = new Person('张三', 18);

构造函数

继承

class Animal {
move(distanceInMeters: number = 0) {
console.log(`Animal moved ${distanceInMeters}m.`);
}
} class Dog extends Animal {
bark() {
console.log('Woof! Woof!');
}
} const dog = new Dog();
dog.bark();
dog.move(10);
dog.bark();

这个例子展示了最基本的继承:类从基类中继承了属性和方法。 这里, Dog是一个 派生类,它派生自 Animal 基类,通过 extends关键字。 派生类通常被称作 子类,基类通常被称作 超类

因为 Dog继承了 Animal的功能,因此我们可以创建一个 Dog的实例,它能够 bark()move()

下面是一个更复杂的例子:

class Animal {
name: string;
constructor(theName: string) { this.name = theName; }
move(distanceInMeters: number = 0) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
} class Snake extends Animal {
constructor(name: string) { super(name); }
move(distanceInMeters = 5) {
console.log("Slithering...");
super.move(distanceInMeters);
}
} class Horse extends Animal {
constructor(name: string) { super(name); }
move(distanceInMeters = 45) {
console.log("Galloping...");
super.move(distanceInMeters);
}
} let sam = new Snake("Sammy the Python");
let tom: Animal = new Horse("Tommy the Palomino"); sam.move();
tom.move(34);

与前一个例子的不同点是,派生类包含了一个构造函数,它 必须调用 super(),它会执行基类的构造函数。 而且,在构造函数里访问 this的属性之前,我们 一定要调用 super()。 这个是TypeScript强制执行的一条重要规则。

这个例子演示了如何在子类里可以重写父类的方法。 Snake类和 Horse类都创建了 move方法,它们重写了从Animal继承来的 move方法,使得 move方法根据不同的类而具有不同的功能。 注意,即使 tom被声明为Animal类型,但因为它的值是 Horse,调用 tom.move(34)时,它会调用 Horse里重写的方法:

Slithering...
Sammy the Python moved 5m.
Galloping...
Tommy the Palomino moved 34m.

实例成员访问修饰符

public 开放的

  • 默认为 public
class Animal {
public name: string;
public constructor(theName: string) { this.name = theName; }
public move(distanceInMeters: number) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}

private 私有的

  • 不能被外部访问,只能在类的内部访问使用
  • 私有成员不会被继承
class Person {
public name: string;
public age: number = 18;
private type: string = 'human'
public constructor (name, age) {
this.name = name
this.age = age
}
}

protected 受保护的

  • private 类似,但是可以被继承
class Person {
protected name: string;
constructor(name: string) { this.name = name; }
} class Employee extends Person {
private department: string; constructor(name: string, department: string) {
super(name)
this.department = department;
} public getElevatorPitch() {
return `Hello, my name is ${this.name} and I work in ${this.department}.`;
}
} let howard = new Employee("Howard", "Sales");
console.log(howard.getElevatorPitch());
console.log(howard.name); // 错误

注意,我们不能在 Person类外使用 name,但是我们仍然可以通过 Employee类的实例方法访问,因为Employee是由 Person派生而来的。

readonly 只读的

在参数中使用修饰符

在上面的例子中,我们不得不定义一个受保护的成员 name和一个构造函数参数 theNamePerson类里,并且立刻给 nametheName赋值。 这种情况经常会遇到。 参数属性可以方便地让我们在一个地方定义并初始化一个成员。

class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}

可以简写为:

class Person {
constructor(public name: string, public age: number) {
}
}

属性的存(get)取(set)器

let passcode = "secret passcode";

class Employee {
// 私有成员,外部无法访问
private _fullName: string; // 当访问 实例.fullName 的时候会调用 get 方法
get fullName(): string {
return this._fullName;
} // 当对 实例.fullName = xxx 赋值的时候会调用 set 方法
set fullName(newName: string) {
if (passcode && passcode == "secret passcode") {
this._fullName = newName;
}
else {
console.log("Error: Unauthorized update of employee!");
}
}
} let employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
alert(employee.fullName);
}

静态成员

  • 不需要实例化访问的成员称之为静态成员,即只能被类访问的成员
  • static 关键字
class Grid {
static origin = {x: 0, y: 0};
calculateDistanceFromOrigin(point: {x: number; y: number;}) {
let xDist = (point.x - Grid.origin.x);
let yDist = (point.y - Grid.origin.y);
return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
}
constructor (public scale: number) { }
} let grid1 = new Grid(1.0); // 1x scale
let grid2 = new Grid(5.0); // 5x scale console.log(grid1.calculateDistanceFromOrigin({x: 10, y: 10}));
console.log(grid2.calculateDistanceFromOrigin({x: 10, y: 10}));

typescript-学习使用ts-2的更多相关文章

  1. TypeScript 学习资料

    TypeScript 学习资料: 学习资料 网址 TypeScript Handbook(中文版)(推荐) https://m.runoob.com/manual/gitbook/TypeScript ...

  2. Typescript 学习笔记六:接口

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  3. Typescript 学习笔记五:类

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  4. Typescript 学习笔记二:数据类型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  5. Typescript 学习笔记三:函数

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  6. Typescript 学习笔记一:介绍、安装、编译

    前言 整理了一下 Typescript 的学习笔记,方便后期遗忘某个知识点的时候,快速回忆. 为了避免凌乱,用 gitbook 结合 marketdown 整理的. github地址是:ts-gitb ...

  7. TypeScript学习笔记(八):1.5版本之后的模块和命名空间

    我之前有写过TS1.5版本之前的“模块”的笔记:TypeScript学习笔记(七):模块 但是TS这里的模块和在ECMAScript 2015里的模块(即JS原生支持了模块的概念)概率出现了混淆,所以 ...

  8. typeScript学习随笔(一)

    TypeScript学习随笔(一) 这么久了还不没好好学习哈这么火的ts,边学边练边记吧! 啥子是TypeScript  TypeScript 是 JavaScript 的一个超集,支持 es6 标准 ...

  9. Typescript学习总结

    typescript(以下简称TS)出来也有好长时间了,下面记录一下学习心得. 首先学这门语言前,请确保有以下基础知识: 扎实的javascript基础知识 es6的基础知识 面向对象编程的概念(没有 ...

  10. TypeScript学习文档-基础篇(完结)

    目录 TypeScript学习第一章:TypeScript初识 1.1 TypeScript学习初见 1.2 TypeScript介绍 1.3 JS .TS 和 ES之间的关系 1.4 TS的竞争者有 ...

随机推荐

  1. springMVC:SSM整合

    环境要求 环境: IDEA MySQL 5.7.19 Tomcat 9 Maven 3.6 要求: 需要熟练掌握MySQL数据库,Spring,JavaWeb及MyBatis知识,简单的前端知识: 数 ...

  2. 九、CI框架之将URI转为数组原型

    一.输入以下代码,uri_to_assoc的参数默认从3开始 二.输出效果如下: 不忘初心,如果您认为这篇文章有价值,认同作者的付出,可以微信二维码打赏任意金额给作者(微信号:382477247)哦, ...

  3. 网络寻路(DFS)

    Description X 国的一个网络使用若干条线路连接若干个节点.节点间的通信是双向的.某重要数据包,为了安全起见,必须恰好被转发两次到达目的地.该包可能在任意一个节点产生,我们需要知道该网络中一 ...

  4. DES与MD5加密

    using System; using System.Data; using System.Configuration; using System.Web; using System.Security ...

  5. Tensorflow Mask-RCNN(三)——实时 检测视频

    参考:https://www.youtube.com/watch?v=lLM8oAsi32g import cv2    import numpy as np              def ran ...

  6. VMWare WorkStation15--Win10下开机启动虚拟机

    参考 https://www.cnblogs.com/qmfsun/p/6284236.html http://www.cnblogs.com/eliteboy/p/7838091.html VMWa ...

  7. torch文档学习笔记

    下面为官方文档学习笔记    http://pytorch.org/docs/0.3.0/index.html 1.torch.Tensor from __future__ import print_ ...

  8. CTF -bugku-misc(持续更新直到全部刷完)

    1.签到题 点开可见.(这题就不浪费键盘了) CTF- 2.这是一张单纯的图片 图片保存到本地,老规矩,winhex看一看 拉到最后发现 因为做过ctf新手的密码 所以一看就知道unicode 百度站 ...

  9. 程序员用 Python 扒出 B 站那些“惊为天人”的UP主!

    ​ 前言 ! 近期B站的跨年晚会因其独特的创意席卷各大视频网站,给公司带来了极大的正面影响,股价也同时大涨,想必大家都在后悔没有早点买B站的股票: ​ 然而今天我们要讨论的不是B站的跨年晚会,而是B站 ...

  10. UVA 12657/COJ 1329 HN第九届省赛 链表模拟

    因为最近学了Splay,刚看到这个题目总共四种操作,把某个数移到另一个数的左边 或者右边 交换两个数 翻转整个序列,马上想到用Splay,因为总点数和总操作数都为10^5,如果用Splay把操作优化到 ...