TypeScript 简介

介绍

大家好，我是 Darshan Ponikar，今天我们将讨论从 JavaScript 切换到 TypeScript！

因此，准备好解决您对 TypeScript 的所有疑问吧！

为什么选择 TypeScript？

我假设你完全不知道 TypeScript。TypeScript，顾名思义，是一种类型检查语言！

TypeScript 并不是一门全新的语言！TypeScript 是 JavaScript 的超集，这意味着你仍然可以使用 JavaScript 中的语法！

在我直接告诉您 TypeScript 中的工作原理之前，让我们先来谈谈我们最喜欢的语言 JavaScript。

JavaScript 是一门运行时语言！这意味着一切都发生在运行时。我们无法像编译 Java、C++ 和 C 那样编译 JavaScript。

//app.js

let num = 3 
console.log(typeof num) // this will print number
num = "I am String" 
console.log(typeof num) // this will print string 

因此，您可以声明变量并为其分配数字，甚至可以将字符串分配给同一个变量。如果您来自 Java 或 C++，您可能会觉得 JavaScript 很奇怪。

但有时这种怪异会让你发疯？

如果您正在使用大型 Web 应用程序，我假设您正在使用 React！

该项目中有很多组件、很多通过子组件传递的Props、用于进行 API 调用的辅助函数以及很多正在发生的事情。

有时，您可能最终花费了数小时来解决未定义的错误、愚蠢的错误（数据类型不匹配）。

例如，在 React App 中，组件必须接受字符串值。

// app.jsx
// this is valid
<Component name="Darshan!" /> 

// this is invalid but JavaScript won't show any error
<Component name={123} /> 

如果你传递的是数字值而不是字符串，JavaScript 不会报错。它会在浏览器中打印该值。

但这完全是错误的。名称必须是字符串数据类型。

那么我们下一步该如何进行呢？

使用 TypeScript 升级

这里 TypeScript 出现了！

TypeScript 用于制作企业级 Web 应用程序，由 Microsoft 提供支持！

与 JavaScript 不同，您的代码可以在浏览器上运行之前进行编译。因此，您可以解决任何潜在的愚蠢错误，节省您的时间！

TypeScript 允许您缩小变量的类型。

// app.ts
// Narrowed down type to string
let name:string = "Darshan" 

// This will show you the error
name = 123 

我们将变量名完全输入为字符串。

如果你在 VSCode 编辑器中编写代码，这可能会显示错误！类似于“无法将数字值赋给字符串”。

你不必每次都显式定义类型。TypeScript 可以根据右侧的值隐式定义类型。

app.ts
const name = "I am String"

// This will still show you the error!
name = 8923 

上面看到的例子是推断类型绑定。
还有其他类型绑定方式

1. 推理
2. 界面
3. 类型

您可以在文档中阅读更多内容！

使用 TypeScript 时要记住的事情！

1. TypeScript 是编译时语言。

2. 您无法直接在浏览器上运行 TypeScript。您需要使用Babel 编译器将 TypeScript 转换为 JavaScript 代码。

3. 您还可以创建自己的类型！

4. 为了缩小你的道具/状态，你需要知道特定的类型。

5. 在开始用 TypeScript 编写代码之前，您需要配置项目。

这就是 TypeScript 如何加速您的开发并节省更多时间。

准备好体验 TypeScript 了吗？快来体验TypeScript游乐场吧！

感谢您阅读这篇博客。如果您喜欢，请在评论区留言，告诉我您的想法。您最喜欢哪一点？

如果您认为有错误或者想要补充一些内容，请在评论框中分享您的想法。