Typescript 学习 —— 函数重载, 泛型, 类型守卫, 抽象类

type Student = {};

function getStudent(studentId: string | string[]): Student | Student[] {
  // 函数方法实现
}

// aStudent → Student | Student[]
const aStudent = getStudent('1');

// students → Student | Student[]
const students = getStudent(['1', '2']);

type Student = {};

// 声明单个查询学生的类型
function getStudent(studentId: string): Student; 

// 声明批量查询学生的类型
function getStudent(studentId: string[]): Student[]; 

// 此时再声明函数的类型便可以触发 Typescript 的函数重载机制
function getStudent(studentId: string | string[]): Student | Student[] {
  // 函数方法实现
}

// aStudent → Student
const aStudent = getStudent('1');

// students → Student[]
const students = getStudent(['1', '2']);

type VueConf = { id: number };
type ReactConf = { key: string };

// 既能约束入参，也能约束出参
function createConfig<T>(config: T): T {
  return config;
}

// vueConf → { id: number }
const vueConf = createConfig<VueConf>({ id: 1 });

// reactConf → { key: string }
const reactConf = createConfig<ReactConf>({ key: 'a' });

import axios from 'axios';

// 请求参数的结构
interface RequestConfig<P> {
  /** 请求地址 */
  url: string;
  /** 请求方式 */
  method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
  /** 请求数据 */
  data: P;
}

// 返回参数的结构
interface AxiosResponse<T> {
  /** 响应状态 */
  code: number;
  /** 响应状态信息 */
  message?: string;
  /** 响应数据 */
  data: T;
}

const $axios = axios.create({ baseURL: 'https://demo.com' });

// 声明了两个泛型类型T和P
// T - 返回参数的泛型，默认值为 void，在无返回参数的时候不需要传类型声明
// P - 请求参数的泛型，默认值为 void，在无请求参数的时候不需要传类型声明
// 泛型支持嵌套，如 Promise<AxiosResponse<T>> 即表示 AxiosResponse<T> 的返回值在 Promise 中
async function createRequest<T = void, P = void>(
  conf: RequestConfig<P>
): Promise<AxiosResponse<T>> {
  try {
    // 假设 data 中是预想中的返回参数
    const { code, data: response } = await $axios({
      url: conf.url,
      data: conf.data || {},
      method: conf.method || 'GET',
    });

    // 正常响应
    if (code === 200) {
      return Promise.resolve(response);
    }

    // 错误响应
    return Promise.reject(response);
  } catch (e) {
    // 错误响应
    return Promise.reject(e);
  }
}

// 无参数时使用，无需约束泛型
await createRequest({ url: 'api/connect' });

/** 请求类型 */
interface RequestInterface {
  /** 对应天气的日期 */
  date: string;
}

/** 响应类型 */
interface ResponseInterface {
  /** 对应日期的天气 */
  weather: string;
}

// 有参数时使用，通过泛型约束提升代码质量
const { weather } = await createRequest<RequestInterface, ResponseInterface>({
  url: 'api/weather',
  data: { date: '2021-02-31' },
});

type Student = { id: string };

// 声明单个查询学生的类型
function getStudent(studentId: string): Student;

// 声明批量查询学生的类型
function getStudent(studentId: string[]): Student[];

// 查询学生信息，支持批量查询
function getStudent(studentId: string | string[]): Student | Student[] {
  if (Array.isArray(studentId)) {
    // 批量查询学生信息的逻辑
    return [{ id: '1' }, { id: '2' }];
  }

  // 单个查询学生信息的逻辑
  return { id: '1' };
}

// 判断是否为字符串
function isString<T>(data: T): data is string {
  // 返回值为 true 时会触发 Typescript 的类型谓词函数判断
  return typeof data === 'string';
}

// 判断是否为数字
function isNumber<T>(data: T): data is number {
  return typeof data === 'number';
}

class Student {
  // 标示是否为学生类
  public type = 'student';
}

// 自定义类型判断
function isStudent<T>(data: T): data is Student {
  return data.type === 'student';
}