前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Typescript 查缺补漏

Typescript 查缺补漏

作者头像
solenovex
发布2018-03-29 12:37:04
6680
发布2018-03-29 12:37:04
举报
文章被收录于专栏:草根专栏

Types

Casting:

代码语言:javascript
复制
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:

代码语言:javascript
复制
static createPerson() {
}

instance / public fields:

代码语言:javascript
复制
class Person {
    static population = 122; // public (static) field
    country = 'China'; // instance field

    constructor(name) {
    }
}

inheritance:

代码语言:javascript
复制
class Person : Human {
    constructor() {
        super();
    }
}

super.xxx(); // function invoke.

Species:

代码语言:javascript
复制
    static get [Symbol.species]() {
        return Array;
    }

Mixins:

Enums:

代码语言:javascript
复制
enum Gender {
    Male,
    Female
}

Arrays:

Tuples:

Fixed length.

代码语言:javascript
复制
let t2: [string, number];
t2 = ['angular', 1];

Type Aliases:

interface sometimes is not good enough.

type keyword to define a type alias:

代码语言:javascript
复制
type Color = [number, number, number];
let red: Color = [255, 0, 0];

can be exported.

Object Literals

Enhanced:

代码语言:javascript
复制
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:

代码语言:javascript
复制
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

代码语言:javascript
复制
let persons = Array<[String, String]>(20);

can specify constraints on generic types:

代码语言:javascript
复制
function calc<T extends number>(x: T, y: T) {

}

can also be use with interface:

代码语言:javascript
复制
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.

代码语言:javascript
复制
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);
}
代码语言:javascript
复制
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.

代码语言:javascript
复制
console.log(it.next(134).value);

yield* keyword.

代码语言:javascript
复制
yield* [1, 2, 3];
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-03-23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Types
  • Classes
  • Object Literals
  • Generics
  • Iterators & Generators
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档