Typescript 查缺补漏
Types
Casting:
let input = xxx as HTMLInputElement;
let input = <HTMLElement>xxxx;
Object Shapes:
Typescript only cares about the shape of an object.
Interfaces:
- only describe structure, no implementation
- don't compile to any js code
- DRY, easy refactoring
- open, can be extended later on. (extends)
any:
never:
Nothing can be assigned to never.
function return type void.
Classes
still protofypal inheritance, but better syntax.
static method:
static createPerson() {
}
instance / public fields:
class Person {
static population = 122; // public (static) field
country = 'China'; // instance field
constructor(name) {
}
}
inheritance:
class Person : Human {
constructor() {
super();
}
}
super.xxx(); // function invoke.
Species:
static get [Symbol.species]() {
return Array;
}
Mixins:
Enums:
enum Gender {
Male,
Female
}
Arrays:
Tuples:
Fixed length.
let t2: [string, number];
t2 = ['angular', 1];
Type Aliases:
interface sometimes is not good enough.
type keyword to define a type alias:
type Color = [number, number, number];
let red: Color = [255, 0, 0];
can be exported.
Object Literals
Enhanced:
let person = {
__proto__ : String.prototype,
name: 'Dave',
company,
[`${company}Title`]: 'CTO',
toString() {
return `${super.toString()}xxx`;
}
};
Destructured Assignment:
Rest, Spread Properties:
...
rest: and the rest goes here
spread: and all the properties on this object.
Getters, Setters:
Function - Types:
Functions have a type just like any other value.
interface can also describe functions:
interface ClickListener {
(this: Window, e: MouseEvent): void
}
const myListender: ClickListener = (e) => {
console.log(e);
};
this, calling context must be window.
Function - Parameters:
named, optional, default value, rest parameters(...).
Generics
let persons = Array<[String, String]>(20);
can specify constraints on generic types:
function calc<T extends number>(x: T, y: T) {
}
can also be use with interface:
interface IFileReader<T extends File> {
read(file: T): Blod
}
Access Modifier Keywords:
public, protected, private
Function overloading:
Allows us to have more than one function "head", but a single implementation.
function add(x: number, y: number): number; // this pattern ok
function add(x: string, y: string, radix: number): number; // this pattern ok
function add(x: number | string, y: number | string, radix: number = 10): number { // must match 2 patterns above.
return parseInt(`${x}`, radix) + parseInt(`${y}`, radix);
}
add(1, '4'); // not ok
Iterators & Generators
Iterators: keeping track of current position, next()
Iterables:
- support for .. of loop.
- Requires implementation of Symbol.iteractor method
- Array, Map already support it.
Generators:
- yield
- function*() syntax
- returns an iterator
- State of closure is preserved between .next() calls.
- Execution Can be Paused (yield).
it.next() goes in the loop, and pause after yield until next it.next() call.
Iterators:
The ability to pass values in while iterating.
console.log(it.next(134).value);
yield* keyword.
yield* [1, 2, 3];
- 硬盘安装 CoreOS 三节点集群
- 从javascript脚本混淆说起
- CoreOS etcd3 集群实践
- Spring MVC学习教程之流程表单提交,3步实现这个功能
- PXE 模式启动 CoreOS
- iPXE 模式启动 CoreOS(简单、推荐使用)
- CoreOS 已废弃组件
- Docker Compose version 3 使用详解
- Virtualbox 安装 Alpine Linux
- LinuxKit 使用
- Docker 实践遇到的问题(持续更新)
- GitHub Pages 常见问题
- SpyDealer深度剖析:一个广泛针对中国手机APP进行信息窃取的恶意软件
- Docker + Drone CI/CD 实践
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法