最近开始在我的项目中真正应用 typescript 了，为了补救知识点上的有余，我浏览了「深刻了解 typescript」，上面是我记录的笔记，在此跟大家分享我感觉对于老手比拟重要的一些点。

变量申明和类型申明

TS 的变量申明是申明一个变量，比方 const/let/class，其中 class 同时也可用于类型申明。

应用类实现接口

应用 implements 关键字能够让接口限度类外部的类型：

interface Point {    x: number;    y: number;    z: number; // New member}class MyPoint implements Point { // ERROR : missing member `z`    x: number;    y: number;}

应用箭头函数做类型注解

能够应用箭头函数做类型注解，所以可能会呈现有两个箭头的函数，第一个箭头是类型注解，第二个箭头是函数体自身。

// 一般函数const simple = function(foo: number): string {return foo.toString()};// 箭头函数const simple: (foo: number) => string = (foo) => foo.toString();

类型断言 as

类型断言 as 容许咱们笼罩原有的类型推导。

function handler (event: Event) {    let mouseEvent = event as MouseEvent;}

对象的属性

Freshness 是针对对象字面量的更为严格的查看，它应用对象字面量作为类型注解，提供了两个性能：

  1. 可选属性
var x: { foo: number };x = { foo: 1, baz: 2 };  // Error, excess property `baz`var y: { foo: number, bar?: number };y = { foo: 1, baz: 2 };  // Error, excess or misspelled property `baz`
  1. 容许额定属性
var x: { foo: number, [x: string]: any };x = {foo: 1, bar: 2}; // it works

泛型到底是什么？

泛型的作用是在外部成员之间提供一些束缚，能够作用的成员是：

  • 类的实例
  • 类的办法
  • 函数的参数
  • 函数的返回值
class Queue<T> {  private data = [];  push(item: T) { this.data.push(item); }  pop(): T | undefined { return this.data.shift(); }}// 在这里应用泛型，能够使得这个 queue 实例只承受 number 类型的元素const queue = new Queue<number>();queue.push(0);queue.push("1"); 
function reverse<T>(items: T[]): T[] {    var toreturn = [];    for (let i = items.length - 1; i >= 0; i--) {        toreturn.push(items[i]);    }    return toreturn;}var sample = [1, '2', 3];//在调用函数的时候，typescript 会依据传入的参数类型主动确定T的类型，在这里是 number|stringvar reversed = reverse(sample);console.log(reversed); // 3,2,1”

如果你的泛型只在一个中央应用到，那么相当于没有进行束缚，这个时候并不平安，比方：

declare function parse<T>(name: string): T;//相当于declare function parse(name: string): any;

当咱们把 API 层形象进去时，能够应用嵌套的泛型来帮忙咱们进行类型推导：

  1. 设置一个通用的数据返回的 interface：ResponseData
export interface ResponseData<T = any> {  // 状态码    code: number;  // 传入T确定返回数据的类型  result: T;  // 音讯  message: string;}
  1. 在 API 应用层对具体的返回数据类型进行类型注解：getUserResp
  2. 调用函数时传入 getUserResp 到 ResponseData
import api from './axios';interface getUserResp {  name: string;  age: number;}export function getUser() {    return api.get<ResponseData<getUserResp>>('/api/v1/user').then(res => console.log(res.data))}

Never 是什么？

Never 是 ts 的一种底层类型，乍一看跟 void 很像，然而它更多的用来示意在函数 never return something，比方有死循环、或者throw error 了。而且，never 类型仅能被赋值给另一个 never 类型。

function fail(msg: string): never {    throw new Error(msg)}

索引签名

索引签名是 typescript 对于对象的索引（和值）即进行束缚的一个形式，它束缚对象的索引必须是 number 或者 string。

interface foo {  // 束缚所有 key 必须是 string，  [x: string]: number;  x: number;  y: number}type Index = 'a' | 'b' | 'c';interface foo1 {  [x in Index]?: string;}// foo1 是// type FromIndex = {//   a?: number;//   b?: number;//   c?: number;// }

Typeof

Typescript 里的 typeof 跟 JavaScript 里的有一些不同，对于一个类或者对象，它的后果是输入它的属性。对于字符串和数字，则会因为应用 let 或者 const 而失去不同的后果。

const foo2 = 'Hello World'// let foo2 = 'Hello World' 就能够使得 bar 的类型是 string// bar 的类型是 'Hello World'let bar: typeof foo2;// bar can only ever be assigned to `Hello World`bar = "Hello World"; // Okay!bar = "anything else "; // Error!”

typeof 还能够与 keyof 搭配用于获取对象的键

const colors = {  red: 'reddish',  blue: 'bluish'}type Colors = keyof typeof colors;let color: Colors; // same as let color: "red" | "blue"color = 'red'; // okaycolor = 'blue'; // okaycolor = 'anythingElse'; // Error: Type '"anythingElse"' is not assignable to type '"red" | "blue"”