TS Interface

优化错误提示

interface IOptions {
    name: string
    age: number
    extra: {
        data: Object
        methods: Object
    }
}

// 参数options要求符合IOptions定义的规则
function sthConstructor (options: IOptions) {}

// options对象当中并没有任何ts的静态检查和提示
const options = {
    name: 'peter',
    age: '13', // error: age应该为数字
    extra: {
        data: [],
        methods: {}
    }
}
// options飘红报错，然而提示内容废话太多，关键信息藏得太深
sthConstructor(options)

方式一

// 将options里面的东西挪进函数当中
sthConstructor({
  name: peter
  aqe:13,//age应该为数字
  extra: {
    data:[],
    methods:{}
  }
})

方式二

// 将options用IObject定义
const options:IObject = {
    name: 'peter',
    age: '13', // error: age应该为数字
    extra: {
        data: [],
        methods: {}
    }
}

方式三

// 提供一个helper方法
function helper(options:IOptions){
  return options;
}

const options = helper({
    name: 'peter',
    age: '13', // error: age应该为数字
    extra: {
        data: [],
        methods: {}
    }
})

type IUserInfoFunc = (user: IUser) =>string;

interface IUser {
    name: string;
    age: number;
}

const getUserInfo: IUserInfoFunc = (user) => {
    return`name: ${user.name}, age: ${user.age}`;
};

interface IPriceData {
  /** 标识 */
  cbf: string
  /** id */
  id: string
  /** 市场价格 */
  m: string
  /** 后台价 */
  op: string
  /** 前台价 */
  p: string
}

// 将IPriceData塞进数组里
type IPriceDataArray = Array<IPriceData>

getPrice() {
    // Promise的泛型参数使用了IPriceDataArray类型，then里面返回的数据就是IPriceDataArray类型
    return new Promise<IPriceDataArray>((resolve, reject) => {
        $.get('<https://xxxxxxx/prices/pgets?ids=P_100012&area=&source=>', data => { resolve(data) })
    })
}

	// 错误写法
  const fullName = (user: any) => {
    if (user?.firstName && user?.lastName) {
      return `${user.lastName}, ${user.firstName}`
    }
    return user?.firstName || ""
  }

  // 正确写法
  interface User {
    firstName: string
    lastName?: string
  }
  const fullName = ({ firstName, lastName }: User) => {
    if (lastName === undefined) {
      return firstName
    }
    return `${lastName}, ${firstName}`;
  }

// TypeScript 为此提供了一组实用功能。
// 我们可以 Pick 习惯从先前定义的类型中选择所需的属性。
// Omit 得到除少数几个以外的所有东西。
// Partial 使所有属性都是可选的，或进行完整的180并使其全部Requireds 

 type User = {
    id: number;
    firstName: string;
    lastName: string;
    age: number;
  }
  
  type UserParams = Pick<User, "id"> & Partial<Omit<User, "id">>
  
  const updateUser = (
    { id, ...newUserParams }: UserParams
  ) => {
    {...}
  }

// node使用中方便验证

  // -- 查询列表时候使用的接口
  interface IQuery {
    page: number;
    rows: number;
    disabledPage?: boolean; // 是否禁用分页，true将会忽略`page`和`rows`参数
  }

  // - 商品
  export interface IGoodsQuery extends IQuery {
    isOnline?: string | number; // 是否出售中的商品
    goodsNo?: string; // 商品编号
    goodsName?: string; // 商品名称
  }

// 示例

  import Good from'../model/good';

  // 定义基本查询类型
  // -- 查询列表时候使用的接口
  interface Query {
      page: number;
      rows: number;
      disabledPage?: boolean; // 是否禁用分页，true将会忽略`page`和`rows`参数
    }

  // 定义基本返回类型
  type GoodResult<Entity> = {
      list: Entity[];
      total: number;
      [propName: string]: any;
  };

  // - 商品
  export interface GoodsQuery extends Query {
      isOnline?: string | number; // 是否出售中的商品
      goodsNo?: string; // 商品编号
      goodsName?: string; // 商品名称
  }
  export type GoodResult = QueryResult<Good>;

 Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.https://serious-lose.notion.site/TS-Interface-5d6c9c50b6394b0591303d29e27a84b0