一起来搭建一个可以运行TS的环境来学习ts

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情

TypeScript初体验

目标

搭建一个可以运行TS的环境来学习ts

全局安装编译 TS 的工具包

安装包：npm i -g typescript

• typescript 包：用来编译 TS 代码的包，提供了 tsc 命令，实现了 ts -> js 的转化
• 验证是否安装成功：tsc –v (查看 typescript 的版本)

注意：Mac 电脑安装全局包时，需要添加 sudo 获取权限：sudo npm i -g typescript

编译并运行 TS 代码

步骤

0. 创建ts文件。例如 hello.ts 文件（注意：TS 文件的后缀名为 .ts）

1. 编译。将 TS 编译为 JS

   在终端中输入命令，tsc hello.ts（此时，在同级目录中会出现一个同名的 JS 文件）

2. 执行 JS 代码。

   0. 在node中运行。在终端中输入命令，node hello.js
   1. 在浏览器中运行。

拓展：在线运行

www.typescriptlang.org/play

小结

0. 要运行.ts文件，先要全局安装****包，它的提供___命令，将.ts转成.js文件。

ts-node 简化运行 TS 的步骤

目标

了解ts-node命令的基本使用

问题描述

每次修改代码后，都要重复执行两个命令，才能运行 TS 代码，太繁琐。

tsc  你的代码.ts
​
node 你的代码.js

简化方式

使用 ts-node 包，直接在 Node.js 中执行 TS 代码。它提供了 ts-node 命令，可以简化执行命令。

安装命令

npm i -g ts-node

使用方式：ts-node hello.ts

相当于：1 tsc 命令 2 node（注意：ts-node 不会生成 js 文件）

解释：ts-node 命令在内部偷偷的将 TS -> JS，然后，再运行 JS 代码

小结

在初始学习阶段，我们会使用ts-node来运行代码，在项目阶段就不会再这样使用了。

运行ts代码报错问题

console.log报错问题

Cannot find name 'console'. Do you need to change your target library? Try changing thelibcompiler option to include 'dom'.

原因：没有创建ts项目，没有写配置文件

解决：用tsc --init命名，在根目录下生成配置文件 tsconfig.json

同名的变量冲突问题

原因：目前写的代码不是模块化的环境，定义的变量都是全局的。

解决：

0. 方式1：写代码时，用{ }整体给包起来
1. 方式2：export {}