Typescript 查缺补漏

简介: Types Casting: let input = xxx as HTMLInputElement; let input = xxxx;   Object Shapes: Typescript only cares about the shape of an object.

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];

 

下面是我的关于ASP.NET Core Web API相关技术的公众号--草根专栏:

目录
相关文章
|
6月前
|
JavaScript 前端开发 Java
十个你必须要会的TypeScript技巧
十个你必须要会的TypeScript技巧
|
3月前
|
JavaScript 前端开发 测试技术
TypeScript逆袭!大型项目为何对它情有独钟?揭秘背后的真相!
【8月更文挑战第27天】随着前端领域的快速发展,JavaScript已成为Web开发的核心语言。然而,在处理大型项目时,其弱类型特性导致的维护困难和易错性等问题日益突出。为解决这些问题,TypeScript应运而生,逐渐成为大型项目的首选方案。
36 3
|
3月前
|
JavaScript 前端开发 安全
揭秘TypeScript的魔力:它是如何华丽变身为JavaScript的超能英雄,让您的代码飞入全新的编程维度!
【8月更文挑战第22天】在Web开发领域,JavaScript是最主流的编程语言之一。但随着应用规模的增长,其类型安全和模块化的不足逐渐显现。为解决这些问题,微软推出了TypeScript,这是JavaScript的一个超集,通过添加静态类型检查来提升开发效率。TypeScript兼容所有JavaScript代码,并引入类型注解功能。
36 2
|
6月前
|
JavaScript 前端开发 IDE
TypeScript:前端世界的“甜蜜烦恼”——究竟该不该用?
TypeScript:前端世界的“甜蜜烦恼”——究竟该不该用?
|
6月前
|
前端开发 JavaScript 搜索推荐
< 知识拓展:前端代码规范 >
前端开发中,随着工具组件的多样化,代码的“千人千面”现象带来了管理和维护的挑战。因此,制定代码规范变得至关重要,它能提升代码质量,便于团队协作。命名规范要求文件和目录使用小写和下划线或驼峰式,HTML应合理缩进,属性用双引号,自闭合标签避免斜线。CSS代码遵循HTML缩进,空格和换行有特定规则,注释统一格式。JavaScript中,注重简洁和易读,分号使用需明确,变量命名采用小驼峰,函数调用和声明有特定空格规则。代码规范旨在提高可读性和团队协作效率,但也要避免过度规范。
156 0
< 知识拓展:前端代码规范 >
|
6月前
|
JavaScript 前端开发 安全
推荐12个值得学习的TypeScript宝库!
推荐12个值得学习的TypeScript宝库!
101 0
|
JavaScript 前端开发
开心档-软件开发入门之TypeScript 联合类型
联合类型(Union Types)可以通过管道(|)将变量设置多种类型,赋值时可以根据设置的类型来赋值。
|
JavaScript 前端开发 IDE
一文教你如何学习TypeScript
一文教你如何学习TypeScript
244 0
一文教你如何学习TypeScript
|
JavaScript 编译器
TypeScript入坑
TypeScript入坑