几周前，我发表了《Intermediate TypeScript and React Handbook》
它收到了很多人的意见，我也收到了几封邮件。大多数是 "感谢 "的邮件，但也有其他邮件，比如。
"......我是编程新手，TypeScript是什么？"
还有：
"感谢这本免费电子书，但作为初学者，我应该如何学习TypeScript？"
我在一开始就解释过，这本手册是为已经知道一些TypeScript的中级开发人员准备的--但这何时能阻止任何人下载免费资源呢！？:)
所以在本指南中，我决定用我希望在学习TypeScript时拥有的文章来回答这些邮件中的疑问。
现在，如果你还在阅读，我将假设你是TypeScript的初学者。
系好安全带，你将会有一段有趣的旅程。
像5岁时那样解释TypeScript
我的教学方法始终如一：
如果你不能向5岁的孩子解释，那么也许你对这个主题的了解还不够深。
与其用大量的技术术语来压制你，我们不如尝试一些不同的东西。
让我们用一个你永远不会忘记的比喻。
你上次去杂货店是什么时候？
考虑一下TypeMart。
The TypeMart杂货店
TypeMart是你典型的大杂货店。
你想在工作之余拿起各种杂货？他们已经帮你解决了。
另一方面，这里有JMart。
JMart杂货店
JMart是一家小型杂货店，适合快速采购。
在我居住的柏林，我们称之为[Spätis](allaboutberlin.com/glossary/Sp…
但我相信你不是来上德语课的。
对我们来说，重要的是杂货店，JMart和TypeMart是如何运作的。
JMart和TypeMart是如何工作的
在JMart，你进入商店，找到你需要的杂货，然后拿过去给收银员：
走到收银台付账
在这一点上，你不太清楚你所挑选的日用品的价格是多少。
好吧，这就是为什么你要到收银台去的原因
收银员拿着你的物品，扫描它，并告诉你它的价格。
如果他们的工作做得 "更好"，他们会根据自己的想法（或他们放在抽屉里的一些手册目录）来告诉你这个物品的价格。
收到收银员的账单
这个过程似乎很脆，但孩子们却很好用!
这些收银员聪明得很。没有任何项目是不允许的。而且他们知道每件物品的价格。
在一个美丽的星期二，你决定去试试TypeMart。
你很快就意识到，在TypeMart，事情是不同的。
"那些讨厌的大商店，"你可能会说。
与JMart不同，他们对店里的每样东西都有价格标签：
一篮子带价格标签的水果
他们剥夺了你的兴奋感和收银员计算账单时的表情。
另一方面，它们给你的是某种保证。
没有惊喜！你知道你的每件物品的价格。
你清楚地知道你买的每件东西的价格。
这对你钱包拮据的日子很有利。
每一分钱都很重要。
为什么这个比喻很重要？
你的直觉是正确的：
JMart代表JavaScript。Typemart，TypeScript。
在这个比喻中，JMart代表JavaScript，TypeMart代表TypeScript。
当你去超市的时候，有一个不成文的合同：他们承诺以合理的价格提供你需要的东西。
而你承诺为你所买的东西付钱（除非你在商店里偷东西，否则不要这样做）。
代码也是如此。
这是一个不成文的合同，但却是一个清晰而残酷的合同。
你的合同是与你的应用程序的用户签订的。而你承诺你的应用程序是有效的。
考虑一个像Google meet这样的电话会议应用的例子：
谷歌会议的网络界面。来源：shrtm.nu/L0yk
Google meet的承诺是你总是能够进行视频通话。他们还承诺，当你和你的伙伴聊天或快速观看TikTok时，你可以将按钮静音。
好在他们听不到你的声音!
或者你是这么想的？
想象一下，如果这个静音按钮没有做到它所承诺的那样。
你的秘密就会消失。而你对谷歌的信任也随之消失。
你写的应用程序也是如此。
你承诺一个可以工作的应用程序，而你的用户相信这是事实--假设你已经赢得了他们的信任。
现在让我们把这个问题带回家。
在JMart和TypeMart中，货物是金钱。对于软件，货物是数据。
假设你有一个基本的计数器应用程序：
一个基本的计数器应用的用户界面
你的用户看到的是一个花哨的用户界面，但在引擎盖下，真正创造奇迹的是你增加或减少的计数器变量。
通过JMart（类似于JavaScript），商品没有被贴上标签（价格标签）。你不知道任何东西要多少钱。你到收银台去迎接你的命运。
这类似于JavaScript的工作方式。
你定义和操作各种变量，但没有明确的标签说明这些变量是什么。
你相信你所写的东西，并把它传递给JavaScript编译器，以迎接你的命运。
考虑一下下面这个微不足道的JavaScript代码：
const JMart = {
bananas: true,
apples: true,
mangos: true
}
在一个标准的JavaScript应用程序中，你可以去写以下内容：
const myOrder = JMart.cars.price
尽管cars ，但在JMArt 对象上并不存在，也没有明确的标签来定义。
所以，在你写代码的时候，你可能不知道这行代码是有问题的......直到你去收银台迎接你的命运。
这里的收银员是指JavaScript解释器。通常情况下，当你在浏览器中运行代码时就会发生这种情况。
如果你这样做，你就会得到一个错误，内容是：can't read price of undefined 。
如果你把这段代码（错误地）运到生产中，你的用户也会遇到这个丑陋的错误。
你刚刚损害了他们对你的应用程序的信任。
有了TypeScript，情况就不同了。每一块数据都被 "标记 "了，就像在TypeMart中一样。
在你去收银台（也就是浏览器）运行代码之前，你可以知道你的应用程序是否在正常工作
TypeScript编译器会抛出一个错误，让你知道你在访问一个不正确的值时犯了一个错误。
这发生在你的代码编辑器中，在你用浏览器打开应用程序之前。
就像在TypeMart买一件你买不起的杂货，你看到了价格标签。
你知道你的钱包里有什么。可以说，你已经被警告过了。
这就在这里，是你应该知道的TypeScript和JavaScript之间的主要初步区别。
TypeScript是带有类型语法的JavaScript。
在这里，类型是围绕着你的杂货（数据）的标签，告诉你每一段代码到底代表什么。
考虑一下下面这个微不足道的JavaScript例子：
const myFunction = (a, b) => {
return a * b
}
在TypeScript中，这段代码可能看起来像这样：
const myFunction = (a: string, b: string) => {
return a * b
}
请注意，这看起来与JavaScript的代码几乎一样。
但它有一个主要的区别：数据a 和b 是'labelled' ：
类型函数的参数类型注释
这段代码特别指出，a 和b 中预期的myFunction 是字符串。
有了这些信息（称为类型注释），TypeScript现在可以在你写代码时显示错误。
在TypeScript操场上查看这段代码：shrtm.nu/FlC0
这些错误通常会以红色斜线的形式呈现。类似于Microsoft Word等应用程序中的错误。
然后你可以将鼠标悬停在这些线条上，查看错误的细节。
TypeScript错误的细节
在这个简单的例子中，错误的关键是乘法运算不应该在字符串上运行。
非异常错误
如果你是一个更有经验的JavaScript开发者，你已经可以注意到上面的代码例子在标准JavaScript中没有抛出错误：
const myFunction = (a, b) => {
return a * b
}
如果你在JavaScript中计算“1” * "6" ，你会得到6 。
在内部，JavaScript将字符串强制转换成数字，并执行乘法运算。
这些在JavaScript中不会失败，但在TypeScript中出错的错误，被称为非异常错误。
这些都是为了帮助你防止你的应用程序中出现讨厌的错误。
在你的TypeScript之旅的这个阶段，你不一定要担心这个问题，但它值得一提。
正如你所看到的，TypeScript在帮助你捕捉代码中不需要的行为方面走得更远。
解决这个问题的一个简单方法是明确地输入参数，也就是说，a 和b 作为数字。
const myFunction = (a: number, b: number) => {
return a * b
}
这样就不会出现错误了。
不要因为Typescript让你注意到这些非异常错误而责备它。
它们是你的应用程序中潜在的错误来源。
Typescript来拯救💪🏽
总结
问问自己，我现在知道TypeScript是什么了吗？
是的，你知道了--从概念上来说。
TypeScript对于JavaScript来说，就像TypeMart对于JMart一样。
TypeScript给你提供了一种有组织的方式来标记你的应用程序中的数据，以防止未知的错误。
这些错误将在你去收银台之前被发现并提请你注意--也就是说，在你运行你的应用程序之前。
花点时间来消化这些信息。在你学习更多TypeScript时，这将是至关重要的。
给自己拍拍胸脯，然后去写你的第一个TypeScript应用程序。
