typescript 使用

by Jonathan Creamer

通过乔纳森·克里默

为什么不使用TypeScript？ (Why would you NOT use TypeScript?)

In a world where JavaScript is arguably the most popular tool for building software these days, it seems like it’s everywhere now. With Node.js, it’s on the backend, with Electron it’s native on your machine, with React Native, it’s native on your phone. There’s no doubt that JavaScript is nothing but at least pervasive across so many ecosystems.

在当今可以说JavaScript是最流行的用于构建软件的工具的世界中，似乎无处不在。 使用Node.js，它在后端，使用Electron，它在您的计算机上是本机，而使用React Native，它在您的手机上是本机。 毫无疑问，JavaScript至少在如此众多的生态系统中无处不在。

So, the next question I have is, if JavaScript is so popular, then TypeScript by nature of what is is, also should be popular. After all, in case you didn’t realize it…

因此，我要问的下一个问题是，如果JavaScript非常流行，那么TypeScript本质上也应该会流行。 毕竟，如果您没有意识到……

Any JavaScript you can possibly write which is at least ECMA stage 3 is valid TypeScript.

您可以编写的至少在ECMA 3级以上的任何JavaScript都是有效的TypeScript。

VSCode (VSCode)

First and foremost, if you’re not using Visual Studio Code to write JavaScript, you should be, so go get it, and also go get all this stuff from Burke Holland.

首先，最重要的是，如果您不使用Visual Studio Code编写JavaScript，则应该这样做，因此， 请获取它 ，并从Burke Holland获得所有这些东西 。

Under the covers, the TypeScript compiler will do a lot of amazing things for you without you even having to think twice about it. The reason it’s able to do this is, VS Code is running your JavaScript through the TypeScript compiler, whether you realize it or not.

在幕后，TypeScript编译器将为您做很多令人惊奇的事情，而您甚至不必三思而后行。 之所以能够做到这一点，是因为无论是否意识到，VS Code都通过TypeScript编译器运行JavaScript。

Microsoft/TypeScriptTypeScript is a superset of JavaScript that compiles to clean JavaScript output.github.com

Microsoft / TypeScript TypeScript是JavaScript的超集，可进行编译以清除JavaScript输出。 github.com

On top of that, it also uses something called Automatic Type Definitions using the phenomenal Definitely Typed library of type definitions to automatically download types for thousands of popular JavaScript libraries.

最重要的是，它还使用称为“自动类型定义”的东西，使用惊人的类型定义的“ 确定类型”库来自动下载成千上万个流行JavaScript库的类型。

从JS到TS，TypeScript助您一臂之力 (From JS to TS, TypeScript’s got you)

In the following example, we’re simply formatting a price string.

在下面的示例中，我们只是在格式化价格字符串。

It could be easy to forget that if pass a string here, this function will asplode because toFixed doesn't exist on a string.

可能很容易忘记，如果在此处传递字符串，则该函数将逐渐扩展，因为字符串上不存在toFixed 。

Simply adding types can save you runtime bugs…

只需添加类型即可节省运行时错误……

But, there’s even better news…

但是，还有更好的消息……

You may or may not already be a big user of JSDoc, but if you are, you will be pleased as punch to know that as of a recent version of TypeScript, you can add // @ts-check to the top of a JavaScript file, and get typechcking in it!

您可能已经或可能不是JSDoc的大用户，但是如果您是JSDoc的大用户，那么您将很高兴知道，对于最新版本的TypeScript，可以在JavaScript的顶部添加// @ts-check文件，然后输入typechcking！

Here’s more info about what all you can do with JSDoc… https://github.com/Microsoft/TypeScript/wiki/JSDoc-support-in-JavaScript

这是有关使用JSDoc可以做什么的更多信息…… https://github.com/Microsoft/TypeScript/wiki/JSDoc-support-in-JavaScript

With VSCode you can enable full type typechecking with the following User Settings option…

使用VSCode，您可以使用以下“用户设置”选项启用完整类型检查。

"javascript.implicitProjectConfig.checkJs": true

You can add a globals.d.ts file and declare things under the global namespace if you have any interfaces you want to define across the whole project.

如果要在整个项目中定义任何接口，则可以添加globals.d.ts文件并在全局名称空间下声明内容。

declare global {  interface IFormatPrice {}}

React (React)

Cool thing is, TypeScript also supports React out of the box by adding the following to your tsconfig…

很酷的事情是，TypeScript还通过将以下内容添加到tsconfig中来立即支持React。

{ "jsx": "react" }

Now for the real fun…

现在为真正的乐趣...

PropTypes are a great way to catch runtime React bugs. But the frustrating thing about them is, you don’t know if something is broken generally until your app builds, the browser or hot loading reloads, and you see a cryptic red error message in the console.

PropType是捕获运行时React错误的好方法。 但是关于它们的令人沮丧的是，您不知道某个东西是否通常被破坏，直到您的应用程序构建，浏览器或热加载重新加载，并且您在控制台中看到一个隐秘的红色错误消息。

Wouldn’t it be nice to just catch that bug while working on the component?

在处理组件时仅捕获该错误不是很好吗？

Now, check this out…

现在，检查一下...

It’s amazing to be able to get intellisense on props. You can start typing, or in VSCode hit Control + Space to pull open the Intellisense menu.

能够在道具上获得智能感知真是太神奇了。 您可以开始键入，也可以在VSCode中按Control + Space来打开Intellisense菜单。

You can even get intellisense on React classes as well…

您甚至还可以在React类上获得智能感知…

结论 (Conclusion)

Whether or not you decide to go full on TypeScript, it’s clear you can see many benefits even if you stick with pure JavaScript.

无论您是否决定全面使用TypeScript，很明显，即使您坚持使用纯JavaScript，也可以看到很多好处。

Originally published at jonathancreamer.com on February 2, 2018.

最初于2018年2月2日发布在jonathancreamer.com上。

翻译自: https://www.freecodecamp.org/news/why-would-you-not-use-typescript-67d0baa3eaca/

typescript 使用