typescript在线编译 typescript编程

一个比java更script的语言，它是js的超集，它是Typescript。

一、typescript是什么？

Typescript是javascript的一个超集，主要提供了类型系统和对ES6的支持。它由Microsoft开发，代码开源于github上。

• 所谓超集是集合论的术语，A ⊇ B，则 A 集是 B 的超集，也就是说 B 的所有元素 A 里都有，但 A 里的元素 B 未必有。

---

二、为什么选择TS?

众所周知，javascript是一门弱类型语言。它允许隐式类型转换，允许改变变量的类型，在带来便利的同时，也产生了一些问题。这些问题在ts中得到了解决。

在我看来，类型就是最好的注释，而TS的类型检查刚好满足这一点，大大增加了代码的可读性以及可维护性。其次，ts的包容性很强，ts在编译成js的过程中，如果内部出现了错误，它是仍然可以继续编译成js，而且不影响运行。最后，ts拥有活跃的社区，最近vue3全面使用ts，会使ts的生态越来越好。所以，学习ts已经迫在眉睫了！

---

三、安装使用

• 全局安装命令：cnpm install -g typescript
• 编译文件tsc hello.ts
• 约定以.ts为文件后缀。编写react时，以.tsx结尾。

---

四、编译

• 在一个文件夹中新建TS文件，写入：

console.log('hello world')

• 编译ts，执行命令：

tsc hello.ts

• 执行以后会发现文件夹下多出一个js文件，内容和ts文件中一样：

可以看到，前面的文件没有使用ts语法。接下来，我们在ts中声明一个变量。

---

四、ts语法编译

• ts可以为变量指定类型，比如：

var blog:string = "oralinge"; // string 为设置变量类型

• 我们执行tsc hello.ts进行编译，看一下js中的内容：

效果正常。

但是如果不按照指定的类型声明变量呢？
我们写入如下代码：

var num: Number = true;

• 因为写入了错误的代码，此时vscode提示：

前面我们已经说过ts的包容性，内部语法错误是仍然可以编译成js的。

• 编译时终端提示：

• 尽管报错， js仍然编译成功

---

五、监听

1. 执行初始化命令，创建package.json。

npm init -y

2. 打开package.json，增加脚本build执行tsc命令：

"scripts": {
	    "build":"tsc"
	 }

3. tsc命令会使用到tsconfig.json的配置，新建tsconfig.json，输入以下代码：

{
	  "name": "ts",
	  "version": "1.0.0",
	  "description": "",
	  "main": "hello.js",
	  "scripts": {
	    "test": "echo \"Error: no test specified\" && exit 1",
	    "build": "tsc",
	    "start": "tsc --watch"
	  },
	  "keywords": [],
	  "author": "",
	  "license": "ISC"
	}

以上配置会将src目录下的ts编译到ts文件夹下。outDir设置输出目录。
输入命令：

cnpm run build

效果图:

当然，监听的方式同上。执行命令：

cnpm run start

保存后，就可以看到js中出现了编译后的代码了。

---

以上。