TS Interface

优化错误提示

interface IOptions {name: stringage: numberextra: {data: Objectmethods: 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: peteraqe: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: stringlastName?: 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

TS Interface相关推荐

TS Interface（接口）
接口(Interface) 用来建立某种代码约定,使得其它开发者在调用某个方法或者创建新的类时,必须遵循接口所定义的代码约定接口的前面加了一个 I 字母规范在代码设计中,接口是一种规范: 接口通 ...
typescript 接口 interface 的理解
在学习typescript的时候,经常发现别人写了好多接口(interface),那问题来了,我们自己写代码,应该在什么情况下写接口才比较合适呢.于是我就找了找资料,整理一下. 接口运行时的影响为 0 ...
ts自动编译声明文件_TS 的声明文件
打算为你的团队写一个封装好的工具?TS的声明文件是必不可少的,它不仅仅让你的工具支持TS,更是负责充当一个说明书的作用,让人对其的使用一目了然. 什么是声明语句?什么时候需要他? 假如我们想使用第三方 ...
基于vue3+ts+scss的后台管理系统(一)
创建项目 vite创建项目注意:vite需要Node.js版本>=12.0.0 安装方式(不使用模板): #使用 NPM: npm init vite@latest #yarn [推荐] ya ...
TS在vue中的应用
TIP typescript 配合 Vue3 composition-api 使用 TypeScript 与组合式 API | Vue.js script 加上 lang="ts" ...
vite+ts+vue3 知识点（全局组件，局部组件，递归组件）
全局组件 Global.vue 文件 <template><div>全局组件</div> </template><script setup lan ...
vue3.2的TS写法
一.父传子的TS写法(defineProps) 父组件 <template><DefinePropsRuntime title="我是标题" :list=&quo ...
「1.8W字」2020不可多得的 TS 学习指南
阿宝哥第一次使用 TypeScript 是在 Angular 2.x 项目中,那时候 TypeScript 还没有进入大众的视野.而现在学习 TypeScript 的小伙伴越来越多了,本文阿宝哥将从 ...
硬干货！1.8W字TS 学习指南，我不信你一口气能读完（建议收藏）
阿宝哥第一次使用 TypeScript 是在 Angular 2.x 项目中,那时候 TypeScript 还没有进入大众的视野.而现在学习 TypeScript 的小伙伴越来越多了,本文阿宝哥将从 ...

TS Interface

优化错误提示

方式一

方式二

方式三

TS Interface相关推荐

最新文章

热门文章