Day02: Hello TypeScript! 环境安装起来 + 牛刀小试～

Q: 同事说自己的 C++ 能力是世界第一，怎麽样可以让他意识到自己没那麽厉害？
A: 实不相瞒，我也不是省油的灯：我的C++实力世界第0

XDD 好 今天的重点是环境安装啦 是说好开心 今天上完班 就开启第0天连假了(误

安装 node.js 与检查

在安装 TypeScript 执行环境前，我们先来确认是否已安装好 node.js，如果还没安装，可以到node.js 官方网站 官方网站进行下载安装，建议是使用左边 LTS 版本唷，相对比较稳定。 如果想要管理不同版本的 node 及 npm 也可以使用 nvm 来安装。

安装 node.js 时自动会安装 npm，安装成功後，可以输入指令来检查版号，看是否安装成功。

node -v
npm -v

如果都有出现版号（如 v14.1），就表示安装成功啦。

安装 TypeScript

在全域环境安装 TypeScript 指令，之後就可以在任何地方执行 tsc 指令了。

npm install -g typescript

一样来检查是否安装成功。

tsc -v

一样如果有出现版号（如 Version 4.3.5），就表示安装成功啦。

补充： TypeScript 除了可以使用 npm 安装（当然也可以用 yarn）之外，还有 Visual Studio Extension 可以安装， 可参考官网。

建立第一个 TypeScript 档案

在资料夹里建立 hello.ts 的档案，TypeScript 编写的档案都以 .ts 为字尾，如果是用 TypeScript 编写 React 时，以 .tsx 为字尾。

接下来在 hello.ts ， 我们可以来试看看 TypeScript 提供的型别注记 (Type Annotation) 的功能指定参数型别， 在 person 参数添加 : string ， 即定义 person 这个参数的资料型别得是字串型别：

function sayHello(person: string) {
  return "Hello, " + person;
}

let user = "iris";
console.log(sayHello(user));

然後在终端机执行

tsc hello.ts

这时候我们就会看到编译好的 hello.js:

function sayHello(person) {
    return "Hello, " + person;
}
var user = "iris"; 
console.log(sayHello(user));

这时候我们就完成第一个 TypeScript 档案了～

那来测试看看有没有印出来， 在终端机执行

node hello.js 

在终端机有印出 Hello, iris， 就表示成功啦！

TypeScript 会告诉你写错了 ， JavaScript 不会

接下来我们故意来输入不同型别，看会怎麽样～我们试着把传入 sayHello 的参数改为 array 型别 [0, 1, 2]：

function sayHello(person: string) {
    return 'Hello, ' + person;
}

let user = [0, 1, 2]; 
console.log(sayHello(user));

会发生什麽事呢？ TypeScript 会报错， 告诉你这个参数只接受 string 型别， 不接受数字阵列。

接下来发挥一下实验精神，一样再在终端机执行：

tsc hello.ts

即使终端机有报错，但我们可以看到 TypeScript 还是有进行编译产生 hello.js 。我们再执行：

node hello.js

印出了 Hello, 1,2,3，但这不是我们所要的资料型别，不符我们预想。而 TypeScript 在开发的时候就会告诉我们不是 string 型别，方便我们快速 debug，但是 JavaScript 不会。

⚠ TypeScript 只会进行静态检查，如果发现有错误，编译的时候就会报错。特别注意，TypeScript 编译的时候即使报错了，但还是会产生 js 档案。如果要在报错的时候终止 js 档案的产生，可以在 tsconfig.json 中配置 noEmitOnError 即可。（我们之後会来介绍 tsconfig.json）

这篇我们试看了使用 TypeScript 带来的好处，但有没有发现每写一次，我们都要手动去 tsc xx.ts 跟 node xx.js 一次， 超麻烦的，於是 google 找到了好方法，下篇来分享！

参考资料

https://www.typescriptlang.org/docs/handbook/typescript-tooling-in-5-minutes.html
https://willh.gitbook.io/typescript-tutorial/introduction/get-typescript