typescript-学习使用ts-2
解构赋值
数组解构
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
和一个构造函数参数 theName
在 Person
类里,并且立刻给 name
和 theName
赋值。 这种情况经常会遇到。 参数属性可以方便地让我们在一个地方定义并初始化一个成员。
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的更多相关文章
- TypeScript 学习资料
TypeScript 学习资料: 学习资料 网址 TypeScript Handbook(中文版)(推荐) https://m.runoob.com/manual/gitbook/TypeScript ...
- Typescript 学习笔记六:接口
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- Typescript 学习笔记五:类
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- Typescript 学习笔记二:数据类型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- Typescript 学习笔记三:函数
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- Typescript 学习笔记一:介绍、安装、编译
前言 整理了一下 Typescript 的学习笔记,方便后期遗忘某个知识点的时候,快速回忆. 为了避免凌乱,用 gitbook 结合 marketdown 整理的. github地址是:ts-gitb ...
- TypeScript学习笔记(八):1.5版本之后的模块和命名空间
我之前有写过TS1.5版本之前的“模块”的笔记:TypeScript学习笔记(七):模块 但是TS这里的模块和在ECMAScript 2015里的模块(即JS原生支持了模块的概念)概率出现了混淆,所以 ...
- typeScript学习随笔(一)
TypeScript学习随笔(一) 这么久了还不没好好学习哈这么火的ts,边学边练边记吧! 啥子是TypeScript TypeScript 是 JavaScript 的一个超集,支持 es6 标准 ...
- Typescript学习总结
typescript(以下简称TS)出来也有好长时间了,下面记录一下学习心得. 首先学这门语言前,请确保有以下基础知识: 扎实的javascript基础知识 es6的基础知识 面向对象编程的概念(没有 ...
- TypeScript学习文档-基础篇(完结)
目录 TypeScript学习第一章:TypeScript初识 1.1 TypeScript学习初见 1.2 TypeScript介绍 1.3 JS .TS 和 ES之间的关系 1.4 TS的竞争者有 ...
随机推荐
- java的形参与实参的区别以及java的方法
package com.lv.study; public class Demo05 { public static void main(String[] args) { //我想要用什么分隔符进行分隔 ...
- 2 ~ express ~ 模板引擎的配置与使用
一,创建应用 (一),创建应用,监听端口 var express = require('express') // 创建app应用 var app = express() app.listen(3000 ...
- Linux command line and shell scripting buble
Chapter 4 More bash shell Commands 1. ps ps -ef 2. top 3. kill 3940 kill -s HUP 3940 killall http* 4 ...
- JS高级学习笔记(9) 之 转:前端路由跳转基本原理
原文链接: 前端路由跳转基本原理 前述 前端三大框架Angular.React和Vue都推行单页面应用SPA开发模式,这是因为在路由切换时,替换DOM Tree中发生修改的DOM部分,来减少原来因为多 ...
- 吴裕雄--天生自然C++语言学习笔记:C++ 注释
程序的注释是解释性语句,可以在 C++ 代码中包含注释,这将提高源代码的可读性.所有的编程语言都允许某种形式的注释. C++ 支持单行注释和多行注释.注释中的所有字符会被 C++ 编译器忽略. C++ ...
- 吴裕雄--天生自然 PHP开发学习:常量
<?php // 区分大小写的常量名 define("GREETING", "欢迎访问 Runoob.com"); echo GREETING; // 输 ...
- c# 循环界面控件
在 Winform 开发中,窗体(Form)就像一个大容器,可以装各种各样的控件,包括 Panel控件.如果窗体是 Winform 中的最大的容器,那么 Panel控件可以算是老二,它专门用于软件界面 ...
- UML-异常处理
1.名词解释 缺陷(Fault):错误引起的行为.如:程序员拼写错了数据库名称 错误(Error):缺陷在运行系统中的表现.如:当使用拼写错误的名称调用数据库时,抛出数据库异常 故障(Failure) ...
- 第四章:Schema与数据类型优化
1. 选择优化的数据类型 选择数据类型的原则 更小的通常更好:选择可以正确存储数据的最小数据类型 小的数据类型消耗更少的内存.CPU;占用更少的磁盘 选用简单的数据类型:简单的数据类型通常需要更少的C ...
- python脚本下载 Google Driver 文件
使用python脚本下载 Google Driver 文件 import yaml import sys import requests import os import re import tarf ...