服务粉丝

我们一直在努力
当前位置:首页 > 财经 >

类型编程原理和编写类型安全代码

日期: 来源:全栈修仙之路收集编辑:Qiuyi

证明即程序,结论公式即程序类型。
—— 柯里-霍华德对应[1]

背景

我们每天的编码都会使用到类型系统,本篇文章希望能够简单地介绍原理到实践,让读者能更好的使用类型系统编写出类型安全并简洁的代码。

本篇文章预期读者是拥有 TypeScript 基础的同学。

CodeShare - 安全的 any 互操作

众所周知,any 是一个危险的类型,可以关闭所有类型检查。但是实际的浏览器程序中不可能完全避免 any 类型进入类型系统,对我们的类型推理产生影响。比如

  • JSON.parse()[2]
  • Reflect.get()[3]
  • Response.json()[4]

对于 any 的处理,最佳方法是先把他变成 TypeScript 的顶层类型 unknown,这样它就不能在类型系统中随意传播了,必须要求程序员主动进行类型转换才能在其他地方使用。

分享一个代码片段,这个代码片段尝试将 window 上的挂载的一个全局方法获取出来,假如存在,就转换成安全的类型后再放出去;假如不存在,就换成一段 fallback 逻辑并展示警告信息。

export type I18NMethod = (key: string, options: unknown, fallbackText: string) => string;

function isI18nFunction(input: unknown): input is I18NMethod {
  return typeof input === 'function';
}

function makeI18nMethod(): I18NMethod {
  let hasWarnShown = false;

  return function (key: string, options: unknown, fallbackText: string) {
    if (Reflect.has(window, '$i18n')) {
      // $i18n是一个挂载到 window 对象上的全局方法
      const globalI18n: unknown = Reflect.get(window, '$i18n');
      if (isI18nFunction(globalI18n)) {
        return globalI18n(key, options, fallbackText);
      }
    }
    showWarnOnce();
    return fallbackText;
  };

  function showWarnOnce() {
    if (hasWarnShown === false) {
      hasWarnShown = true; // 只展示一次警告
      console.warn('Cannot Fetch i18n Text: window.$18n is not a valid function');
    }
  }
}

export const $i18n = makeI18nMethod();

// usecase
$i18n("hello-text-key", {}, "你好");

13 行获取了一个 any 类型的对象,第一步是将其转换为 unknown 类型。

假如 14 行不调用 isI18nFunction 转换类型,而是直接返回 globalI18n,ts 将报错:Type 'unknown' is not assignable to type 'string',从而要求开发者必须编写类型转换。

相关阅读

  • 2023 年的 Web Worker 项目实践

  • 前言—Web Workers 是 2009 年就已经提案的老技术,但是在很多项目中的应用相对较少,常见一些文章讨论如何写 demo ,但很少有工程化和项目级别的实践,本文会结合 Web Workers 在
  • 图解 15 个 TS 内置工具类型

  • 欢迎你阅读 「《重学 TypeScript 3.0》」 系列教程,本系列教程会包含 TypeScript 基础知识、进阶知识、类型体操(精选)、设计模式、核心特性实战和开源项目源码解析 「6」 大专
  • HTTP缓存看这一篇就够了

  • 前言HTTP缓存机制是优化web性能的重要手段,也是优化用户体验的重要一环。了解和熟悉HTTP缓存机制也成为了前端工作者必不可少的技能。HTTP缓存是用于临时存储网页资源(如HTML
  • 通过 React Router V6 源码,掌握前端路由

  • 在 React 前端项目中,涉及到前端路由,想必大家都用过了 react-router-dom[1] 这个包,因为常用,所以有必要弄清楚其中的实现细节,对前端路由会有一个更深入的认识,另外也有助于提升
  • 用 Node.js 手写 WebSocket 协议

  • 我们知道,http 是一问一答的模式,客户端向服务器发送 http 请求,服务器返回 http 响应。这种模式对资源、数据的加载足够用,但是需要数据推送的场景就不合适了。有同学说,http2
  • 原生 CSS Custom Highlight 终于来了~

  • 介绍一个比较前沿但是非常有用的新特性:一个浏览器原生支持的 CSS 文本高亮功能,官方名称叫做 CSS Custom Highlight API[1],有了它,可以在不改变 dom 结构的情况下自定义任意文
  • 前端框架的未来:useSignal()

  • Signal(信号)是一种存储应用状态的形式,类似于 React 中的 useState()。但是,有一些关键性差异使 Signal 更具优势。Vue、Preact、Solid 和 Qwik 等流行 JavaScript 框架都支持
  • 2023年你应该关注的JavaScript趋势

  • 本文翻译者系360 奇舞团前端开发工程师原文标题:Top JavaScript (JS) Trends You Should Follow in 2023原文作者:yevheniia原文地址:https://www.codica.com/blog/top-javascr
  • 2022年10个关于Javascript的统计数据

  • 本文翻译者系360 奇舞团前端开发工程师原文标题:Top 10 JavaScript Usage Statistics to Watch Out for in 2022原文作者:Nihar Raval原文地址:https://radixweb.com/blog/top-

热门文章

  • “复活”半年后 京东拍拍二手杀入公益事业

  • 京东拍拍二手“复活”半年后,杀入公益事业,试图让企业捐的赠品、家庭闲置品变成实实在在的“爱心”。 把“闲置品”变爱心 6月12日,“益心一益·守护梦想每一步”2018年四

最新文章

  • 类型编程原理和编写类型安全代码

  • 证明即程序,结论公式即程序类型。—— 柯里-霍华德对应[1]背景我们每天的编码都会使用到类型系统,本篇文章希望能够简单地介绍原理到实践,让读者能更好的使用类型系统编写出类
  • 2023 年的 Web Worker 项目实践

  • 前言—Web Workers 是 2009 年就已经提案的老技术,但是在很多项目中的应用相对较少,常见一些文章讨论如何写 demo ,但很少有工程化和项目级别的实践,本文会结合 Web Workers 在
  • 强到离谱!阿里P8前端面试全套笔记,即将删除~

  • 都2023年了,你觉得就业形势会回暖吗?先说下我的结论:2023依然存在很多不确定性,这不是悲观,而是远见。⾏业巨变、企业裁员,并没有随着疫情而消失,反而是随时会发⽣的事。“工作稳定
  • 图解 15 个 TS 内置工具类型

  • 欢迎你阅读 「《重学 TypeScript 3.0》」 系列教程,本系列教程会包含 TypeScript 基础知识、进阶知识、类型体操(精选)、设计模式、核心特性实战和开源项目源码解析 「6」 大专
  • HTTP缓存看这一篇就够了

  • 前言HTTP缓存机制是优化web性能的重要手段,也是优化用户体验的重要一环。了解和熟悉HTTP缓存机制也成为了前端工作者必不可少的技能。HTTP缓存是用于临时存储网页资源(如HTML