TypeScript_1

TypeScript

TypeScript已经出来很长时间了，之前Angular2 编译使用的方式是ts，react的umi（读：乌米）框架用ts，其它用的并不多，但随着不断地推出，个人认为ts会成为趋势。

相关概念补充

javascript语言特征

JavaScript是一种弱类型的，动态类型检查的脚本语言。

脚本语言

脚本的简单理解：代码写完之后从上往下逐行执行，一边编译一边执行，一边编译一边执行

弱类型

javascript 语法比较松散，写起来比较随意
在定义变量的时候，我们可以为变量赋值任何数据，变量的数据类型不固定，这样的类型叫做弱类型。

var a = 10;
a = "abc";

强类型

在声明变量的时候，一旦给变量赋值，那么变量的数据类型就已经确定，之后如果要给该变量赋值其他类型的数据，需要进行强制数据类型转换。

int a = 10;
a = "10";

动态类型 和 静态类型

动态类型，运行时进行类型检查。代码中的错误，只能在代码运行的时候被发现。
静态类型，编译时进行类型检查。优势：提早发现代码中的Bug；提高代码的可读性；减少了复杂的错误处理逻辑；便于代码重构；增强IDE的功能。

IDE：集成开发环境，如 VScode，HBuilder，Sublime……

动态类型和静态类型的核心区别：
动态类型的类型检查会在代码运行的时候进行，而静态类型的类型检查则是在编译时进行。

TypeScript简介

• TypeScript是微软公司开发的一款开源的JavaScript超集语言
• JavaScript超集： 当前任何JavaScript都是合法的TypeScript代码！
• TypeScript主要为JavaScript提供了类型系统和对ES6语法的支持（更多的是类型系统的支持，语法支持一般用babel），它可以编译成纯 JavaScript
• Flow是一个类型检查工具，TypeScript是一种开发语言！
• TypeScript有自己的编译工具，写好的TypeScript代码最终会通过编译器编译成JavaScript代码进行运行！

TypeScript安装

TypeScript 最终要运行起来，我们需要将 TypeScript 代码转换成对应的 JavaScript 代码，而 TypeScript 的命令行工具可以帮我们完成这件事情。
TypeScript 的命令行工具（TS编译器）安装方法如下：

npm install -g typescript

安装好了之后，全局会提供一个tsc命令给我们使用！（就目前的编写阶段用，融入到项目中不需要）

编写TypeScript代码
这是一段 TypeScript 代码，其中规定了函数greeter传入的参数必须类型是string。我们将这段代码保存为hello.ts文件

function greeter(msg: string) {
  return "Hello, " + msg;
}

let str = "World";
console.log(greeter(str));

通过tsc编译 TypeScript 文件，最终运行

tsc hello.ts

命令会将我们写好的 ts 文件转换成相应的 JavaScript 代码文件

function greeter(msg) {
  return "Hello, " + msg;
}
var str = "World";
console.log(greeter(msg));

我们约定使用 TypeScript 编写的文件以 .ts 为后缀

留心：

• TypeScript 只会进行静态检查，如果发现有错误，编译的时候就会报错！
• TypeScript 编译的时候即使报错了，还是会生成编译结果，我们仍然可以使用这个编译之后的文件。

tsconfig配置

1.创建 tsconfig.json 配置文件

# yarn
yarn tsc --init

# npm
tsc --init	

2.设置配置项

• target: 指将ts代码要转换成哪个版本的js代码，如 es5，es3
• module: 指将ts代码转换成js代码之后，使用的模块化的标准是什么，如commonjs，umd（unity module 联合的模块，支持各种模块）
• outDir: 指将ts代码转换成js代码之后，js代码存放的文件夹路径
• rootDir: 指要将哪个目录中的ts代码进行转换，ts代码的存放路径
• strict: 是否要将ts代码转换为严格模式的js代码！

3.使用配置文件，让配置生效

tsc -p ./tsconfig.json    //  src中的 ts文件代码转换成js文件代码存在dist目录下

留心：务必在rootDir文件夹下面建立一个*.ts的文件,不然配置会报错