Skip to main content

moregeek program

typescript应该怎么学?_imooc慕课君的博客-多极客编程

作者| 慕课网精英讲师 Lison

如果自学TypeScript,到底要如何学呢?

1.2.1 学会看文档

英文官方文档始终是及时更新的。但即便是官方的文档,有一些更新在更新日志里写了,而新手指南里却没有及时同步更新,所以有时看指南也会遇到困惑,就是文档里写的和你实际验证的效果不一样。遇到这种问题,首先确定你使用的TypeScript版本,然后去更新日志里根据不同版本找对这部分知识的更新记录。如果找到了,看下这是在哪个版本做的升级;如果你不放心,可以把TypeScript版本降到这个版本之前的一个版本,再验证一下。

TypeScript 是有一个中文文档的,但是这个文档只是对英文文档的翻译。官方文档中的小疏漏,这个文档也没有做校验,而且更新是有点滞后的。所以想了解TypeScript的最新动态,还是要看英文官方文档的。

1.2.2 学会看报错

如果我们配置当书写的代码不符合规范,使用 error 级别来提示时,会和 TypeScript 编译报错一样,在问题代码下面用红色波浪线标出,鼠标放上去会有错误提示。所有如果我们使用了TSLint,遇到报错的时候,首先要区分是 TSLint 报错还是 TS 报错,来看下如何区分:

TypeScript应该怎么学?_搜索

上面这个报错可以从红色方框中看到,标识了 tslint,说明它是TSLint的报错。后面括号里标的是导致这条报错的规则名,规则可以在 tslint.json 文件里配置。示例中这条报错是因为 no-console 这个规则,也就是要求代码中不能有 console 语句,但是我们在开发时使用 console 来进行调试是很常见的,所以你可以通过配置 TSLint 关闭这条规则,这样就不会报错了。但我们应该遵守规范,当我们决定引入 TSLint 的时候,就说明这个项目对代码质量有更高的要求,我们不应该在书写代码遇到TSLint报错就修改规则,而是应该根据规则去修改代码。

TypeScript应该怎么学?_typescript_02

上面这个报错可以从红色方框中看到,标识了 ts,说明它是 TypeScript 编译器报的错误。在我们书写代码的时候,通过强类型系统,编译器可以在这个阶段就检测到我们的一些错误。后面括号里跟着的 2322 是错误代码,所有的错误代码你可以在文档的错误信息列表中查看。不过你一般并不需要去看文档,因为这里都会给你标出这个错误码对应的错误提示,而且这个错误信息根据你的编辑器语言可以提示中文错误信息。很明显这个错误是因为我们给 name 指定了类型为 string字符串 类型,而赋给它的值是123数值类型。

上面两种是在编写代码的时候就会遇到的错误提示。还有一种就是和 JavaScript 一样的,在运行时的报错,这种错误需要在浏览器控制台查看。如果你调试的是 node 服务端项目,那你要在终端查看。来看这个例子:

当我在代码中打印一个没有定义的变量时,在书写代码的时候会做提示,且当程序运行起来时,在浏览器控制台也可以看到报错。你可以打开浏览器的开发者工具(Windows系统按F12,Mac系统按control+option+i),在 Console 栏看到错误提示:

TypeScript应该怎么学?_错误信息_03

红色语句即错误信息。下面红色at后面有个文件路径main.ts,蓝色框中圈出的也是个文件路径,表示这个错误出现在哪个文件。这里是出现在main.ts中,问号后面的cd49:12表示错误代码在12行,点击这个路径即可跳到一个该文件的浏览窗口:

TypeScript应该怎么学?_搜索_04

在这里我们就能直接看到我们的错误代码被红色波浪线标记了,这样你修改起错误来就很明确知道是哪里出错了。

1.2.3 学会看声明文件

我们知道原来没有 TypeScript 的时候,有很多的 JS 插件和 JS 库,如果使用 TypeScript 进行开发再使用这些 JS 编写的插件和库,就得不到类型提示等特性的支持了,所以 TypeScript 支持为 JS 库添加声明文件,以此来提供声明信息。我们使用 TypeScript 编写的库和插件编译后也是 JS 文件,所以在编译的时候可以选择生成声明文件,这样再发布,使用者就依然能得到 TypeScript 特性支持。一些 JS 库的作者已经使用 TypeScript 进行了重写,有些则是提供了声明文件,一些作者没有提供声明文件的,大部分库都有社区的人为他们补充了声明文件,如果使用了自身没有提供声明文件的库时,可以使用npm install @types/{模块名}来安装,或者运用我们后面讲到的知识自行为他们补充。

看这些库的声明文件能够帮你提高对 TypeScript 的了解程度。因为可能你在实际开发中所接触的场景不是很复杂,运用到的 TypeScript 语法点也不是很全面,所以就会导致经常用的你很熟悉,不经常用的慢慢就忘掉了,甚至有的自始至终你都没有使用过。很多知识你只看理论知识,或者看简单的例子,是没法真正理解并深刻记忆的,只有在实际场景中去使用一下,才能加深理解。所以我们可以从这些库的声明文件入手,还有就是从 TypeScript 内置的 lib 声明文件入手。

安装好 TypeScript 后,我们可以在 node_modules 文件夹下找到 typescript 文件夹,里面有个 lib 文件夹,lib 文件夹根目录下有很多以 lib. 开头的 .d.ts 文件。这些文件,就是我们在开发时如果需要用到相关内容,需要在 tsconfig.json 文件里配置引入的库的声明文件,这个配置我们后面会讲到。先简单举个例子,比如我们要使用 DOM 操作相关的语法,比如我们获取了一个 button 按钮的节点,那么我们就可以指定它的类型为 HTMLButtonElement,那么我们再访问这个节点的属性的时候,编辑器就会给你列出 button 节点拥有的所有属性方法了;如果我们要用到这个类型接口,那我们就需要引入 lib.dom.d.ts 也就是dom这个 lib。这里如果你对一些提到的概念不明白,你可以先忽略,因为后面都会讲到。这里我要告诉你的就是,你应该学着看这些声明文件,看看它们对于一些内容的声明是如何定义的,能够帮你见识到各种语法的运用。

1.2.4 学会搜问题和提问

实际开发中,有时候你难免会遇到一些文档里没有提到的各种各样的奇怪问题。解决问题的途径有很多,请教有经验的人是最简单的啦,但前提是你身边有个随叫随到的大神,可这样的人一般很少有,所以还是看看我推荐给你的解决问题的途径吧:

途径1:百度 or Google

一般来说大众的问题都能在百度找到,但是开发问题 Google 能够帮你找到一些高质量的国外答疑帖,所以这两个搜索引擎你都可以试试,这个途径是你遇到问题之后的首选。

途径2:看issue

TypeScript 的问答确实要比很多框架或者基础知识的少很多。如果搜索引擎找不到,你可以到 github 上 TypeScript 的官方仓库,在issues里可以通过问题关键字搜索,看看有没有人反馈过这个问题。这里要注意,搜索的是关键字,而不是把你的报错信息完整输进去,这样基本很难搜到。你应该挑选出错误信息中比较具有代表性的单词进行搜索,因为这和搜索引擎不一样,issues 提供的搜索还不是很强大。

途径3:去提问

如果上面两个途径都没找到,你只能自行提问了,这也是一个造福后人的方法。比较受欢迎的提问网站:国内你可以试试 segmentFault,国外可以试试stackOverflow,还有就是 TypeScript的issues 了。但要注意如果在 stackOverflow 和 issues 中提问,最好最好用英文。

1.2.5 看优秀项目源码

这个学习方法是比较高阶的了,看一些优秀的开源项目源码可以为你提供思路。你还可以借鉴到同一个逻辑不同人的实现方式。源码去哪里找呢,当然首选是 Github 了,进入 Github 后,你可以在顶部的搜索栏搜索你想要找的项目关键字,比如你想找个Todo应用的项目源码,那就搜"todo"。然后在语言栏选择 TypeScript,这样就会筛选出使用 TypeScript 编写的项目:

TypeScript应该怎么学?_搜索_05

TypeScript应该怎么学?_typescript_06

最后选择 star 较多的项目,说明这个项目受到了更多人的认可:

TypeScript应该怎么学?_typescript_07

好了,以上就是自学 TypeScript 的一些方法途径。

©著作权归作者所有:来自51CTO博客作者imooc慕课君的原创作品,请联系作者获取转载授权,否则将追究法律责任

学会二阶思维,你就能像巴菲特一样思考了_华为云开发者社区的博客-多极客编程

摘要:养成二阶思维的习惯是一个漫长、痛苦的过程,但坚持下来,总会收获很大。本文分享自华为云社区《​​二阶思维​​》,作者:元闰子。事情往往不是你想象的那样,有时候,看似解决了问题,却在不经意间,引发了更严重的后果。帮助我们思考、决策、解决问题的最有效方法是,运用二阶思维。什么是二阶思维?一阶思维是单纯而肤浅的,几乎人人都能做到;二阶思维则是深邃、复杂而迂回的,能做到的人少之又少。—— 霍华德·马克

什么是 webpack?_imooc慕课君的博客-多极客编程

作者| 慕课网精英讲师 三水清随着 Web 前端的不断发展,传统网页开发正在逐渐往 Web 应用(Web Application,简称 WebAPP)的开发方式转变,页面开始变得越来越复杂,复杂的应用场景必然引起技术的进步,还会出现新的技术手段来解决现有问题。前端模块化和工程化的呼声越来越高,随着前些年大行其道的 Grunt、Gulp、FIS 等构建工具的发展,带动了一波前端工程化热潮。近几年,经

#yyds干货盘点#今天讲讲时间管理_文本、的博客-多极客编程

有朋友说工作一天基本上没有时间和精力去阅读了,这里讲讲我的时间管理。​我并不是读书狂,忙里偷闲看的这些书并不算多,其中技术类的书需要精神高度集中,读完一章赶紧做些练习巩固。非技术书主要是上下班的路上、饭后休息和晚上睡觉前读完的。很多畅销书,比如《番茄工作法》、《小强升职记》、《高效能人士的七个习惯》等等,但是发现这些书虽然理论性强,但在自己身上的实践却差强人意,在自身综合素质并不很高的情况下采用这

javascript中常用数据类型,你知道几个?_imooc慕课君的博客-多极客编程

作者| 慕课网精英讲师 Lison这篇文章我们了解一下 JavaScript 中现有的八个数据类型,当然这并不是 JavaScript 中的所有数据类型,而是现在版本的 TypeScript 支持的基本类型,在学习基础类型之前,我们先来看下如何为一个变量指定类型:为一个变量指定类型的语法是使用"变量: 类型"的形式,如下:let num: number = 123如果你没有为这个变量指定类型,编译

【项目管理过程的五个阶段是什么?】_王小呆的博客-多极客编程

项目管理过程的五个阶段一般包括:启动、规划、执行、监控、收尾。但很多人对项目管理的全流程只知道这五大过程组。这五大过程组之间的关系是怎样的?项目管理的全流程又是什么样的?在每个流程中有什么核心工作是项目经理需要重点关注的?下面本文就围绕五大过程组以及以上问题进行介绍:一、项目的基本流程项目的基本流程是一个可循环的流程,它虽然建立在项目管理的流程之上,但还是存在一定差异:二、项目管理流程的详细介绍1

一软一硬:记录我的工作电脑两次出现性能问题的分析思路和解决过程_汪子熙的 sap 技术分享的博客-多极客编程

作为一个程序员,每天工作中糟心的事情之一,莫过于自己用来编码的计算机,运行速度忽然变得奇慢无比。尤其像我这种年过四旬仍然在一线从事编码工作的老程序员来说,只有靠不断提高单位时间的产出效率,来弥补和年轻程序员体力和精力上的差距。所以工作电脑性能忽然急剧下降,是一件让我无法接受的事情。 作为一个在 SAP 领域工作了 15 年的开发人员(详情参考我的文章:一个 SAP 开发工程师的成长史),我已经记不

function源码解析与实践_京东云官方的博客-多极客编程

作者:陈昌浩1 导读if…else… 在代码中经常使用,听说可以通过 Java 8 的 Function 接口来消灭 if…else…!Function 接口是什么?如果通过 Function 接口接口消灭 if…else… 呢?让我们一起来探索一下吧。2 Function 接口Function 接口就是一个有且仅有一个抽象方法,但是可以有多个非抽象方法的接口,Function 接口可以被隐式转换

【服务器数据恢复】hp服务器raid5多块磁盘先后掉线导致raid5不可用的数据恢复案例_sun的博客-多极客编程

服务器数据恢复环境: 惠普ML系列某型号塔式服务器,5块SAS硬盘组建raid5磁盘阵列。 服务器故障&分析: 服务器中的一块硬盘掉线,由于磁盘阵列的冗余特性,服务器正常运行,用户没有察觉。直到另外一块硬盘掉线,服务器崩溃。用户联系我们要求恢复存储在服务器中的设计素材及客户数据。 北亚服务器数据恢复工程师检测故障服务器的底层数据,没有发现明显的同步痕迹。 服务器数据恢复过程: 1、将故障服

envoy与nginx的八大对比_枫叶飘飘的博客-多极客编程

Envoy与Nginx架构层面的对比Nginx是Envoy出现之前网络通信中间件领域非常有代表性的开源系统,功能强大,性能出色,扩展性很强,已经形成了强大的生态,成为HTTP流量管理领域事实上的标杆。Envoy作为后起之秀,虽然定位和目标上与Nginx有不少差异,但架构设计层面,Envoy和Nginx都有很多的可取之处,下面会从功能定位、整体网络模型、连接处理、请求解析、插件机制、配置管理、部署和

kvc原理与数据筛选_京东云官方的博客-多极客编程

作者:宋宏帅1 前言在技术论坛中看到一则很有意思的 KVC 案例:interface Person : NSObject@property (nonatomic, copy) NSString *name;@property (nonatomic, assign) NSInteger age;@endPerson *person = [Person new];person.name = @"Tom

zookeeper和chubby[分布式协调系统]_wx6369307062d07的博客-多极客编程

阅读目录前言ChubbyZookeeperZookeeper和Chubby的异同点前言大规模分布式系统需要解决各种类型的协调需求:当集群中有新的进程或服务器加入时,如何探测到它的加入?如何能够自动获取配置参数?当配置信息被某个进程或服务器改变时,如何实时通知整个集群中的其他机器?如何判断集群中的某台机器是否还存活 ?如何选举主服务器,主服务器宕机,如何从备选服务器中选出新的主服务器?以上问题的本质

信息论与编码:随参信道特性_wx62e40d60030b6的博客-多极客编程

随参信道的传输特性主要依赖于传输媒质特性,以电离层反射信道、对流层散射信道为主要代表。 随参信道是一种信道传输特性随时间随机快速变化的信道, 包括陆地移动信道,短波电离层反射信道、超短波微波对流层散射信道、超短波视距绕射信道。随参信道的传输媒介具有以下三个特点:对信号的衰耗(衰减)随时间而变;传输的时延随时间而变;会产生多径传播的效果。多径传播 :指由发射点出发的电波可能经过多条路径到达接收点。每