七步学会TypeScript - 第一步-入门（保姆级教程）

最新推荐文章于 2023-08-16 11:14:23 发布

田雪Teresa

最新推荐文章于 2023-08-16 11:14:23 发布

阅读量84

点赞数

分类专栏： typescript学习文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/weixin_43805502/article/details/132145290

版权

typescript学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

相信来学习的小伙伴都对JavaScript有一定了解的情况，typescript是javascript的超集，它提供了类型检查和更强大的开发工具，有助于提高代码的可维护性和稳定性。

了解TypeScript是什么，以及它与JavaScript的关系和优势。

TypeScript是由微软开发的一种开源编程语言，它是JavaScript的超集。这意味着TypeScript包含了JavaScript的所有语法和功能，并且在此基础上添加了类型系统和一些额外的特性。TypeScript代码最终会被编译成普通的JavaScript代码，因此它可以运行在任何支持JavaScript的环境中。

TypeScript的优势主要体现在以下几个方面：

类型检查： TypeScript引入了静态类型系统，允许开发者在编码阶段就能够发现潜在的类型错误。这有助于提高代码的稳定性和可维护性。
增强IDE支持： 由于TypeScript提供了类型信息，IDE（集成开发环境）可以更好地理解代码，提供智能提示、自动补全等功能，从而提高开发效率。
更好的代码维护： 类型系统和面向对象编程的特性使得代码更加模块化和易于维护。
最新JavaScript特性支持： TypeScript支持最新版本的JavaScript语法，甚至在当前JavaScript版本还未被所有浏览器支持的情况下，也可以使用TypeScript来编写这些特性。
强大的工具生态系统： TypeScript有着丰富的工具生态系统，如调试器、编译器插件、第三方库支持等。

安装TypeScript编译器和开发环境。

要安装TypeScript编译器和开发环境，你可以使用npm或yarn。这里以npm为例：

首先，确保你已经安装了Node.js和npm。你可以在命令行中输入以下命令来检查是否已安装：

node -v
npm -v

如果你还没有安装npm，请到Node.js官网（https://nodejs.org/）下载和安装Node.js，npm会随之安装。
一旦Node.js和npm安装好了，打开命令行或终端窗口，输入以下命令来全局安装TypeScript：

npm install -g typescript

（或者如果想用yarn安装）

yarn -v //查看有没有安装
yarn global add typescript //安装

创建一个简单的TypeScript项目，尝试编写一些基本的TypeScript代码，并编译运行它们。

在安装TypeScript后，你可以开始创建一个简单的TypeScript项目并编写一些代码。以下是一个简单的示例：

创建一个新的文件夹，例如"my-typescript-project"，然后进入该文件夹。
在文件夹中创建一个名为"index.ts"的文件，这将是我们的TypeScript代码文件。
打开"index.ts"文件，并编写以下代码：

function greet(name: string) {
  return `Hello, ${name}!`;
}

const personName = "John";
console.log(greet(personName));

在命令行或终端中，进入到"my-typescript-project"文件夹，然后执行以下命令来编译TypeScript代码：

tsc index.ts

编译成功后，会生成一个名为"index.js"的文件，这是编译后的JavaScript代码。
最后，在命令行中运行生成的JavaScript代码：

node index.js

你应该能够在命令行中看到输出结果：“Hello, John!”。

这个示例演示了一个简单的TypeScript函数和变量的使用。在TypeScript中，我们可以使用类型注解（如": string"）来指定变量的类型，从而发挥类型检查的优势。

下面来说一些常见问题：
我明明按说明安装了typescript可为什么还是出现bash: tsc: command not found？
解答：
如果你在终端中输入 tsc 命令后出现 command not found 错误，这可能是因为 TypeScript 的全局安装路径未正确添加到系统的环境变量中。

对于 Mac 系统，你可以尝试以下解决方案：

检查yarn的全局安装路径：
输入以下命令查看yarn的全局安装路径：
```
yarn global bin
```
如果路径不在系统的环境变量中，你可以将该路径添加到环境变量中。
将yarn全局安装路径添加到环境变量：
打开终端，输入以下命令打开配置文件（例如.bashrc或.zshrc）：
```
nano ~/.bashrc
```
或
```
nano ~/.zshrc
```
在配置文件的末尾添加以下行（假设yarn全局安装路径是/usr/local/bin）：
```
export PATH="$PATH:/usr/local/bin"
```
保存并关闭配置文件（按Ctrl + X，然后按Y并回车确认保存）。

然后，在终端中输入以下命令使更改生效：
```
source ~/.bashrc
```
或
```
source ~/.zshrc
```
重新启动终端：
在添加了yarn全局安装路径的环境变量后，退出终端并重新打开一个新的终端窗口或标签，然后尝试再次运行 tsc 命令。