TypeScript
Last updated
Was this helpful?
进来看看,TypeScript居然还能这么玩 - 晓黑板前端技术的文章 - 知乎 https://zhuanlan.zhihu.com/p/296277982
深入理解 Typescript 高级用法 https://github.com/hannq/ppt-share/blob/master/courseware/ts-advance-usage/README.md
摘要: 有人说 Typescript = Type + Javascript,那么抛开 Javascript 不谈,这里的 Type 是一门完备的编程语言吗?
文章用多个案例, 展示了 TS 面向 Type 编程的特性.. 目前 TypeScript 不只是 带有 Type 的 JS 了.. 其类型系统 已经演化得十分强大... 所有编程语言都远不及..
但是这样这么强大的类型系统, 真的有必要吗? Type 只是一种重要的上下文信息, 在 coding 时, 应该追求简单明了的类型建模, 而不应为了 Type 增加心智负担, 照这样下去, 免不了要 debug Type... 那就多少有点魔幻了..
现在 TS 的发展已经趋向于是两种语言的融合: 一种是 JavaScript, 另一种是 <加粗>Type<加粗>Script...
好文分享:
clean-code-typescript https://github.com/labs42io/clean-code-typescript
教你如何写干净的代码, 文章中的思想,技巧 总结得还是很全面的. 另: 学习不要被编程语言限制, 要有个做科学家的心.
TypeScript 设计中的最大槽点就是支持鸭子类型。
每次看到具有该特性的代码, 都令我无法忍受.
在我看来 这种设计只有坏处:
上下文更难以分析, 数据会无意间具有另一个身份(Type)
更难以追踪接口, 只能借助编辑器
与静态类型的原则相违背
快餐文分享:
1.2W字 | 了不起的 TypeScript 入门教程
https://juejin.cn/post/6844904182843965453
基础的语法,知识点都有提到。
一份不可多得的 TS 学习指南(1.8W字) https://juejin.cn/post/6872111128135073806
日常分享 TS 代码片段:
分享一道面试题:
先实现一个类型可以提取出指定类型,用来筛选出所有为函数类型的属性
在 1 的基础上剔除 never
,取出所有 key
在 2 的基础上我们可以使用 Pick
提取出子类型
在 3 的基础上我们再使用 infer
将函数的返回类型改为形参类型
文中部分示例来自TypeScript 官网 - 高级类型,面试题灵感来自中国 LeetCode,原题太绕且有 Redux 倾向,因此做了简单改造,基本思路一致甚至更全面。
快餐文分享:
深入typescript类型系统(二): 泛型和类型元编程
https://zhuanlan.zhihu.com/p/96046788
摘要: 本文主要讨论Typescript的泛型设计和类型元编程能力。泛型和子类型几乎是正交的两个概念,当然两者也可以配合使用(Bounded Polymorphism)。
文章 Demo 质量都挺高的,建议刷下。
日常分享 TypeScript 代码片段:
最近 我真的是被 TS 迷住了...
太酷了.. 打表去做递减, 真是第一次见到 这种用法...
A: 我想用 数组的 length 生成一个 union type,比如 length = 4 -> type N = 0 | 1 | 2 | 3,这样有可能吗?
B: 我有一个绝妙的想法 吃完饭验证一下
A: 哈哈哈好!
C: 我看看..
D: 我也想看哈哈
B:
能生成 字符串的union
A: type ArrIndex<Arr> = Exclude<keyof Arr, keyof any[]>;
C: 受教了~ 这个思路 牛批~
分享一个项目: https://github.com/type-challenges/type-challenges Collection of TypeScript type challenges with online judge
可做 TS 体操
分享个 TS snippet 助助兴
函数重载的另一种方式.. 除此之外还有:
func(签名1); func(签名2); ... func(签名3) {}
(type as any) as targetType 可以将 任意 type 转换成 targetType..
TypeScript 官方提供了一种注解的元编程库.. TypeScript 在 编译成 JS 的这一层 可以增加好多抽象哇..
https://jkchao.github.io/typescript-book-chinese/tips/metadata.html
怎么过滤 Type Model/Object 中的不需要的 Key
type filter<T extends object> = { [K in keyof T]: condition ? ... : never }[keyof T]
关键在于 最后一行, 它其实隐含了两点:
[keyof T] keyof T => key1 | key2 | key3 ...
[key1 | key2 | key3 ...]
可以看成 [Literal type]
而 [literal type]
会执行 "遍历 每一个可成立的字面量"的...
2. {k1:nerver, k2: value}['k1'|'k2]
此类型返回值是 value 也就是说 会自动过滤掉 never
B: 可以当分配律来理解A[x|y]=A[x]|A[y]
T|never=T T&never=never
A: 这个受教了 是的, 就应该是理解的
第一次见到泛型组件的用法.. 有趣..
<Component<Generic Type> attributes... />
快餐文分享: 10++ TypeScript Pro tips/patterns with (or without) React https://medium.com/@martin_hotell/10-typescript-pro-tips-patterns-with-or-without-react-5799488d6680
使用 TS 开发 React 项目时需要注意的一些点, 这篇文章是 2018 年写的, 在 medium 上有 8.9k 点赞.. 文章有很多 现在看来的 明显的错误...
就比如 Don’t use FunctionComponent<P>/FC<P> to define a function component
果然发展的快, 沉淀就成了个问题..
利用接口 实现 构造函数约束..
TS 类本身内部居然也支持 定义限制条件...
hah 每次看到 + - 修饰符, 都觉得使用这两个符号 类型显得很清晰易懂
好文分享:
Learn Advanced TypeScript Types https://medium.com/free-code-camp/typescript-curry-ramda-types-f747e99744ab
摘要: Despite the popularity of currying and the rise of functional programming (and of TypeScript), it is still a hassle today to make use of curry and have proper type checks. Even famous libraries like Ramda do not provide generic types for their curry implementations (but we will). However, you need no functional programming background to follow this guide. The guide is about currying but it is only a topic of my choice to teach you advanced TypeScript techniques. You just need to have practised a bit with TypeScript’s primitive types. And by the end of this walk-through, you will be a real TS wizard.
文章主要讲述了, 使用 TypeScript 为 Curry 函数建模的过程
文章前面花大篇幅讲解了 curry, 与 TS 的基础概念.. 然后借助这个概念 创建了一个个类型工具, 再利用这些工具 达成最后 curry 模型.. 并且最后还增加了 placeholder 支持..
整篇文章读了3遍.. 耗时半个多小时... 很久没这么耗费心智看一篇文章了...
PS: 文章中存在一处错误 CurryV3 的递归名词 应该是 CurryV3
这篇文章真的非常棒, 非常推荐阅读.
https://github.com/millsp/ts-toolbelt/blob/master/src/Function/Curry.ts
这是文章最终的产出
哎, 虽然 TS 只提供了 type extends infer 很少的关键字, 但已经做到 类型系统上 图灵完备了..
TypeScript 4.2 Beta 发布 https://www.oschina.net/news/126465/typescript-4-2-beta-released
语法新feature
元祖类型的 Rest 元素支持放置在元组中的任何位置
模板字面量表达式已具有模板字面量类型
🌚如何更容易上手 Typescript 类型计算? https://juejin.cn/post/6924848590544207885 摘要: 最近在国内的前端圈流行一个名词“TS 体操”,TS 对应 TypeScript,“体操”是 TC 的戏称,而 TC 就是 turing completeness (图灵完备)的意思,具体就是指验证 TypeScript 的 Type-level programming (编译时(compile time)的相关语法)是图灵完备的,经过传播之后,也泛指以一个 TS 类型作为输入,通过写 TS 代码输出另外一个类型的实践。
文章分享,写的很不错,demo也值得刷一下。