1.开发环境安装 | 砥砺前行

[TOC]

安装 Node

安装 Node 非常简单，只要到 Node 官网下载一个最新版本就可以了，安装好后，可以打开命令行工具，同时按下 win+R，然后输入 cmd 就可以打开，打开后输入。

node - v;
npm - v;

1
2

如果看到版本号说明已经安装成功了，看不到版本号就说明你的 node.js 没有安装成功。

// 全局安装
yarn global add typescript
// 或者
npm install -g typescript

1
2
3
4

以上命令会在全局环境下安装tsc命令，安装完成之后，我们就可以在任何地方执行tsc命令了。需要注意的是：如果是 mac 电脑，要使用sudo npm install typescript -g指令进行安装。

// 查看版本
tsc --version
Version 3.5.2

1
2
3

编译一个TypeScript文件很简单：

// 编译ts文件
tsc hello.ts

1
2

编译的原因在于：浏览器不能识别以.ts结尾的文件，需要将.ts结尾的文件编译成.js结尾的文件。

我们约定使用TypeScript编写的文件以.ts为后缀，用 TypeScript 编写 React 时，以.tsx为后缀。

新建 demo.ts：

function sayHello(person: string) {
  return `Hello， ${person}`;
}

const user = 'lisi';
console.log(sayHello(user));

1
2
3
4
5
6

TypeScript 中，使用:指定变量的类型，:的前后有没有空格都可以。上述例子中，我们用:指定 person 参数类型为 string。但是编译为 js 之后，并没有什么检查的代码被插入进来。 TypeScript 只会进行静态检查，如果发现有错误，编译的时候就会报错。

运行：tsc demo.ts 编译当前文件，结果如下：

'use strict';
function sayHello(person) {
  return `Hello， ${person}`;
}
const user = 'lisi';
console.log(sayHello(user));

1
2
3
4
5
6

第一步：创建tsconfig.json文件，该文件是 TypeScript 项目的配置文件(通过tsc --init命令来生成配置文件)，可以通过读取它来设置 TypeScript 编译器的编译参数；
第二步：点击菜单栏->终端-运行任务，点击 tsc：监视-tsconfig.json，然后就可以自动生成代码了。

需要注意：需要 watch 当前文件目录中的tsconfig.json文件。

修改编译后的 js 文件输出目录为：将 tsconfig.json 文件中的 outDir 设置成："outDir": "./js"。

yarn add ts-node
// 运行如下命令
npx ts-node xxx.ts

1
2
3

初始化项目：进入你的编程文件夹后，可以使用npm init -y来初始化项目，生成 package.json 文件。
创建 tsconfig.json 文件，在终端中输入tsc --init：它是一个 TypeScript 项目的配置文件，可以通过读取它来设置 TypeScript 编译器的编译参数。
安装@types/node，使用npm install @types/node -D进行安装。这个主要是解决模块的声明文件问题。
编写 HelloWorld.ts 文件，然后进行保存，代码如下。

const a: string = 'HelloWorld';
console.log(a);

1
2