TypeScript 学习与总结

参考文档：github.com/zhongsp/Typ…

基本类型

• boolean
• number
• string
• 数组 T[]
• 元组 [T,U]
• 枚举 enum
• any
• 空值 void 与 any 相反，表示没有任何类型
• null
• undefined
• never 表示永远不存在的类型，如抛出异常
• object

泛型

在像c#和Java这样的语言中，建立 可重用组件 的工具箱中的一个主要工具是泛型，也就是说，可以建立能够在多种类型上工做的组件，而不是单个类型。这容许用户使用这些组件并使用本身的类型

泛型例子

• 函数返回值和输入值的类型相同
  • 不使用泛型

  function clone(a:any):any{
      return a;
  }
  复制代码

  • 使用泛型

  function clone<T>(a:T):T{
      return a;
  }
  
  let r1=clone<string>("haha"); // r1:string
  let r2=clone<number>(1); // r2:number
  // 能够不明确传入类型，编译器会自动推断
  let r3=clone(true); // r3:boolean
  复制代码

泛型变量

把泛型当作变量做为类型的一部分使用

function logger<T>(args:Array<T>):Array<T>{
    console.log(args.length);
    return args;
}
复制代码

也能够以下这么写：

function logger<T>(args:T[]):T[]{
    console.log(args.length);
    return args;
}
复制代码

泛型类型

• 泛型函数类型

function clone<T>(arg: T): T {
    return arg;
}

let f1: <T>(arg: T) => T = clone;
// 也可使用带有调用签名的对象字面量定义
let f2: { <T>(arg: T): T } = clone;

// 泛型接口
interface GenericFn{
    <T>(arg:T):T
}

interface GenericFn2<T>{
    (arg:T):T
}



let f3: GenericFn = clone;
let f3: GenericFn2<string> = clone;

复制代码

泛型类

class Queue<T> {
  private data: T[] = [];
  push = (item: T) => this.data.push(item);
  pop = (): T | undefined => this.data.shift();
}

// 简单的使用
const queue = new Queue<number>();
queue.push(0);
queue.push("1"); // Err: 接受的始类型应为 number
复制代码

泛型约束

• extends 关键字

interface ILength {
    length: number;
}

function logger<T extends ILength>(n: T) {
    return n.length;
}
复制代码

• 约束类型参数

function getProp<T, K extends keyof T>(obj: T, prop: K) {
    return obj[prop];
}

let o = {
    name: "aaa",
    age: 111,
}

getProp(o,"name");
getProp(o,"age");
getProp(o,"b"); // Err 对象 "o" 上不存在属性 "b"
复制代码

• 使用类类型

function createInstance<T>(Ctor: { new(): T }):T {
    return new Ctor;
}
复制代码

枚举

数字枚举

• 默认从 0 开始递增

enum Direction {
  Up,    // 0
  Right, // 1
  Down,  // 2
  Left   // 3
}
复制代码

• 自定义递增初始值

enum ServerCode {
  BadRequest = 400,   // 400
  NoAuth,             // 401
  BanAccess = 403,    // 403
  NotFound,           // 404
  ServerError = 500   // 500
}
复制代码

字符串枚举

enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT",
}
复制代码

异构枚举

混入数字和字符串成员的枚举

enum BooleanLikeHeterogeneousEnum {
    No = 0,
    Yes = "YES",
}
复制代码

运行时枚举

枚举是运行时真正存在的对象

enum E {
    X,
    Y,
    Z
}

function f(obj: { X: number }) {
    return obj.X;
}

f(E)
复制代码

编译时枚举

enum LogLevel {
    ERROR,
    WARN,
    INFO,
    DEBUG
}

type LogLevelStrings = keyof typeof LogLevel;

let status: LogLevelStrings = "ERROR";
status="666"; // Err: "666" 不能赋值给 "ERROR" | "WARN" | "INFO" | "DEBUG"

复制代码

const 枚举

常量枚举不容许包含计算成员（只容许使用常量枚举表达式）

const enum Enum {
    A = 1,
    B = 2 * A, // ok 常量枚举表达式
    C = Math.random(), // Err: 计算成员
    D = (() => 1)() // Err: 计算成员 } 复制代码

外部枚举 ?

在正常的枚举里，没有初始化方法的成员被当成常量成员。 对于很是量的外部枚举而言，没有初始化方法时被当作须要通过计算的

declare enum Enum {
    A = 1,
    B,
    C = 2
}
复制代码

高级类型

交叉类型

同时拥有全部类型的所有成员

interface IA {
  name: string;
}

interface IB {
  age: number;
}

let d: IA & IB = {
  name: "",
  age: 1
};

复制代码

联合类型

只能是全部类型之一

function printSth(input: string | number) {
  return input;
}

printSth(1);
printSth("");

interface IC {
  name: string;
  c: number;
}
复制代码

若是值是联合类型，只能访问全部类型的公有部分

interface IC {
  name: string;
  c: number;
}

interface ID {
  name: string;
  d: string;
}

function f3(): IC | ID {
  return {
    name: "",
    c: 1
  };
}

let c3 = f3();
c3.name;
c3.d; // Err: 联合类型，只能访问全部类型里公有的部分

复制代码

类型守卫与类型区分

使用联合类型的值时，须要类型区分出明确的类型

• 用户定义类型守卫

  • 屡次使用类型断言 as

  let pet = getSmallPet();
  
  if ((pet as Fish).swim) {
      (pet as Fish).swim();
  } else if ((pet as Bird).fly) {
      (pet as Bird).fly();
  }
  
  复制代码

• 使用类型断定

  • 使用类型谓词 is

  function isFish(pet:Fish|Bird):pet is Fish {
      return (pet as Fish).swim!==void 0;
  }
  
  复制代码

  • 使用 in 操做符

  function move(pet:Fish|Bird) {
      if ("swim" in pet) {
          pet.swim();
      } else {
          pet.fly();
      }
  }
  复制代码

• typeof 类型守卫

function padLeft(m: string | number) {
    if (typeof m === "number") {
        return m + 1;
    } else {
        return m.trim();
    }
}
复制代码

• instanceof 类型守卫

function move2(pet: Fish | Bird) {
  if (pet instanceof Fish) {
    return pet.swim();
  } else {
    return pet.fly();
  }
}
复制代码

能够为 null 的类型

默认状况下，null 和 undefined 能够赋值给任何类型，开启 "--strictNullChecks" 标记解决此错误

• 可选参数和可选属性

使用了 "--strictNullChecks" 标记，可选参数会被自动加上 "|undefined"

interface IA{
    // name:string|undefined
    name?:string;
    age:number
}
复制代码

• 类型守卫和类型断言

因为使用联合类型，可能会包含 null 类型，你须要使用类型守卫去除它

• 显示判断

function f1(s:string|null){
    if (s===null) return;
    return s+"haha";
}
复制代码

• 短路运算符

function f1(s:string|null){
    let char=s||"";
    return s+"haha";
}
复制代码

• 添加语法后缀 !，去除 null 和 undefined

编辑器没法去除嵌套函数的 null 和 undefined，因此须要添加语法后缀 !，来去除 null 和 undefined

function f11(s: string | null) {
  s = s || "";
  function f12() {
    return s!.toString();
  }
  return f12();
}
复制代码

类型别名

// 基础类型
type NewString = string;
// 函数
type TypeOfFn = (arg: string) => string;
// 泛型
type GenericObj<T> = {
  value: T;
};
type Tree<T> = {
  value: string;
  left: Tree<T>;
  right: Tree<T>;
} | null;

复制代码

• 类型别名 vs 接口

  • 类型别名不可重复声明，而接口能够

  type A={
      name: string;
  };
  // Err: 标识 "A" 重复
  type A={
      age: string;
  };
  
  
  interface IA {
    name: string;
  }
  // ok
  interface IA {
    age: number;
  }
  
  let a: IA = {
    name: "",
    age: 1
  };
  
  复制代码

字符串字面量类型

type Easing = "ease-in" | "ease-out";
let status3: Easing = "ease-in";
status3="a"; // Err
复制代码

• 字符串字面量类型还能够用于区分函数重载

function createElement(tagName: "img"): HTMLImageElement;
function createElement(tagName: "input"): HTMLInputElement;
// ... more overloads ...
function createElement(tagName: string): Element {
  // ... code goes here ...
  if (tagName === "img") {
    return new Image();
  }
  if (tagName === "input") {
    return document.createElement("input");
  }
  return document.createElement("div");
}

createElement("input");
createElement("img");
复制代码

数字字面量类型

function sayCode(a: 1 | 2 | 3) {
  return a + 1;
}

sayCode(1);
sayCode(5); // Err
复制代码

索引类型

使用索引类型，能够检查动态属性名

keyof，为 索引类型查询操做符
T[K]，为 索引访问操做符

let o3 = {
  a: 1,
  b: "2",
  c: true
};

function f8<T, K extends keyof T>(obj: T, prop: K): T[K] {
  return obj[prop];
}

f8(o3, "b");
f8(o3, "a");
f8(o3, "d"); // Err: 不存在属性 "d"
复制代码

• 索引类型和字符串签名

  • 若是你有一个带有字符串签名的类型 T ，那么 keyof T 的结果会是 number|string，由于 js 中，object[1] 和 object["1"] 均可以访问属性

  interface Dictionary {
      [key: string]: any;
  }
  
  let keys: keyof Dictionary; // keys:string | number
  复制代码

  • 若是是数字签名的话， 那么 keyof T 的结果会是 number

  interface Dictionary {
      [key: number]: any;
  }
  let keys: keyof Dictionary; // keys:number
  复制代码

映射类型

• 映射类型

type Readonly<U> = {
  readonly [T in keyof U]: U[T];
};
type Partial<U> = {
  [T in keyof U]?: U[T];
};

type ReadonlyPerson = Readonly<IPerson>;
type PartialPerson = Partial<IPerson>;
复制代码

• 映射成员 (使用交叉类型)

// 这样使用 使用交叉类型
type PartialWithNewMember<T> = {
  [P in keyof T]?: T[P];
} & { newMember: boolean };

// 不要这样使用这会报错！
type PartialWithNewMember<T> = {
   [P in keyof T]?: T[P];
   newMember: boolean;
}
复制代码

• 有条件类型
  T extends U ? X : Y 翻译： 若是 T 能赋值给 U，那么类型是 X，不然是 Y

使用工具类型

Partial 将 T 类型的属性变为可选属性

type Partial<T>={
    [P in keyof T]?:T[P]
}

复制代码

Required 将 T 类型的属性变为必选属性

type Required<T>={
    // "-?" 表明去除可选 对应的还有 "+?" ，做用与 "-?" 相反，是把属性变为可选项
    [P in keyof T]-?:T[P]
}
复制代码

Readonly 将 T 类型的属性变为只读属性

type Readonly<T>={
    readonly [P in keyof T]:T[P]
}
复制代码

Record<K,T> 将 K 类型的属性映射到 T 类型上

type Record<K extends keyof any,T>={
    [P in K]:T
}
复制代码

Exclude<T,U> 将 T 类型上的 U 类型的属性剔除 （求差集？）

type Exclude<T,U>=T extends U?never:T;
复制代码

Extract<T,U> 提取 T 类型上的 U 类型属性，做为一个新的类型 （求交集？）

type Extract<T,U>=T extends U?T:never;
复制代码

Pick<T,K> 从 T 类型中挑选 K 类型属性

type Pick<T,K extends keyof T>={
    [P in K]:T[P]
}
复制代码

Omit<T,K> 从 T 类型中剔除 K 类型的属性

type Omit<T,K extends keyof any>=Pick<T,Exclude<keyof T,K>>
复制代码

NonNullable 从 T 类型中剔除 null 和 undefined 类型

type NonNullable<T>=T extends null|undefined? never: T;
复制代码

ReturnType 返回函数类型 T 的返回值类型

type ReturnType<T extends (...args:any)=>any>=T extends (...args:any)=> infer R ? R : any;
复制代码

InstanceType 返回构造函数类型 T 的实例类型

type InstanceType<T extends new (...args:any):any> = T extends new (...args:any):infer R ? R : any;
复制代码

ThisType 做为上下文 this 类型的一个标记，须要开启 "--noImplictThis"

interface ThisType<T>{
    
}
复制代码

模块和命名空间

模块 （外部模块）

ts 沿用 es6 的模块概念

• 导出

StringValidator.ts

export interface StringValidator {
    isSafe:boolena;
}
复制代码

• 导入

test.ts

import { StringValidator } from "./StringValidator";

class Validator implements StringValidator {
   isSafe:boolean = true; 
}

复制代码

• 默认导出

StringValidator.ts

export default {
    version: "1.1.1"
}
复制代码

• 导入其余 js 库 (要想描述非 TypeScript 编写的类库的类型，咱们须要声明类库所暴露出的 API )

  • 外部模块

  utils.d.ts

  declare module "url" {
      export function parse() {
          // ...
      }
  }
  
  复制代码

  test.ts

  /// <reference path="utils.d.ts" />
  import { parse } from "url";
  
  复制代码

  • 外部模块简写

  简写模块里全部导出的类型将是 any

  utils.d.ts

  declare module "url";
  
  复制代码

  test.ts

  /// <reference path="utils.d.ts" />
  import { parse } from "url";
  // parse:any
  复制代码

  • 模块声明通配符

  global.d.ts

  declare module "*.json";
  复制代码

命名空间 (内部模块)

• 命名空间

namespace Validation {
    export interface StringValidator {
        isSafe:boolena;
    }

    export class Validator implements StringValidator {
       isSafe:boolean = true; 
    }
}

复制代码

• 分割到多个文件

Validation.ts

namespace Validation {
    export interface StringValidator {
        isSafe:boolena;
    }
}

复制代码

KlassValidation.ts

/// <reference path="Validation.ts" />
namespace Validation {
    export class Validator implements StringValidator {
       isSafe:boolean = true; 
    }
}

复制代码

• 别名

namespace Validation {
    export interface StringValidator {
        isSafe:boolena;
    }
}


import SV = Validation.StringValidator;

复制代码

• 使用其余的 js 库

为了描述不是用 TypeScript 编写的类库的类型，咱们须要声明类库导出的API。 因为大部分程序库只提供少数的顶级对象，命名空间是用来表示它们的一个好办法。
咱们称其为声明是由于它不是外部程序的具体实现。 咱们一般在 .d.ts 里写这些声明

D3.d.ts

declare namespace D3 {
  export interface Selectors {
    select: {
      (selector: string): Selection;
      (element: EventTarget): Selection;
    };
  }

  export interface Event {
    x: number;
    y: number;
  }

  export interface Base extends Selectors {
    event: Event;
  }
}

declare var d3: D3.Base;
复制代码