关于typescript:深入浅出-Typescript-读书笔记

3次阅读

共计 2892 个字符，预计需要花费 8 分钟才能阅读完成。

最近开始在我的项目中真正应用 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 容许咱们笼罩原有的类型推导。

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

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

可选属性

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`

容许额定属性

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|string
var reversed = reverse(sample);
console.log(reversed); // 3,2,1”

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

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

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

设置一个通用的数据返回的 interface：ResponseData

export interface ResponseData<T = any> {
  // 状态码
    code: number;
  // 传入 T 确定返回数据的类型
  result: T;
  // 音讯
  message: string;
}

在 API 应用层对具体的返回数据类型进行类型注解：getUserResp
调用函数时传入 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 是 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;
// }

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'; // okay
color = 'blue'; // okay
color = 'anythingElse'; // Error: Type '"anythingElse"' is not assignable to type '"red" | "blue"”

正文完