- 搜索
德胜云资讯,添加一些关于程序相关的内容,仅供大家学习交流（https://www.wxclwl.com）
日期：2023/03/25 14:32作者：翁惠珠人气：
在学习现代的编程语言，很多官方都会提供对应的在线演练场，对于语言基础来说， 这种方式比较直接， 可以快速的验证你的想法。
地址： https://www.typescriptlang.org/play
中文地址： https://www.typescriptlang.org/zh/play
这种方式就是在线的方式运行编写的代码。
前端开发越来越趋向于所见即所得。所以除了本地安装使用之外，还提供了上面的演练场。
效果图如下所示：
这里可以看到我们写了 TypeScript 的代码，就自动转换成了对应的 js 代码，并且在转换代码的时候，可以配置编译生成 javascript 语言的版本。
我这里默认是使用 ES2017，如果你想使用 ES2015 之前的版本， 其中 const 就会变成 var 定义。因为从 ES2015 版本开始，才有了很多新特性。
点击版本旁边的 运行 按钮，就可以看到运行的效果。 这里运行的效果会显示到 日志 的标签页下。
在来个复杂点的例子， 并且使用 ES5 进行编译。
可以看到已经转换了对应版本的 JavaScript 代码了。 效果如下图：
运行效果如下所示：
对于在线的演示就做这么多，后续的学习还是以本地为主。因为本地可以保存我们学习的过程，写过的代码都能回溯。在线虽然可以快速的验证， 但是不好进行储存在利用。
对于本地的开发，关于现在前端或者 JavaScript 系的开发栈，必不可少的就是 Node.js 的配置和使用。
对于这个配置实际生产环境中尽量不要使用最新的版本。很多依赖无法支持最新的版本，这就很魔性。
本着学习就用最新的，我这就用当前版本最新的 LTS 版本： Node.js 18.13.0 LTS。
可以使用如下代码查看版本。
这里默认使用 npm 的方式进行 TypeScript 的安装，对于这个安装，同样可以局部安装和全局安装。
这里使用全局安装的方式，为了能够在不同的项目中都能使用已经安装好的依赖，不用在单独的下载。
当然除了使用 npm 方式安装， 也可以使用 yarn 或者 pnpm 进行安装。
具体的区别就是既然能够出现， 并且没有被淘汰，肯定有其优点。
请自行翻阅学习，有个人给你说有哪些关键字对于学习来说，已经是很大的帮助了。
局部安装：
全局安装：
安装完成以后， 使用 tsc --version 查看版本号，用来检测使用安装完成。
可以看到已经安装最新版本的 TypeScript ，版本为： 4.9.5。这就代表着基础的环境已经安装完成。
接下来，我们把上面的代码，在本地运行一下。
任何的编程语言都有其后缀名称，C 语言的使用 .c，C ++ 使用 .cpp 等。 而 TypeScript 同样也有其后缀，其后缀就是 .ts。
新建文件 Hello.ts 并编写如下的代码。
对于 TypeScript 语言，浏览器是无法直接编译并识别的，需要转换成对应的 JavaScript 代码，而编译的命令就是 tsc 编译器。
编译成功以后， 可以看到编译同名文件，后缀为 .js 的文件。就是编译之后可以直接运行的文件。
编译的代码如下：
编译的过程及运行效果，这里使用 Node 直接运行。
当然也可以把编译好的代码，放入到页面中进行使用。
新建 hello.html 文件，并把下面的代码复制其中。
在浏览器中打开。打开控制台查看效果：
这就是本地的代码编写方式，也就那四步。
第一步，安装 Node.js。
第二步，安装 TypeScript。
第三步，编写代码。
第四步，编译并运行。
恭喜您，已经学会了 TypeScript 的编程语言的安装和 Hello World 程序，离精通更近了一步。
同样另外另一个例子也编写出来，并编译对应的 js 代码如下：
使用 Node 进行运行。
简单的编写就这样了。 我这里使用的 IDE 是 VS Code 。现在来说应该是前端的必备工具了。 也可以使用 Fleet 现在是属于公开预览版，还没有收费的策略， 可以一直跟着最新的版本使用。当然了这个也是个人的喜好， 你用 vim 一样也没有问题。 个有所爱，只要能够减少错误，加快你编写代码的速度就好的工具。
对于 VS Code 如何安装， 可以查看我之前写的文章，或者直接借助搜索引擎，安装相当容易。
这里给出这两个 IDE 的官方网址。
VS Code：https://code.visualstudio.com/
Fleet：https://www.jetbrains.com/zh-cn/fleet/
JetBrains Fleet：由 JetBrains 打造的下一代 IDE
