typescript 基础知识，试写一下-一一网

学习一个编程技术，掌握基础的知识（如果没有了解基本知识，可以看一下点我查看)，试着去写一写，可以加深理解，也许这也是一种不错的方式。在业务需求，技术方向确定后，我们通常要经历3个阶段：

构架设计：整个业务可以设计为几个部分（也就是对关键实体进行抽象），它们是如何进行联动
业务抽象：对业务模块的职责明确，有哪些抽象类，抽象方法，提供哪些插件机制，是一个复杂过程
细节实现：对抽象类，抽象方法的实现，一些变量，常量的定义

以上的3个阶段，基本上是从构架设计 -> 业务抽象 -> 细节实现, 开发过程中可能会来回穿插，不断的修正调整趋于相对稳定。架构设计方面，就不班门弄斧了，以免给人误导。我们侧重 typescript 的开发类型声明，我们从基本类型声明开始，然后组成一个业务模块。

为了使过程更加简单，结合业务，从javascrpte 基本数据类型到引用的数据类型

基本数据类型

布尔值，字符串，数字，是一些经常使用到的基本数据类型

// 账号
let account: string | number = "";

// 密码
let password: string = "";

// 手机号
let phone: number = 0;

// 是否记住密码
let keepPwd: boolean = false;
复制代码

引用数据类型

object 对象，数组是一些高频使用的引用数据类型

// 登录请求参数
interface LoginParam {
  // 账号：字符串 或者 数字
  account: string | number;
  // 密码
  password: string;
  // 是否记住密码
  keepPwd?: boolean;
}

// 登录返回参数
interface UserInfo {
  userId: number;
  name: string;
  nickName?: string;
  phone: number;
}

type Status = 0 | 1 | 2 | 3;

// 列表项
interface ListItem {
  readonly id: string;
  name: string;
  status: Status;
}

// 列表
type List = ListItem[];

// 分页
interface Pagination<T extends number | string = number> {
  // 当前页码
  current: T;
  pageSize: T;
  total: T;
}

// 后台接口列表返回数据
interface ResponseList {
  // 业务 code 码
  //  200 代表成功，其它失败
  code: number;
  // 成功 / 错误，后台返回的描述信息
  message: string;
  // 业务数据
  data: {
    list: List;
    pagination: Pagination;
  };
}

复制代码

fetch 调用后台的接口

在进行CURD 操作时，是通过调用后台接口实现，resful 接口有2个部分组成：

请求参数：req
响应数据：res

此时，你要用命令安装一下: npm i axios 或者 yarn add axios，这个库在安装时，已经把声明文件一并安装好了，可以把光标虚浮在 axios 上，用 command + 单击 查看定义


// 登录请求参数
const fetchLogin = (params: LoginParam) =>
  axios.post<UserInfo>("/login", params);

// 获取列表
const fetchList = (params: Pagination) => axios.post<UserInfo>("/list", params);

// 修改列表项
export interface ItemReq {
  id: number;
  name?: string;
  status?: string;
}

const fetchUpdate = (params: ItemReq) =>
  axios.post<UserInfo>("/update", params);

// 批量删除列表项
export type IdSetReq = number[];
const fetchDelete = (params: IdSetReq) =>
  axios.post<UserInfo>("/delete", params);

复制代码