以Typescript 的typeof和类类型为例再探类型系统

最新推荐文章于 2024-07-26 11:09:07 发布
最新推荐文章于 2024-07-26 11:09:07 发布
阅读量762 收藏 1
点赞数
分类专栏： javascript typescript 文章标签： typescript javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40085040/article/details/112703872
版权
本文探讨了JavaScript的动态类型系统，特别是原型链，并介绍了如何在Typescript中实现静态类型系统。强调了关注对象的shape，区分value和type的原则，以及如何用构造函数表示class的类型。通过typeof在类型系统中的应用，展示了Typescript如何在保持与JavaScript动态类型兼容的同时，增强类型安全性。
摘要由CSDN通过智能技术生成

  如果要用一句点睛之笔形容静态类型和动态类型最大的不同。 我会举C/C++和javascript的例子。
  一个指针在runtime运行时就仅仅只是一个内存地址而已, 只有在写源代码文本的时候, 编译器的限制才使得它具有了类型, 这便是静态类型。
  而对任意一个javascript引用, 我总是能在运行时了解该对象中所有的key字段, 即了解该对象具有怎样的shape(shape这个词是前不久从Typescript的文档上看到的, 觉得非常精妙, 就不翻译了), 这就是动态类型。
  熟悉Java的朋友应该了解, 在runtime运行时动态获取一个类型的信息的方式叫做Reflect(一般译作"反射"),有可能会惊讶与javascript随时都在利用反射:)
  不过这是后话了, 以后空了我许会写一篇有关反射的博客。

Javascript类型系统 – 动态类型清流

  类型就是一个引用的shape, 这句话是我前不久从Typescript文档里看到的, 觉得尤为精妙。无论是静态类型还是动态类型, 都可以用这句话来描述。同样的, 要满足了这个原则，你也可以构建出千奇百怪百花齐放的类型系统, 而javascript的类型系统 – 原型链, 就是非常值得一提的类型系统。

动态反射

  如果我实现了一个函数库Reflect, 这个函数库可以在运行时接受一个引用(内存指针), 从而了解这块内存(也许不是一块完整的内存而是由链表或者什么数据结构组织到一起的多块内存也说不定哦)所代表的对象含有哪些成员, 我就可以(不要脸地说)实现了动态类型系统。

构造/复用对象

  复用对象最简单的做法是把一个对象所有的成员复制到新的内存去, 然后返回该内存头部的引用(内存指针)。但是这种做法太浪费了, 因为函数代码完全可以通过传入不同参数对象来实现复用而没必要让每一个构造出的对象都复制一份函数代码。
  所以为了节省内存, 我们需要一个"模板对象", 这个模板对象的成员代表了一类，一群，一堆，一抹多对象的公有部分。
  然后, 实现一种机制, 这种机制让新产生的每个对象里都保有一个成员, 该成员指向"模板对象", 并约定, 当用户代码调用了新产生的对象上某个没找到的成员时, 就往这个对象的"模板对象"上找, 递归到顶为止。

原型链

  模板对象四个字太长了, 哪怕写成英文Pattern Object也是两个词13个字母, 干脆叫原型好了prototype 7个字母,

最低0.47元/天 解锁文章
__SAD_DOG__
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈TypeScript的类型保护机制
10-15
在TypeScript中，类型保护机制是一种关键特性，它允许开发者在运行时确保变量...通过正确使用这些机制，开发者可以编写出更健壮、更易于维护的代码，同时利用静态类型系统的强大功能，即便是在JavaScript的动态环境中。
TypeScript基础之typeof 类型操作符
zxl1990_ok的博客
06-26 4588
TypeScript中的typeof常见用途是在类型上下文中获取变量或者属性的类型， 此外还可以配合获取函数的返回值类型， 以及配合 ReturnType 使用获取函数的返回值类型， 以及配合 keyof使用
TypeScript 中比较重要的关键字讲解
qq_37500730的博客
06-13 571
使用 TS 进行项目开发时，写好类型是后续开发和迭代能更顺利进行的一个保障，很多时候会遇到比较复杂的类型，这时候往往需要用到关键字，这里简单讲解一下在开发过程中比较常用也比较重要的关键字
TypeScript的基础类型和高级类型梳理总结
前端攻城狮
03-10 992
TypeScript常见的基础类型和高级类型梳理总结
TypeScript的类型系统
m0_65912225的博客
03-11 895
TypeScript 提供了 JavaScript 所有功能，以及在这些功能上的附加层：TypeScript 的类型系统。原始类型JavaScript 原始类型很好地体现在 TypeScript 类型系统中。即stringnumber和boolean数组TypeScript 为数组提供了专用的类型语法来使你更简单地注解和编档你的代码。语法是后置[]于任意有效的类型注解上（例如:boolean[]这允许你安全地做任何你通常会做的数组操作，以及从像是赋值一个成员以错误的类型的错误中保护你。接口。
Typescript - 类型守卫（typeof / in / instanceof / 自定义类型保护的类型谓词）通俗易懂详细教程
王佳斌
02-10 2666
TypeScript类型守卫，ts 类型守卫是什么，ts类型守卫的方式教程，ts中的类型守卫是干啥的，typescript 类型守卫详细讲解教程，typescript类型守卫是什么?typescript类型守卫，TypeScript类型守卫的几种方式，ts的类型守卫入门教程，ts类型守卫简单的教程，Typescript - 类型守卫（typeof / in / instanceof / 自定义类型保护的类型谓词）通俗易懂详细教程。ts typeof 用法，ts in 用法，ts instanceof 关键字
「TypeScript系列」TypeScript 联合类型/联合类型数组
日常笔记/总结/系列知识梳理
05-24 1247
联合类型还可以用于定义具有明确成员的集合，例如表示方向的枚举。// 输出: e。
typeScript常用类型 -- typeof（三）
qq_49277509的博客
08-02 523
typeScript常用类型之typeof
TypeScript——类型系统与类型推导
dizuncainiao的博客
08-23 387
TypeScript 会在没有明确的指定类型的时候会通过解析代码推测出一个类型，这就是类型推导。正因为有这样的功能，在日常开发中，对于一些简单的、不会更改的数据我们可以不用显式去定义类型。
Typescript总结(二)——类型详解
weixin_47450807的博客
02-26 4624
** Typescript总结(二)——类型详解 **
第四章 TypeScript的枚举和类型约束的介绍和使用
杨树林er的博客
05-03 833
枚举( mei ju ) : 枚举的意思就是一一列举，把所有情况都列举出来，那么取值的时候，只有这几个可以使用，其他的都不行。
TypeScript学习之强制类型的转换
10-20
在TypeScript中，类型系统是其一大特色，它允许开发者在编写代码时声明变量、函数参数和返回值的类型，从而提高代码的可读性和稳定性。然而，在某些情况下，我们可能需要将一个值从一种类型转换为另一种类型，这就是...
你不知道的 TypeScript 高级类型(小结)
10-14
这种类型通常用于映射类型和泛型中，以动态地引用对象属性。例如，我们可以创建一个新的类型，该类型只包含 `Button` 接口中的某些属性： ```typescript type ButtonPartial = Pick, 'type'>; ``` 在这个例子中，`...
typeof-jsonc:将jsoncjson转换为Typescript接口
05-02
typeof-jsonc是用于将json或jsonc字符串转换为typescript类型（接口）的库 支持 基本类型 数组类型（支持自动合并） 相同的结构自动合并 注释 JsDoc评论 自定义命名 杰森 杰森克 不是标准的jsonc或json 用法 安装 ...
ts-expect:检查TypeScript类型是否与期望值匹配
05-22
取而代之的是，它取决于TypeScript编译器，并且可以对传递给expectType的“值”类型进行测试的泛型可以在类型系统中分配给其泛型。 import { expectType } from "ts-expect" ; expectType < string> ( "test" ) ;...
vue检测页面手指滑动距离，执行回调函数，使用混入的语法，多个组件都可以使用
白白的博客
07-15 732
vue检测页面手指滑动距离，执行回调函数，使用混入mixin的语法，多个组件都可以使用
【React 】开发环境搭建详细指南
lph159的博客
07-24 1133
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
最新发布
weixin_42289080的博客
07-26 170
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
typescript typeof
03-29
The `typeof` keyword in TypeScript is used to get the type of a value or a variable at runtime. It is similar to the `typeof` operator in JavaScript, but with added support for type annotations and type inference. For example, consider the following code: ```typescript const x = 42; const y = "hello"; console.log(typeof x); // "number" console.log(typeof y); // "string" ``` Here, the `typeof` operator is used to get the types of the variables `x` and `y` at runtime. In TypeScript, `typeof` can also be used with type annotations and type inference to create more type-safe code. For example: ```typescript function getLength(str: string) { return str.length; } const message = "hello"; const length = getLength(message); console.log(length); // 5 console.log(typeof length); // "number" ``` Here, the `getLength` function takes a string parameter and returns its length. The `typeof` keyword is used to infer the type of the `length` variable, which is `number`. This ensures that we don't accidentally try to use `length` as a string or some other type later on in our code.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值