文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

代码质量第4层——健壮的代码！

健壮性(Robustness) 是指程序在遇到规范以外的输入，错误和异常时，仍能正常运行。简单来说，健壮代码的适应性很强，不会因为一些异常，就导致程序崩溃。...不健壮的前端代码体现为： 接口返回异常或报错时，页面白屏。 用户做一些非常规操作时，页面白屏。 一、如何写出健壮的前端代码 要写出健壮的前端代码，就要处理规范以外的输入，错误和异常。...可以在Axios接口返回的拦截器中，加入接口报错的通用处理。...这里的输入包括：接口的返回结果，函数的参数，组件的属性等。 接口返回格式检查 接口的返回会出现和前端预期不一致的情况。原因可能是： 接口的返回结果变更，但未通知前端。...as string) + parseFloat(b as string)} 组件属性检查 对组件的属性检查和函数参数检查类似，就不做赘述了。

70420
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    代码质量第 4 层 - 健壮的代码

    健壮性(Robustness) 是指程序在遇到规范以外的输入，错误和异常时，仍能正常运行。简单来说，健壮代码的适应性很强，不会因为一些异常，就导致程序崩溃。...不健壮的前端代码体现为： 接口返回异常或报错时，页面白屏。 用户做一些非常规操作时，页面白屏。 如何写出健壮的前端代码 要写出健壮的前端代码，就要处理规范以外的输入，错误和异常。...可以在 Axios 接口返回的拦截器中，加入接口报错的通用处理。...这里的输入包括：接口的返回结果，函数的参数，组件的属性等。 接口返回格式检查 接口的返回会出现和前端预期不一致的情况。原因可能是： 接口的返回结果变更，但未通知前端。...as string) + parseFloat(b as string) } 组件属性检查 对组件的属性检查和函数参数检查类似，就不做赘述了。

    1.3K40

    代码质量第 4 层 - 健壮的代码

    3金伟强.jpg 健壮性(Robustness) 是指程序在遇到规范以外的输入，错误和异常时，仍能正常运行。简单来说，健壮代码的适应性很强，不会因为一些异常，就导致程序崩溃。...不健壮的前端代码体现为： 接口返回异常或报错时，页面白屏。 用户做一些非常规操作时，页面白屏。 如何写出健壮的前端代码 ---- 要写出健壮的前端代码，就要处理规范以外的输入，错误和异常。...可以在 Axios 接口返回的拦截器中，加入接口报错的通用处理。...这里的输入包括：接口的返回结果，函数的参数，组件的属性等。 接口返回格式检查 接口的返回会出现和前端预期不一致的情况。原因可能是： 接口的返回结果变更，但未通知前端。...as string) + parseFloat(b as string) } 组件属性检查 对组件的属性检查和函数参数检查类似，就不做赘述了。

    1.1K50

    从0到1教你搭建前端团队的组件系统（高级进阶必备）

    仓库，把代码copy下来改成自己的组件库脚手架，当然，这也不是随便就能改好的，如果想尝试这种方案，建议大家先学好typescript和webpack。...我们可以把功能或者需求类似的有机体封装成一个业务组件，并对外暴露接口来实现灵活的可定制性，这样的话我们就可以再不同页面不同子系统中复用同样的逻辑和功能了。...它的特点主要有： 基于 docz 的文档功能 基于 rollup 和 babel 的组件打包功能 支持 TypeScript 支持 cjs、esm 和 umd 三种格式的打包 esm 支持生成 mjs，...如果对docz不太了解的可以在docz官网学习使用非常简单,只要你对markdown和react熟悉，分分钟入门。...初始化father项目时会自动生成一个默认配置，但是大多数情况下我们都需要自定义配置，官网的配置参数也很多，可以找到适合自己团队的配置，这里我主要介绍xui组件库的配置细节。

    5.2K93

    TypeScript 常用知识总结

    一、定义 TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。 TypeScript 由微软开发的自由和开源的编程语言。...这意味着声明为 never 类型的变量只能被 never 类型所赋值，在函数中它通常表现为抛出异常或无法执行到终止点（例如无限循环） 变量不要使用 name 否则会与 DOM 中的全局 window 对象下的...name 属性出现了重名 类继承使用关键字 extends，子类除了不能继承父类的私有成员(方法和属性)和构造函数，其他的都可以继承。...类描述了所创建的对象共同的属性和方法。 TypeScript 支持面向对象的所有特性，比如 类、接口等。...private : 私有，只能被其定义所在的类访问。 类可以实现接口，使用关键字 implements，并将 interest 字段作为类的属性使用。

    1.8K30

    分享 30 道 TypeScript 相关面的面试题

    03、在什么场景下你会使用自定义类型，它们在 TypeScript 中是如何定义的？ 答案：当我们有复杂的结构或重复的模式时，使用 type 关键字或接口定义的自定义类型是有益的。...17、如何将 TypeScript 与 React 这样的框架集成？ 答：要将 TypeScript 与 React 集成，可以使用 .tsx（TypeScript 与 JSX）文件。...对于组件属性和状态，可以定义 TypeScript 接口或类型。 React.FC 泛型类型通常用于定义功能组件的类型，为 props、默认 props 和其他 React 特定功能提供强类型。...常见用途包括使用 Partial 使接口的所有属性可选，或使用 Readonly 使它们只读。 23、您将如何在 TypeScript 中创建和使用 mixin？...此功能对于接口非常强大：如果多次定义一个接口，TypeScript 会将其视为具有组合成员的单个接口。这在扩展现有类型或使用模块化代码时非常有用。

    1K30

    让你的TypeScript代码更优雅，这10个特性你需要了解下

    Person 接口中 name 属性的类型，即 string。...以下是一个示例，展示了如何将类型的所有属性设为只读： type ReadOnly = { readonly [P in keyof T]: T[P]; }; 在这个例子中，ReadOnly...1、区分联合类型的基本用法 区分联合类型的关键在于为每个类型定义一个共同的属性，这个属性可以用来区分不同的类型。...这一特性非常适合增强现有类型，例如为已有接口添加新属性或合并同一模块的多个声明。通过声明合并，你可以更灵活地扩展和维护代码。下面我们通过具体的例子来详细介绍声明合并的用法。...: string; } TypeScript 会将这两个接口合并为一个，包含所有定义的属性： const user: User = { id: 1, name: "John Doe"

    27010

    第三十二期：对TypeScript的简单理解

    TypeScript 虽然从早几年TypeScript的热度已经非常高了，但是实际上除了大厂里某些项目是真正的用TS进行开发以外，其他的也还是我们现在写的es6语法居多，当然了，大厂里项目其实用TS开发的项目其实也不多...很多人在学习TypeScript的时候，或者看到比较复杂的TypeScript代码会觉看不明白，不明白为什么要那样写。...上面的代码是从Vuex的源码中的类型定义的文件里复制的，它定义了一个名叫Store的类，构造函数的参数options是一个StoreOptions的类，它有两个只读属性state和getters，dispatch...属性是Dispatch类，commit需要符合Commit的格式。...当然，真正能够灵活运用需要我们对它的基本概念有个深刻的理解，比如类，接口，泛型等等，这些需要我们自己去体会，去理解。

    37820

    这 5 个 TypeScript 的功能特征，你需要熟悉下

    我们将创建一个名为 Vehicles 的枚举并将其用作属性值。...它们是一种避免反复定义接口的方法。你可以将类型建立在另一种类型或接口的基础上，从而节省手动工作。 “当你不想重复时，有时一种类型需要基于另一种类型。...映射类型建立在索引签名的语法之上，用于声明尚未提前声明的属性类型。” — TypeScript 的文档 总而言之，映射类型允许我们基于现有类型创建新类型。...假设我们要将名为 Teacher 的实体的所有属性转换为只读。我们可以使用什么实用程序？ 我们可以使用 Readonly 实用程序类型。...让我们看另一个使用自定义接口的类型保护示例： interface Hunter { hunt: () => void; } // function type guard function isHunter

    1.3K40

    深度讲解TS：这样学TS，迟早进大厂【08】：对象的类型—接口

    TS系列地址： 21篇文章带你玩转ts # 对象的类型——接口 在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型。...TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。...age: 25 }; 上面的例子中，我们定义了一个接口 Person，接着定义了一个变量 tom，它的类型是 Person。...定义的变量比接口少了一些属性是不允许的： interface Person { name: string; age: number; } let tom: Person = {...一个接口中只能定义一个任意属性。如果接口中有多个类型的属性，则可以在任意属性中使用联合类型： interface Person { name: string; age?

    91610

    Typescript 严格模式有多严格？

    版的一大麻烦，需要专门定义第三方库接口类型 3.noImplicitThis 此规则不允许this上下文隐式定义。...() { return this.label.toUpperCase() } } 更好的方法是编写接口，定义所有类型，而不是Typescript来推断： // Typescript严格模式...5.strictPropertyInitialization 此规则将验证构造函数内部初始化前后已定义的属性。 必须要确保每个实例的属性都有初始值，可以在构造函数里或者属性定义时赋值。...int≦float：也就是说int是float的子类型。 这一更严格的检查应用于除方法或构造函数声明以外的所有函数类型。...方法被专门排除在外是为了确保带泛型的类和接口（如 Array ）总体上仍然保持协变。

    3.1K20

    TypeScript必知三部曲（二）JSX的编译与类型检查

    目前为止也没有任何一家浏览器的引擎实现了对JSX的读取和解析。此外，JSX本身没有完全统一的规范，除了一些基本的规则以外，各种利用了JSX的JS库可以根据自身需求来设计JSX额外的特性。...默认情况下，如果未指定此接口，则在TypeScript进行类型检查的时候，会直接忽略这些类型JSX标签具体的类型定义，任何JSX都不会对内部元素进行类型检查。...但是，如果存在此接口定义，则内部元素的名称将作为接口上的属性进行查找。...举一个简单的例子，我们可以尝试修改上图中react的dts代码，添加一个新的接口字段abc，该字段还有一个必填的name属性： interface IntrinsicElements {...在前言中，我们已经解释了如何将JSX编译为react、react/runtime的相关调用。那么，我们可以自定义处理JSX代码吗？

    61110

    Typescript 严格模式有多严格？

    版的一大麻烦，需要专门定义第三方库接口类型 3.noImplicitThis 此规则不允许this上下文隐式定义。...() { return this.label.toUpperCase() } } 更好的方法是编写接口，定义所有类型，而不是Typescript来推断： // Typescript严格模式...5.strictPropertyInitialization 此规则将验证构造函数内部初始化前后已定义的属性。 必须要确保每个实例的属性都有初始值，可以在构造函数里或者属性定义时赋值。...int≦float：也就是说int是float的子类型。 这一更严格的检查应用于除方法或构造函数声明以外的所有函数类型。...方法被专门排除在外是为了确保带泛型的类和接口（如 Array ）总体上仍然保持协变。

    2.1K40

    以淘宝店铺为例，谈谈 TypeScript ESLint 规则集考量

    no-empty-interface 不允许定义空的接口，可配置为允许单继承下的空接口： // x interface Foo {} // √ interface Foo extends Bar {}...，TypeScript 的控制流分析能很好地做到这一点，而对于函数参数与类属性，主要是为了确保一致性，即函数的所有参数（包括重载的各个声明）、类的所有属性都有类型标注，而不是仅为没有初始值的参数/属性进行标注...为什么：首先，这两种方式被称为 method 与 property 很明显是因为其对应的写法，method 方式类似于在 Class 中定义方法，而 property 则是就像定义普通的接口属性，只不过它的值是函数类型...推荐使用 property 的最重要原因是，通过使用 属性 + 函数值 的方式定义，作为值的函数的类型能享受到更严格的类型校验（ `strictFunctionTypes`[4]），此配置会使用逆变（contravariance...值导入与类型导入在 TypeScript 中使用不同的堆空间来存放，因此无须担心循环依赖（所以你可以父组件导入子组件，子组件导入定义在父组件中的类型这样）。

    2.7K30

    前端监控系统之异常情况

    前端异常的几种情况 JS编译时异常, 比如使用了一个并没有提供的属性/方法 运行时异常, 比如在需要判空的地方没有判空 加载前端资源的时候报错, 跨域, 服务器资源异常, CDN错误, 路径不正确等 接口请求时异常..., SSR另当别论) 编译时错误的表现为, 代码提示信息错误....运行时异常的表现为, 进行交互的时候页面会出错, 这里的出错指的是只要没有达到用户的预期效果, 都成为出错, 不限于在console输出error, 或者页面空白等....所以影响的程度排名这里定位: 资源类异常>编译时错误>运行时异常>接口异常 解决思路 对于编译时异常, 我们可以使用TypeScript来进行解决, 使用TypeScript你可以知道哪些API是系统提供的...接口的 error 事件，并执行window.onerror()。

    92120

    【TypeScript】超详细的笔记式教程【中】

    数组 基本定义 在TypeScript中，数组的定义如下： let fibonacci: number[] = [1,2,3,4,5] 上面的中，不允许出现除number以外的类型，比如： let fibonacci...函数 基本定义 TypeScript中函数的定义如下： function sum(x: number, y: number): number { return x + y } 函数表达式 let...，函数的参数都是必传的，不能少，也不能多，比如这样： 再比如，这样： 可选参数 与接口中的可选属性类似，用?...是number类型，是没有length属性的，所以TypeScript给了提示类型“number”上不存在属性“length”。...但是有时候我们的写法是完全没有问题的，比如： window.foo = 1 在js中，这种写法完全ok，给window添加属性foo，值为1，但是，在TypeScript中是不支持的，它会抛出这个错误类型

    1K20
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券