1.写给前端新人的源码话:为什么要用那么复杂的TS
2.别再导出 .d.ts 了!
3.tsç¼ç¨è¯è¨åä»ä¹çï¼
4.ts是论坛什么格式的文件?
5.TypeScript必知三部曲(一)TypeScript编译方案以及IDE对TS的类型检查
6.TS 一些工具泛型的使用及其实现(续一)
写给前端新人的话:为什么要用那么复杂的TS
我JS写得很好,为何要使用TS呢?本文是源码写给未曾接触过TS、对TS持有一定心理负担的论坛前端初学者。
面对各类TS的源码赞美文章,对于TS还未在项目中实际应用的论坛springmvc启动源码分析新手,可能只接触过掘金文章或阅读了官方文档,源码内心可能在想:TS确实好,论坛知道了在变量后加上冒号和类型,源码但是论坛否所有变量或函数都需要这样操作?为何我指定了返回类型,VSCode却提示返回值为any?泛型这么复杂,源码何时需要使用?接口类型定义应当放置何处?
让我们一步步解开疑惑。论坛
TS是源码谁为谁而编写?
首先,结论是论坛:TS是定义者为使用者而编写。TS旨在通过类型提示与约束,源码使使用者能更便捷(通过VSCode提示)及安全(限制使用方式)地利用提供的方法或类。
TS使用者有两种身份:定义者与使用者。定义者为使用者提供方法或类,使用者则通过VSCode提示获取信息。
VSCode提示的重要性
以定义者提供一个方法为例,使用者能清晰了解到该方法的参数与返回值信息,而无需查看源码。对于复杂方法,kerneldtc源码良好的注释亦能帮助使用者快速判断参数与返回值类型。
使用注释增强提示信息,方法注释如下,VSCode提示将更为详细:
因此,提供方法或类给他人使用时,应确保类型约束清晰,以助使用者正确且安全地使用。这不仅适用于提供第三方库或框架,也包括在项目中提取公用方法至特定文件夹。
类型推断的优势
并非所有变量或返回值都需要手动设定类型,类型推断能简化代码编写。
如示例,separator无需显式设定为string,TS能自动推断类型。返回类型同样无需定义,TS会根据方法返回类型自动推断。
类型推断适用于简单情况,复杂场景需手动设定。可通过VSCode提示验证类型是否正确推断。
VSCode提示不足的情况
若项目路径设置了别名,可能引发方法提示错误。通过配置tsconfig.json中的hellground源码paths选项,正确解析别名下的文件。
何时使用泛型
在理解泛型概念与用途后,何时使用泛型便显而易见。泛型能实现一个组件支持多种类型,解决类型兼容性问题。
如定义一个方法,希望支持string类型,不使用泛型可能导致类型不一致。引入泛型后,如需支持多种类型,代码编写将更加严谨。
泛型应用并不止于此,通过研究第三方库的类型定义文件,可深入了解高级泛型用法。
接口类型定义位置
无需定义接口类型时,直接编写即可。如示例方法。需要重用时,可在实现文件夹自定义接口类型,并通过export提供给使用者。
专门文件夹放置公用数据类型,如前后端接口数据定义,源码在哪便于管理与调用。
总结
本文旨在解答新手在使用TS时遇到的心理负担问题,基于个人经验进行讲解。TS并未想象中复杂,其初衷在于协助开发者,提供便捷与安全保障。TS使用者应享受其带来的便利。
使用TS后,回不去JS了。
别再导出 .d.ts 了!
当你使用 TypeScript 编写 npm 包时,是否还习惯性地导出 .d.ts 文件?
那么,为什么我们曾经认为导出 .d.ts 文件是必要的呢?
通常,我们会在 package.json 的 "types" 字段中添加 "index.d.ts",这样当他人使用你的库时,他们就能获得类型提示。然而,实际上,这里可以直接将源码文件名填入 "types" 字段,即 "types": "index.ts"。这样不仅能够提供类型提示,甚至在某些编辑器中,ne源码用户可以点击源码进行深入查看。
但你可能会说,我不希望让别人看到我的源码。
如果你认为你的类型描述足够清晰,且用户理解了如何使用库,那么确实不必公开源码。然而,如果类型说明不够详尽,或者库的用法难以理解,仅仅依赖类型提示并不能满足需求。此外,提供源码的便利在于用户可以直接在源码中查找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: 分别用于类型等同性判断和对象属性的必填、可选、只读和可修改性判断。
尽管这些工具可能在实际开发中不常用,但它们有助于提升对泛型的熟悉度。作者计划转向业务开发,未来可能会有更多关于泛型内容的分享。2024-11-27 21:07
2024-11-27 21:04
2024-11-27 20:49
2024-11-27 20:32
2024-11-27 19:18
2024-11-27 18:57