很多时候,我们可能想要用 typescript 语言来创建一些模块,并提交到 npm 供别人使用, 那么在 2018 年,如果我想要初始化这样的一个模块,我需要做哪些步骤呢?...: 答案是:创建一个优雅的,对开发者友好的模块,至少需要以下 15 个步骤 初始化文件夹,初始化 git 仓库,初始化 npm,初始化 tsc 修改 tsconfig.js 配置 添加 npm 脚本 添加...写一个单元测试示例 设置一些有用的 npm 脚本 完善 package.json 的描述信息 提交代码到 git 仓库 发布包到 npm 本篇文章里,我会列出每个步骤的详细说明。...所以如果你需要实际创建项目的时候,你可以选择 clone 我提供的样板项目 来开始一个新的 ts 模块的开发,主要步骤如下: git clone https://github.com/xiaomingplus...写一个单元测试示例 在 src 文件夹下新建一个 __tests__的文件夹来存放测试用例文件,新建一个 Greeter.test.ts文件,写入: import { Greeter } from ".
在 TypeScript 中,如何导入一个默认导出的变量、函数或类?...在 TypeScript 中,如果要导入一个默认导出的变量、函数或类,可以使用 import 关键字结合 default 关键字来引用默认导出的成员。...假设在一个 TypeScript 文件中有以下默认导出的变量和函数: // file.ts const variable1 = 123; export default function() { /...在 TypeScript 中,如何在一个文件中同时导出多个变量或函数? 在 TypeScript 中,使用 export 关键字来同时导出多个变量或函数。有几种常见的方式可以实现这一点。...方式一:逐个导出 在一个文件中逐个使用 export 关键字导出每个变量或函数。
函数重载 TypeScript 提供函数重载的功能,用来处理因函数参数不同而返回类型不同的使用场景,使用时,只需为同一个函数定义多个类型即可,简单使用如下所示: declare function test...这些无不意味着映射类型在 TypeScript 有着举足轻重的地位。...类型断言 类型断言用来明确的告诉 TypeScript 值的详细类型,合理使用能减少我们的工作量。...它们是一种有效存储和表示布尔值集合的方法。...在 《深入理解 TypeScript》 中有一个使用例子: enum AnimalFlags { None = 0, HasClaws = 1 << 0, CanFly
使用Sequelize-typescript实现模型的继承 因为TypeScript的核心开发人员中包括C#的架构师,所以TypeScript中可以看到很多类似C#的痕迹,在模型的这方面,我们可以尝试利用继承减少一些冗余的代码...已知的属性 }) 通过继承来复用一些行为 上述的例子也只是说明了如何复用模型,但是如果是一些封装好的方法呢?...细心的同学可能会发现,getList的返回值是一个Animal[]类型的,所以上边并没有leg属性,Bird的两个属性也是如此。...我们通过在函数上边添加一个范型的定义,并且添加限制保证传入的范型类型一定是继承自Animal的,在返回值转换其类型为T,就可以实现功能了。...一些简单的示例,只为体现出三者(SQL、Sequelize和Sequelize-typescript)之间的区别,Sequelize中有更多高阶的操作,类似映射关系之类的,这些在Sequelize-typescript
在 TypeScript 中创建函数的语法是相同的,除了一个主要的补充:我们可以让编译器知道每个参数或参数应该具有什么类型。...我们还可以添加返回值的类型: function sum(a: number, b: number): number { return a + b; } 现在 TypeScript 将期望 sum 函数返回一个数字值...在本节中,我们将学习如何在 TypeScript 中将函数参数标记为可选。 要将函数参数转换为可选参数,请添加 ? 参数名称后面的修饰符。...注意:请记住,对 JavaScript 中的函数有效的所有内容也对 TypeScript 中的函数有效。 函数类型 在前面的内容中,我们向 TypeScript 中的函数的参数和返回值添加了类型。...结论 函数是 TypeScript 中应用程序的构建块,在本教程中,我们学习了如何在 TypeScript 中构建类型安全的函数,以及如何利用函数重载来更好地记录单个函数的所有变体。
undefined通常会出现在几个关键地方: 对象中未初始化或者不存在的属性 函数中被忽略的可选参数 用来表明请求值丢失的返回值 可能未被初始化的变量 TypeScript拥有处理上述所有问题的工具。...当你对一个对象访问并不存在的属性时,JavaScript将会返回undefined,而不是报错。 在TypeScript严格模式下,这意味着下面几种情况。...首先,如果你不告诉TypeScript一个属性是可选的,TypeScript会期望这个值被显式设置。...这是因为Array.prototype.find 在没有找到指定值的情况下会返回undefined。...使用可选链 在现代TypeScript中(当然也包括现代JavaScript),有一些优雅的功能,可以让你的生活更加轻松。假设你有一个较为复杂的类型: type Foo = { bar?
TypeScript 中的函数 我们可以定义函数参数和返回值的类型: // 定义一个名为 circle 的函数,它接受一个类型为 number 的直径变量,并返回一个字符串 function circle...((s) => s.song === whoSangThis); console.log(single.artist); singles.find 并不能保证它一定能找到这首歌 — 但是我们已经编写了下面的代码...通过将 strictNullChecks 设置为 true, TypeScript 将抛出一个错误,因为在尝试使用它之前,我们没有保证 single 一定存在: const getSong = () =...TypeScript 基本上是告诉我们在使用 single 之前要确保它存在。...下面是一个简单的例子,展示了当我们使用带有 typeof 的 if 语句时,TypeScript 如何将不太特定的 string | number 缩小到更特定的类型: function addAnother
因为我也是 TypeScript 的初学者,所以无法保证翻译百分之百准确,若有错误,欢迎评论区指出; 翻译内容:暂定翻译内容为 TypeScript Handbook,后续有空会补充翻译文档的其它部分;...即使没有给参数添加类型注解,TypeScript 也会检查你传递的参数的个数是否正确 返回值类型注解 你也可以给返回值添加类型注解。...,因为 TypeScript 会基于 return 语句推断出函数返回值的类型。...当一个函数出现在某个地方,且 TypeScript 可以推断它是如何被调用的时候,该函数的参数会被自动分配类型。...大多数情况下,你可以根据个人喜好选择其中一种使用,TypeScript 也会告诉你它是否需要使用另一种声明方式。
帮助类型检查器缩小类型的另一种常见方法是在它们上放置一个明确的 “标签”: interface UploadEvent { type: "upload"; filename: string;...el is HTMLInputElement,作为返回类型告诉类型检查器,如果函数返回true,则 el 变量的类型就是 HTMLInputElement。...类型保护是可执行运行时检查的一种表达式,用于确保该类型在一定的范围内。 换句话说,类型保护可以保证一个字符串是一个字符串,尽管它的值也可以是一个数值。...例如,如果你在一个数组中进行一些查找,你可能会得到一个 nullable 类型的数组: const supermans = ["Qinhw", "Pingan8787", "Semlinker", "Kaquko...三、总结 理解 TypeScript 中的类型收窄将帮助你建立一个关于类型推断如何工作的认知,进一步理解错误,它通常与类型检查器有更紧密的联系。
,我们告诉类型检查器:username,即使它自己无法检测到该属性,也可以期望该属性被初始化。...[1] 协变和逆变维基上写的很复杂,但是总结起来原理其实就一个。 子类型可以隐性的转换为父类型 说个最容易理解的例子,int和float两个类型的关系可以写成下面这样。...let f3: (x: Cat) => void; f1 = f2; // 启用 --strictFunctionTypes 时错误 f2 = f1; // 正确 f2 = f3; // 错误 第一个赋值语句在默认的类型检查模式中是允许的...写到此处,逼死了一个菜鸡前端。 总结&参考 How strict is Typescript’s strict mode?[2] 应该怎么理解编程语言中的协变逆变?...[3] TypeScript 严格函数类型[4] 在面试的过程中,常被问到为什么Typescript比JavaScript好用?
新功能 更快的持续构建 —— 使用 --incremental标志告诉 TypeScript 保存上次编译中有关项目的信息。...来自泛型函数的高阶类型推断 —— 在调用返回函数类型的泛型函数的类型参数推断期间,TypeScript 将会(视情况而定)从泛型函数参数把类型参数传递给函数返回值类型。...属性 array 字面量成为 readonly 元组 对globalThis的类型检查 —— 对ECMAScript 的 globalThis 类型检查的新支持 —— 一个全局变量,它指的是全局范围。...globalThis 提供了一种访问全局范围的标准方法,可以在不同环境中使用。 将参数转换为解构对象—— 实现了一个新的重构,将现有函数转换为使用此“命名参数”模式。...在存在多个参数的情况下,TypeScript 将提供重构以将参数列表转换为单个解构对象。 可以到官方发布说明了解有关 TypeScript 3.4 所有新功能的更多信息。
,我们告诉类型检查器:username,即使它自己无法检测到该属性,也可以期望该属性被初始化。...[1] 协变和逆变维基上写的很复杂,但是总结起来原理其实就一个。 子类型可以隐性的转换为父类型 说个最容易理解的例子,int和float两个类型的关系可以写成下面这样。...let f3: (x: Cat) => void; f1 = f2; // 启用 --strictFunctionTypes 时错误 f2 = f1; // 正确 f2 = f3; // 错误 第一个赋值语句在默认的类型检查模式中是允许的...写到此处,逼死了一个菜鸡前端。 总结&参考 参考文章: How strict is Typescript’s strict mode?[2] 应该怎么理解编程语言中的协变逆变?...[3] TypeScript 严格函数类型[4] 在面试的过程中,常被问到为什么Typescript比JavaScript好用?
正文从这开始~~ 电影《降临》中有一个观点,语言会影响人的思维方式,对于前端工程师来说,使用 typescript 开发无疑就是在尝试换一种思维方式做事情。...举例来说,比如说我们用 TS 定义一个函数,TS 会要求我们对函数的参数及返回值有一个明确的定义,简单的定义一些类型,却能帮助我们定位函数的作用,比如说我们设置其返回值类型为 void ,就明确的表明了我们想利用这个函数的副作用...const a = document.getElementById("a") 对我自己来说,使用 TS 之前,我忽略了document.getElementById的返回值还可能是 null,这种不经意的忽略也许在未来就会造成一个意想不到的...第三方的库,如何得到类型支持 我们很难保证,第三方的库都原生支持 TS 类型,在你使用过一段时间 TS 后,你肯定安装过类似 @types/xxx 的类型库,安装类似这样的库,实际上就安装了某个库的描述文件...TS 每隔几个月就会发布一个新的小版本,每个小版本在 TypeScript 官方博客[3] 上都会有专门的说明,可用用作跟进学习 TS 的参考。
调试 JavaScript 中的异步代码有时就像在雷区中穿梭。你不知道 console.log 会在何时何地打印出来,也不知道代码是如何执行的。...no-promise-executor-return 该规则不允许在 Promise 构造函数中返回值。...该规则不会阻止你在 Promise 构造函数中的嵌套回调内返回值。请务必使用 resolve 或 reject 来结束promise。...当函数的第一个参数名为 err 时,就会触发该规则。在大型项目中,经常会发现不同的错误命名方式,如 e 或 error。...Promise 的值是有效的 JavaScript(它会立即解析),但这往往表明程序员出错了,比如在调用一个返回 Promise 的函数时忘记加上括号。
如何编写 Typescript 声明文件 使用TypeScript已经有了一段时间,这的确是一个好东西,虽说在使用的过程中也发现了一些bug,不过都是些小问题,所以整体体验还是很不错的。...=> number // 定义函数 type Key = number | string // 多个类型 组合类型 以及在TypeScript中有着很轻松的方式针对type进行复用,比如我们有一个...首先,在接口中有两种方式可以定义一个函数,一个被定义在实例上,一个被定义在原型链上。...中使用函数重载,你会得到一个错误的结果,还是拿上边的build函数来说,如果在interface中声明,然后在class中实现,那么无论怎样调用,返回值的类型都会认为是any。...官方文档中有针对如何编写声明文件的模版,可以参考:传送阵 参考资料 keyof Record ReturnType 及其他的内置函数
变量声明在 TypeScript 中,可以使用 let 和 const 关键字来声明变量。...与 JavaScript 不同,TypeScript 还引入了 var 关键字,但通常建议使用 let 或 const 来声明变量。使用 let 声明的变量可以被重新赋值,而且只在块级作用域内有效。...使用 const 声明的变量是常量,不可被重新赋值,而且只在块级作用域内有效。...void 类型表示没有返回值的函数。never 类型表示永远不会有返回值的函数或者总是会抛出异常的表达式。unknown 类型表示未知类型的值,它比 any 更加严格。...类型断言类型断言是一种告诉编译器某个值的类型的方式。可以使用 或者 值 as 类型 的语法进行类型断言。
在两年后的今天,我可以告诉你 - 决定使用TypeScript对项目和我的职业生涯来说是个不错的选择。但是,如果你认为TypeScript开发人员的生活总是称心如意的,那么你最好继续阅读。...如果你现在处于同样的境遇 - 我确切的告诉你:它不仅仅是在webpack配置中加一个loader。...类库支持 另一个非常不愉快的经历与TypeScript支持的类库数量有关。 通常,如果你是某个人npm包的作者,你可以随时使用有效的JavaScript包。有时,您还会公开包的ES6源代码。...在右边 - 描述错误信息.. 类 ES6中有类,所以你可能之前用过它。但是在TypeScript类中有一些额外的功能,可能EcmaScript的未来会实现这些功能。...我敢保证,如果我同时选择了一个新框架(比如说Angular)和一种新语言(在此指的是TypeScript),我会被按在地上摩擦。 总结 我会向你推荐TypeScript吗?当然会。
前端一直都需要枚举 我敢保证,前端的同学都会万分肯定地告诉大家:我们从来没有写过枚举。那是因为虽然ECMAScript将enum作为保留字,但至ES2020为止还没有提出枚举的实现规范。...而且在一般规模的项目当中,往往不止一个枚举类型,复制粘贴确实可以解决问题,但真心不优雅。 而TypeScript内置枚举的语言实现恰恰能解决这个问题。...const enum高效的编译时内联 官方文档明确写出“大多数情况下,枚举是十分有效的方案。 然而在某些情况下需求很严格。...需求:DialogModes.NO在ExtendScript中返回值为DialogModes.No本身,编译后的JavaScript中必须保留DialogModes.NO的代码形式。...所谓外部枚举,即使我们为了在TypeScript开发环境下,更好地使用某些已采用JavaScript编写的库,而被迫为其编写的枚举类型声明。
了不起: 在 JavaScript 中,变量的类型可以在运行时动态改变。而在 TypeScript 中,你可以在编写代码时为变量、函数参数和返回值等添加类型注解。...这样,在编译阶段就可以进行静态类型检查,发现潜在的类型错误,减少在运行时出现的错误。 同事: 这听起来很有用!那我该如何开始使用 TypeScript 呢?...同时,函数的返回值类型也被指定为 number。这样,当你在调用这个函数时,编译器会检查参数的类型是否正确,并且返回值也符合预期。 同事: 哇,这真的很方便!还有其他有用的功能吗? 了不起: 当然!...TypeScript 在开源社区中得到了广泛的应用,许多知名的开源项目都使用 TypeScript 进行开发。...类型声明文件以 .d.ts 后缀结尾,它告诉 TypeScript 如何与该库进行交互。 编译配置:TypeScript 提供了丰富的编译选项,你可以根据项目的需求进行配置。
在一些动态语言中,鸭子类型的常见用法就是假设给定值是符合我们预期的,你可以先尝试执行一个操作,然后我们再去处理不符合预期的情况下的异常。...相比之下,在 TypeScript 中,try-catch 则存在很多限制 — 你既不能根据抛出异常的原型定义不同的 catch 块,也不能确定抛出的到底是不是一个异常实例。...(); } } isDuck 的返回值类型中使用了 is 关键字,这在 TypeScript 中被叫做类型谓词(type predicates),类型谓词是一个返回布尔值的函数,可以用来做类型保护...换句话说,类型保护可以保证一个字符串是一个字符串,尽管它的值也可以是一个数字。 实际上它就是告诉 TypeScript 编译器给定的值是就是我们给定的那个类型。...const nums: number[] 毫不夸张的说,我认为这是 TypeScript 最几个版本中我觉得最有用的一个特性,其实算是修复了 TypeScript 类型推断的一个长期存在的缺陷,可以让捕获函数中的类型收窄逻辑变得更加简单
领取专属 10元无门槛券
手把手带您无忧上云