本文由 IMWeb 首发于 IMWeb 社区网站 imweb.io。点击阅读原文查看 IMWeb 社区更多精彩文章。 1. 前言 2018年Stack Overflow Developer的调研(https://insights.stackoverflow.com/survey/2018/)显示,TypeScript已经成为比JavaScript更受开发者喜爱的编程语言了。 之前我其实对于typescript没有太多好感,主要是认为其学习成本比较高,写起代码来还要多写很多类型声明,并且会受到静态类型检查
TypeScript 最大的优势之一便是增强了编辑器和 IDE 的功能,包括代码补全、接口提示、跳转到定义、重构等。
—\ntheme: awesome-green\n—\n# 写在开头\n\n网络上大部分 Typescript 教程都在告诉大家如何使用类型体操更好的组织你的代码。\n\n但是针对于声明文件(Declaration Files)的相关内容却是少之又少。\n\n这篇文章中,我会带你着重讲述 TypeScript Declaration Files 的用法让你的 TS 功底更上一层。\n\n# TypeScript 模块解析规则\n\n在开始之前,我们先来聊聊 TS 文件的加载策略。\n\n> 掌握加载策略才会让我们实实在在的避免一些看起来毫无头绪的问题。\n\nTS 中的加载策略分为两种方式,分别为相对路径和绝对路径两种方式。\n\n## 首先我们来看看相对模块的加载方式:\n\nTypeScript 将 TypeScript 源文件扩展名(.ts、.tsx和.d.ts)覆盖在 Node 的解析逻辑上。同时TypeScript 还将使用package.jsonnamed中的一个字段types来镜像目的"main"- 编译器将使用它来查找“主”定义文件以进行查阅。\n\n比如这样一段代码:\n\nts\n// 假设当前执行路径为 /root/src/modulea\n\nimport { b } from './moduleb'\n\n\n此时,TS 对于 ./moduleb 的加载方式其实是和 node 的模块加载机制比较类似:\n\n+ 首先寻找 /root/src/moduleb.ts 是否存在,如果存在使用该文件。\n\n+ 其次寻找 /root/src/moduleb.tsx 是否存在,如果存在使用该文件。\n\n+ 其次寻找 /root/src/moduleb.d.ts 是否存在,如果存在使用该文件。\n\n+ 其次寻找 /root/src/moduleB/package.json,如果 package.json 中指定了一个types属性的话那么会返回该文件。\n\n+ 如果上述仍然没有找到,之后会查找 /root/src/moduleB/index.ts。\n\n+ 如果上述仍然没有找到,之后会查找 /root/src/moduleB/index.tsx。\n\n+ 如果上述仍然没有找到,之后会查找 /root/src/moduleB/index.d.ts。\n\n可以看到 TS 中针对于相对路径查找的规范是和 nodejs 比较相似的,需要注意我在上边已经额外加粗了。\n\nTs 在寻找文件路径时,在某些条件下是会按照目录去查找 .d.ts 的。\n\n## 非相对导入\n\n在了解了相对路径的加载方式之后,我们来看看关于所谓的非相对导入是 TS 是如何解析的。\n\n我们可以稍微回想一下平常在 nodejs 中对于非相对导入的模块是如何被 nodejs 解析的。没错,它们的规则大同小异。\n\n比如下面这段代码:\n\nts\n// 假设当前文件所在路径为 /root/src/modulea\n\nimport { b } from 'moduleb'\n\n\n+ /root/src/node_modules/moduleB.ts\n+ /root/src/node_modules/moduleB.tsx\n+ /root/src/node_modules/moduleB.d.ts\n+ /root/src/node_modules/moduleB/package.json(如果它指定了一个types属性)\n+ /root/src/node_modules/@types/moduleB.d.ts\n+ /root/src/node_modules/moduleB/index.ts\n+ /root/src/node_modules/moduleB/index.tsx\n+ /root/src/node_modules/moduleB/index.d.ts\n\ntypescript 针对于非相对导入的 moduleb 会按照以上路径去当前路径的 node_modules 中去查找,如果上述仍然未找到。\n\n此时,TS 仍然会按照 node 的模块解析规则,继续向上进行目录查找,比如又会进入上层目录 /root/node_modules/moduleb.ts ...进行查找,直到查找到顶层 node_modules 也就是最后一个查找的路径为 /node_modules/moduleB/index.d.ts 如果未找到则会抛出异常 can't find module 'moduleb'。\n\n> 上述查找规则是基于 tsconfig.json 中指定的 moduleResolution:node,当然还有 classic 不过
在程序设计中,为完成某一功能所需的一段程序或子程序,或指能由编译程序、装配程序等处理的独立程序单位;或指大型软件系统的一部分
导语:全面拥抱 TS 的时代,TS 已经成为日常开发中的重要部分。本文主要介绍 TS 声明文件的写法。 声明文件的定义 通俗地来讲,在 TypeScript 中以 .d.ts 为后缀的文件,我们称之为 TypeScript 声明文件。它的主要作用是描述 JavaScript 模块内所有导出接口的类型信息。 什么时候需要写 TS 声明文件 在日常的开发中,绝大多数时候是不需要我们单独去编写一个 TS 声明文件的。如果我们的文件本身是用 TS 编写的,在编译的时候让 TS 自动生成声明文件,并在发布的时候将
TypeScript 里,一条声明可能会创建命名空间、类型或值,比如声明 Class 时会同时创建类型和值:
JavaScript 处理代码的模块化有很多种办法,类似于AMD CommonJS UMD 等等。TypeScript 从2012年开始,已经支持了大部分的格式,但随着时间的推移,社区和JavaScript规范已经融合到一种称为ES模块(或ES6模块)的格式上。你可能知道import/export语法。
在 TypeScript 中,我们可以通过声明文件(.d.ts 文件)来为现有的 JavaScript 库提供类型定义,或者为现有的类型添加额外的属性和方法。这个过程通常被称为“类型声明扩展”。在这篇文章中,我们将详细探讨如何通过声明文件扩展类型定义。
ts-ignore 直接禁用对下一行代码的类型检查,其本质是 ignore 而不是 disable:
时间过得真快啊,转眼还有十多天就2021了。年前计划的目标还有好多没有实现,愧疚啊! 2020唯一让我值得骄傲的是找到了一份满意的工作,有足够的自己时间,来做自己的事情。坚持了100天的跑步,体重从185减到现在的157,我就不在这里做总结了,等年底最后一天,来一个年度总结。
JavaScript 有一个很长的处理模块化代码的历史,TypeScript 从 2012 年开始跟进,现在已经实现支持了很多格式。不过随着时间流逝,社区和 JavaScript 规范已经收敛为名为 ES 模块(或者 ES6 模块)的格式,这也就是我们所知道的 import/export 语法。
https://channel9.msdn.com/posts/Anders-Hejlsberg-Introducing-TypeScript
我们从中了解了声明合并其实指的就是编译器会针对同名的声明合并为一个声明,合并的结果是合并后的声明会同时拥有原先两个或多个声明的特性
TypeScript 诞生已久,优缺点大家都知晓,它可以说是JavaScript静态类型校验和语法增强的利器,为了更好的代码可读性和可维护性,我们一个个老工程都坦然接受了用TypeScript 重构的命运。然而在改造的过程中,逐步意识到TypeScript这门语言的艺术魅力
class 类名<T> { name!: T; hobby!: T; } # 这样这个类的所有类型为 number let 实例 = new 类名<number>();
作者 | Oghenevwede Emeni,Peng Cao 译者 | 核子可乐 策划 | 丁晓昀 微软在上周发布了 TypeScript 5.0 beta 版本,希望在助其瘦身之余简化使用方式、加快运行速度。此次公布的 beta 版还引入新的装饰器标准,使用户能够以可重用的方式自定义类及其成员。 相对于 TypeScript 4.9 在速度和大小方面的提升: 此次 beta 版的一大亮点,在于合并了新的装饰器标准,使用户能够以可重用的方式自定义类及其成员。TypeScript 项目经理
在短时间内有一个需求,原项目代码是 js,而我手里头的功能代码是 ts 的,需要将其合并。
Type又叫类型别名(type alias),作用是给一个类型起一个新名字,不仅支持interface定义的对象结构,还支持基本类型、联合类型、交叉类型、元组等任何你需要手写的类型。
其中 null/undefined 是 TypeScript 中任何类型的子类型。
在软件开发中,模块是一种组织和管理代码的方式。模块化可以将复杂的程序拆分为互相独立且可重用的部分,以便更好地组织代码、降低耦合性、增加可维护性和可扩展性。TypeScript 提供了丰富的模块功能,使得开发者可以更加方便地使用模块化思想来构建和组织自己的代码。本文将详细介绍 TypeScript 中的模块概念、模块的使用方法以及一些常见的模块模式。
compilerOptions ⽀持很多选项,常⻅的有 baseUrl 、 target 、 moduleResolution 和 lib 等。 compilerOptions 每个选项的详细说明如下:
相信经常关注前端技术的同学对 TypeScript 应该不陌生,或多或少看过一些关于 TypeScript 的文章。
从ECMAScript 2015开始,JavaScript引入了模块的概念。TypeScript也沿用这个概念
处理模块化代码的方式很多,JavaScript 在这方面有着悠久的历史。TypeScript 诞生于 2012 年,对许多模块化方案也实现了支持。但随着时间的推移,社区和 JavaScript 规范在一种名为 ES 模块(或者称为 ES6 模块)的方案上达成了共识。你可能听说过它的 import/export 语法。
不应该在模块中使用命名空间或者说将命名空间导出: 使用命名空间是为了提供逻辑分组和避免命名冲突,模块文件本身已经是一个逻辑分组,并且它的名字是由导入这个模块的代码指定,所以没有必要为导出的对象增加额外的模块层。
声明文件就是给js代码补充类型标注. 这样在ts编译环境下就不会提示js文件"缺少类型".
众所周知:JS中有这么几种类型的数据: Symbol,boolean,Number,Object[Array在js中也属于对象],undefind,null,String;
通过引入强类型系统,补充JS的短板。原生JS类型的灵活性导致在实际环境中可能会出现各种不确定的bug。通过使用TS,我们可以在开发阶段既预测这些可能由类型转换导致的错误,从而提前规避bug,开发出更健全的程序。
使用TypeScript已经有了一段时间,这的确是一个好东西,虽说在使用的过程中也发现了一些bug,不过都是些小问题,所以整体体验还是很不错的。
Weex 作为一种成熟的跨平台程序框架被运用到许多产品中,有赞也不例外。有赞零售移动端团队从 2018 年就开始使用 Weex 构建页面,据不完全统计,有赞零售移动端有超过300个页面使用到了 Weex 开发!显然,这是一个巨大的开发工程,同时我们也发现基于 JavaScript 的 Weex 开发给我们带来了诸多痛点:
几年前,彭博工程公司决定采用 TypeScript 作为一等语言。本文分享了我们在这一旅程中学到的一些见解和教训。
本文是阅读小册 「《深入浅出 TypeScript》」 的阅读笔记,对TypeScript感兴趣的同学请继续阅读吧。
在当今的 Web 开发世界中,TypeScript 作为一种强大的工具为自己赢得了一席之地,它弥补了 JavaScript 的灵活性和静态类型语言的鲁棒性之间的差距(至少在 JavaScript 实现自己的类型之前)。
ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块。
TypeScript 自问世以来,由于其灵活的设计和强大的 IDE —— vscode 的支持,变得越来越普及。以下附 Github Javascript 与 TypeScript 的 PR 数量趋势图。
TypeScript 的学习资料非常多,其中也不乏很多优秀的文章和教程。但是目前为止没有一个我特别满意的。原因有:
自Vue2.0发布以来,一直有开发者提出请求,希望能更好地集成TypeScript。从那时起,我们已经为大多数核心库( vue, vue-router, vuex)加入了官方的TypeScript类型声明。然而,当使用开箱即用的Vue API时,目前的集成还是有所欠缺。例如:TypeScript不能轻易地推断出Vue使用的默认基于对象的API中的 this类型。为了使我们的Vue代码与TypeScript更好地协作,我们需要使用vue-class-component装饰器,它允许我们使用基于类的语法来写Vue组件。
TypeScript是JavaScript的一个超集,支持ECMAScript6标准。
但其实 babel 也能编译 ts 代码,那用 babel 和 tsc 编译 ts 代码有什么区别呢?
Flutter 使用 Dart 语言进行开发,小 null 在写 Flutter 的过程中发现 Dart 和 Javascript/Typescript 有些相似之处~
TypeScript中的Object类型并不单指普通的对象类型,而是泛指非原始类型,也就是对象,数组和函数
接口(interface)可以用于对【对象的形状(Shape)】进行描述,当然也可以使用interface 描述 class
为了解决从 JavaScript 逐步迁移到 TypeScript 过程中遇到的痛点,FreeWheel 核心业务团队评估并提出了一套由 Protobuf 文件自动化生成 TypeScript 类型声明文件的流程,支持 Protobuf 文件的变化触发类型声明文件的自动更新。所有的 TypeScript 类型声明文件以微服务为单位储存,集中维护在公司级别的 TypeScript 中心化仓库里。
声明合并(Declaration Merging) 是 Typescript 的一个高级特性,顾名思义,声明合并就是将相同名称的一个或多个声明合并为单个定义。
当 noImplicitAny 配置属性被启用后,TypeScript 4.0 就可以使用控制流分析来推断类属性的类型。
在TypeScript中,type和interface都用于定义对象或类型的形状。它们在功能上看起来相似,但在使用方式和扩展方面有一些区别。
领取专属 10元无门槛券
手把手带您无忧上云