1.写给前端新人的源码话:为什么要用那么复杂的TS
2.别再导出 .d.ts 了!
3.tsç¼ç¨è¯è¨åä»ä¹çï¼
4.ts是论坛什么格式的文件?
5.TypeScript必知三部曲(一)TypeScript编译方案以及IDE对TS的类型检查
6.TS 一些工具泛型的使用及其实现(续一)
写给前端新人的话:为什么要用那么复杂的TS
我JS写得很好,为何要使用TS呢?本文是源码写给未曾接触过TS、对TS持有一定心理负担的论坛前端初学者。
面对各类TS的源码赞美文章,对于TS还未在项目中实际应用的论坛google查看源码乱码新手,可能只接触过掘金文章或阅读了官方文档,源码内心可能在想:TS确实好,论坛知道了在变量后加上冒号和类型,源码但是论坛否所有变量或函数都需要这样操作?为何我指定了返回类型,VSCode却提示返回值为any?泛型这么复杂,源码何时需要使用?接口类型定义应当放置何处?
让我们一步步解开疑惑。论坛
TS是源码谁为谁而编写?
首先,结论是论坛:TS是定义者为使用者而编写。TS旨在通过类型提示与约束,源码使使用者能更便捷(通过VSCode提示)及安全(限制使用方式)地利用提供的方法或类。
TS使用者有两种身份:定义者与使用者。定义者为使用者提供方法或类,使用者则通过VSCode提示获取信息。
VSCode提示的重要性
以定义者提供一个方法为例,使用者能清晰了解到该方法的参数与返回值信息,而无需查看源码。对于复杂方法,未来云南麻将源码良好的注释亦能帮助使用者快速判断参数与返回值类型。
使用注释增强提示信息,方法注释如下,VSCode提示将更为详细:
因此,提供方法或类给他人使用时,应确保类型约束清晰,以助使用者正确且安全地使用。这不仅适用于提供第三方库或框架,也包括在项目中提取公用方法至特定文件夹。
类型推断的优势
并非所有变量或返回值都需要手动设定类型,类型推断能简化代码编写。
如示例,separator无需显式设定为string,TS能自动推断类型。返回类型同样无需定义,TS会根据方法返回类型自动推断。
类型推断适用于简单情况,复杂场景需手动设定。可通过VSCode提示验证类型是否正确推断。
VSCode提示不足的情况
若项目路径设置了别名,可能引发方法提示错误。通过配置tsconfig.json中的app定时提醒源码paths选项,正确解析别名下的文件。
何时使用泛型
在理解泛型概念与用途后,何时使用泛型便显而易见。泛型能实现一个组件支持多种类型,解决类型兼容性问题。
如定义一个方法,希望支持string类型,不使用泛型可能导致类型不一致。引入泛型后,如需支持多种类型,代码编写将更加严谨。
泛型应用并不止于此,通过研究第三方库的类型定义文件,可深入了解高级泛型用法。
接口类型定义位置
无需定义接口类型时,直接编写即可。如示例方法。需要重用时,可在实现文件夹自定义接口类型,并通过export提供给使用者。
专门文件夹放置公用数据类型,如前后端接口数据定义,下载 stl源码剖析便于管理与调用。
总结
本文旨在解答新手在使用TS时遇到的心理负担问题,基于个人经验进行讲解。TS并未想象中复杂,其初衷在于协助开发者,提供便捷与安全保障。TS使用者应享受其带来的便利。
使用TS后,回不去JS了。
别再导出 .d.ts 了!
当你使用 TypeScript 编写 npm 包时,是否还习惯性地导出 .d.ts 文件?
那么,为什么我们曾经认为导出 .d.ts 文件是必要的呢?
通常,我们会在 package.json 的 "types" 字段中添加 "index.d.ts",这样当他人使用你的库时,他们就能获得类型提示。然而,实际上,这里可以直接将源码文件名填入 "types" 字段,即 "types": "index.ts"。这样不仅能够提供类型提示,甚至在某些编辑器中,华夏祭奠网源码用户可以点击源码进行深入查看。
但你可能会说,我不希望让别人看到我的源码。
如果你认为你的类型描述足够清晰,且用户理解了如何使用库,那么确实不必公开源码。然而,如果类型说明不够详尽,或者库的用法难以理解,仅仅依赖类型提示并不能满足需求。此外,提供源码的便利在于用户可以直接在源码中查找bug,这能显著提高你解决问题的效率。
你可能会说,我可以在注释中提供详细信息,但我并不想公开源码。
在这种情况下,编写自己的 .d.ts 文件(或者基于 tsc -d 的输出进行修改)可能更为明智。原因在于,tsc 目前无法支持合并 .d.ts 文件或去除多余的类型定义。即便你有 个 .ts 文件,tsc 仍会生成 个 .d.ts 文件(除非在编译时指定输出类型文件,但这又增加了工作量)。通过自行编写 .d.ts 文件,你可以更精确地控制类型定义,从而避免不必要的文件生成。
希望以上的建议能帮助你更有效地管理 TypeScript 项目,并让你在编写 npm 包时拥有更好的类型支持和用户体验。
tsç¼ç¨è¯è¨åä»ä¹çï¼
tsä¸jsæ大çåºå«æ¯ä»ä¹å¢?
ä¸ãç¨åºä¸åï¼
tséè¦éæç¼è¯ï¼å®æä¾äºå¼ºç±»åä¸æ´å¤é¢å对象çå 容ãTypeScriptæ¯JavaScriptçè¶ éï¼å¯ä»¥ç¼è¯æ纯JavaScriptãè¿ä¸ªåæ们CSS离çLessæè Sassæ¯å¾åçï¼ç¨æ´å¥½ç代ç ç¼åæ¹å¼æ¥è¿è¡ç¼åï¼æåè¿æ¯å好çæåççJavaScriptè¯è¨ã
äºãè¿è¡ä¸åï¼
tsæç»ä»è¦ç¼è¯ä¸ºå¼±ç±»åçjsæ件ï¼åºäºå¯¹è±¡çåççjså¨è¿è¡ãæ tsç¸è¾java/C#è¿æ ·å¤©çé¢å对象è¯è¨æ¯æåºå«åå±éçï¼TypeScriptæ¯ä¸ä¸ªåºç¨ç¨åºçº§çJavaScriptå¼åè¯è¨ãè¿ä¹è¡¨ç¤ºTypeScriptæ¯è¾çé¼ï¼å¯ä»¥å¼å大ååºç¨ï¼æè 说æ´éåå¼å大ååºç¨ã
主è¦åè½
TypeScriptçä½è æ¯å®å¾·æ¯Â·æµ·å°æ¯ä¼¯æ ¼ï¼C#çé¦å¸æ¶æå¸ï¼å®æ¯å¼æºå跨平å°çç¼ç¨è¯è¨ãå®æ¯JavaScriptçä¸ä¸ªè¶ éï¼èä¸æ¬è´¨ä¸åè¿ä¸ªè¯è¨æ·»å äºå¯éçéæç±»åååºäºç±»çé¢å对象ç¼ç¨ã
TypeScriptæ©å±äºJavaScriptçè¯æ³ï¼æ以任ä½ç°æçJavaScriptç¨åºå¯ä»¥è¿è¡å¨TypeScriptç¯å¢ä¸ãTypeScriptæ¯ä¸ºå¤§ååºç¨çå¼åè设计ï¼å¹¶ä¸å¯ä»¥ç¼è¯ä¸ºJavaScriptã
ä»ä¹æ¯tsç¼ç¨
ä»ä¹æ¯ts
tsæ¯jsçè¶ éï¼æå³çjsæ¬èº«çè¯æ³å¨tséé¢ä¹è½è·çéãtsä¸æ¹é¢æ¯å¯¹jså ä¸äºå¾å¤æ¡æ¡æ¡æ¡çéå¶ï¼å¦ä¸æ¹é¢æ¯æå±äºjsçä¸äºè½åï¼å°±åes6æä¾äºé£ä¹å¤ç¥å¥çè¯æ³ç³ä¸æ ·ãåªè¦æç §ä¸å®çè§åå»ä¹¦åjsï¼å°±è½äº«åå°ts带æ¥ç好å¤ã
å½ç¶å 为ç°å¨çts足å¤å¼ºå¤§ï¼å¹¶ä¸æèªå®¶çvscodeä¿é©¾æ¤èªï¼ææ¹ä¾¿äºæ们è¿äºè¿å»æ³é½ä¸(lan)æ¢(de)æ³çè¦é¼ç¨åºåã
jsæ¹é ætsçå·¥ä½éå¾å¤§ç¨åº¦åå³äºä½ æ³å¯¹èªå·±ç代ç éå¶çæå¤ç»è´ï¼æè¿°çæå¤å®åãæç®åçå°±åä¸é¢è¯´çï¼æ¹ä¸ªæå±åå°±è¡äº(å½ç¶å¾å¤§ç¨åº¦ä¸å¯è½ä¼éè¿ä¸äºåç§éææ£æ¥)ãå¦æä½ åçè¶å¤ï¼ç¨ä½ 代ç çåå¿å°±è¶å¤§å¯è½åæ¬¢ä½ åçä¸è¥¿ã
TypeScriptåæ¯æä¹æ ·ï¼å¨åçè¿ä¸ªé®é¢ä¹åï¼æ们é¦å è¦ææ¸ æ¥ï¼typescriptæ¯ä»ä¹ï¼å®æä»ä¹å¥½å¤ï¼è½ç»æ们带æ¥ä»ä¹æ¶çï¼
ä»ä¹æ¯typescriptï¼
å®æ¯ç±å¾®è½¯å ¬å¸å¼åçä¸å¥èæ¬è¯è¨ï¼ä½è 认为å®æ¯æ®éjavaScriptçSuperSetãå®å¹¶ä¸è½ç´æ¥è¿è¡å¨æµè§å¨æè æå¡å¨ä¸ï¼æ以å¢ï¼å¨è¿è¡ä¹åéè¦ç»è¿ç¼è¯æ¶çå¤çãå®ç½è¯´ç¼è¯åå¯ä»¥è¿è¡å¨ä»»ä½å¹³å°ãä»»ä½æå¡å¨ãä»»ä½ç³»ç»ä¸ãå®ä¹æ¯å¼æºçï¼å¤§å®¶å¯ä»¥å°æèå代ç æ管平å°æ¥çæºç ï¼ä½æ¯ä¸ªäººç解è¿ä¸ªå¼æºæç»è§£éæè¿æ¯å¾®è½¯å ¬å¸æ¥å®ã
typescriptçç¼è¯
æç¸ä¿¡æ¯ä¸ä¸ªå¦ä¹ tsçåå¦å¯¹å®ç第ä¸å°è±¡ç»å¯¹æ¯å®è½åç±»åæ£æ¥ï¼æ¯å¦å¯¹ä¸äºåéï¼å½æ°çåæ°ä»¥åè¿åå¼ççåç±»åæ£æ¥ï¼è¿äºæ£æ¥é½æ¯å¨ç¼è¯æ¶åçï¼å½ä½ å¨ä½¿ç¨ç¼è¯å¨è½¬æ¢æjsçè¿ç¨ä¸å°±å¯ä»¥æ£æ¥åºæ¥å¾å¤é误ï¼è¿æ ·å¯ä»¥åå°åºç°bugçå çï¼æé«æ们代ç çè´¨éãtsä½è å·²ç»ä¸ºæ们æä¾äºå¾å¥½ç¨çcliï¼æ们å¯ä»¥æ ¹æ®èªå·±çéè¦å®ä¹tsconfigã
æ®éçjsç¼è¯é常ä¼æ以ä¸å 个æ¥éª¤ï¼
æ«æåæ-AST-转æ¢-ç®æ 代ç
tså¨è¿ä¸ªä¸é´å å ¥ä¸æ¥ä»£ç ç±»åæ£æ¥ï¼
æ«æåæ-AST-ç±»åæ£æ¥-转æ¢-ç®æ 代ç
å¨ä½ å¼åtsçæ¶åï¼cliå¯ä»¥å®æ¶æ示代ç é®é¢
注ï¼tsä¸ä» ä» å¯ä»¥è½¬åæjsï¼ä¹å¯ä»¥è½¬æ¢æå ¶ä»è¯è¨
typescriptçä¼ç¹
é¦å ï¼ä¸ªäººç解类åæ£æ¥æ¯å®æ大çç¹ç¹ï¼ä¹å¯ä»¥è¯´æ¯å®æ大çä¼ç¹ï¼ææçé å¥è®¾æ½é½æ¯å´ç»çå®æ¥åçã
å ¶æ¬¡ï¼tsæä¾äºè¯¸å¦æ¥å£ãæ½è±¡ãæ³åãprivateãprotectedãpublicçå¨å ¶ä»è¯è¨è¯¸å¦javaï¼c常è§çæ¹å¼ï¼è¿äºä¸è¥¿é½æ¯åçjsä¸å ·æçï¼æ以å¼åææ³éè¦ææ转åã
第ä¸ç¹ï¼tsæä¾äºææ°çjsè¯æ³æ¯æ
第åç¹ï¼angular2å°±æ¯ç¨tså¼åï¼å¦æä½ çå¢ééæ©å®ä½ä¸ºææ¯æ ï¼é£ä¹tså°±æ¯ä½ çåºç¡ï¼å¦ä¼äºtså°±å¾èªç¶çå¯ä»¥å¼åangular
typescriptçæ´»è·åº¦
tsè¯è¨æ¬èº«å¤§æ¦å 个æåå¸ä¸ä¸ªæ°çæ¬ï¼ç®å%çç¥åçå¼æºåºé½æä¾ç±»åå®ä¹æ件ï¼èªå·±ä¹è½å¾æ¹ä¾¿çåå¸tså¼æºä»£ç ãç®åbatçä¸çº¿äºèç½å ¬å¸ä¹é½æå¤æå°çå¨ä½¿ç¨typescriptï¼æ´ä½æ´»è·åº¦è¿æ¯ä¸éçï¼æ以åæ¯è¿æ¯ææçã
个人ç解ï¼tsæ´éåéç¨æ§å¾å¼ºç代ç ï¼ä¸éåè¿ä»£é度å¾å¿«çä¸å¡ä»£ç ãå¦å¤å¯¹äººåç´ è´¨è¦æ±ä¹åçæ´é«ï¼éååºè¯¥éåèè¡ã
Google微软é½ç¨äºï¼èä¸å ¼å®¹JSï¼ä½ è¿æå¥ï¼
å¦å§ï¼è±ä¸äºå¤å°æ¶é´ä¹ä¸é¾ï¼å¤ä¸é¨ææ¯æ ï¼ä¹æé«èªèº«ä»·å¼ï¼æ´æå©äºä½ å°æ¥æå±å¦ä¹ å ¶ä»éæè¯è¨
çä½ ä»äºåªä¸ªé¢åäº
ts是什么格式的文件?
TS文件是一种TypeScript源代码文件。 详细解释如下: TS文件是TypeScript语言编写的源代码文件。TypeScript是一种由微软开发的开源编程语言,它是JavaScript的一个超集,意味着它添加了静态类型系统和一些额外的功能来增强JavaScript的功能。 TypeScript的特点: 1. 静态类型系统:TypeScript提供了静态类型系统,允许开发者在编译时检查类型错误,从而提高代码的可维护性和可读性。 2. 类与接口:相比JavaScript,TypeScript引入了类和接口的概念,这使得大型项目的代码组织更为方便。 3. 模块化:TypeScript支持模块化开发,有助于实现代码的重用和避免命名冲突。 4. 扩展性:由于TypeScript是JavaScript的超集,所以现有的JavaScript代码可以很容易地转换为TypeScript。同时,开发者还可以使用TypeScript来开发复杂的桌面和移动应用。 TS文件的应用场景: 在实际项目中,TS文件常常被用于开发大型应用或需要更高可靠性和可读性的项目。随着TypeScript的普及,越来越多的开发者开始使用它来提高开发效率和代码质量。通过静态类型系统和其他高级功能,TypeScript能够极大地简化复杂的编程任务,使得代码更易于理解和维护。同时,许多现代前端框架和库都支持TypeScript,进一步推动了其在前端开发中的广泛应用。 总的来说,TS文件是包含TypeScript代码的源文件,通过它,开发者可以编写出更为安全、可维护和可扩展的代码。TypeScript必知三部曲(一)TypeScript编译方案以及IDE对TS的类型检查
TypeScript代码的编译和IDE类型检查是开发者常遇到的问题。官方的tsc编译器与Babel编译器各有特点,IDE如IDEA和VSCode在打开TS项目时提供类型检查功能。本文将详细解释两种编译方案以及IDE如何配合。 首先,理解基本原则:尽管浏览器只认识JavaScript,但TS代码必须编译成JS才能运行。编译过程涉及ts源代码、编译工具(tsc或Babel)和配置文件(tsconfig.json)。 1. tsc编译:TypeScript Compiler官方推荐方案,通过读取tsconfig.json配置编译ts为JS。配置可指定模块规范,如commonjs或es6。实践中,我们创建简单示例,配置文件可指定输出目录和模块类型。 2. Babel编译:通过Babel转换器处理TS,需配合preset和plugin。它不直接编译TS,而是处理代码语法和结构。配置.babelrc指定所需插件和转换规则。 IDE中,它们会启动TypeScript检测服务,根据tsconfig.json自动进行类型检查,使用的是项目中的TypeScript版本。 编译与IDE检查整合:tsc:编译和IDE检查共用一套逻辑,代码有问题,IDE会显示错误。
Babel:编译和IDE检查分开,可能IDE显示错误,编译却无问题。
本文着重讲解了基础内容,后续文章将深入探讨其他相关主题。TS 一些工具泛型的使用及其实现(续一)
这篇文章将继续解析 TypeScript (TS) 中的工具泛型,基于 utility-types 项目源码,以加深理解。要理解本篇文章,你需要对 TS 的以下内容有所掌握:ArrayElement: 通过`extends`限制数组类型,结合数组的数字键特性获取属性类型,或使用`infer`隐射数组属性类型。
Exclude & Extract vs. Diff & Filter: TypeScript 内置的类型定义中有Exclude和Extract,它们在文档中还有其他名称,虽然代码中它们等效于Diff和Filter。
NonNullable: 从类型T中移除null和undefined。
Parameters和ConstructorParameters: 分别获取函数参数和构造函数参数的类型,利用`infer`提取类型。
InstanceType: 获取实例的类型,但不通过`infer`参数,而是`infer`函数返回值类型。
NonFunctionKeys & NonFunction: 分别获取对象中非函数属性的键和剔除函数后的对象。
PickByValue & OmitByValue: 根据值类型选择或剔除对象属性,但要注意类型推断的复杂性。
PickByValueExact: 更精确地选择类型T本身,避免子类型。
Equals, RequiredKeys, OptionalKeys, ReadonlyKeys, & MutableKeys: 分别用于类型等同性判断和对象属性的必填、可选、只读和可修改性判断。
尽管这些工具可能在实际开发中不常用,但它们有助于提升对泛型的熟悉度。作者计划转向业务开发,未来可能会有更多关于泛型内容的分享。