typeScript（一）认识typeScript及作用

认识typeScript

• 官网：https://www.typescriptlang.org
• 中文：
  • https://www.typescriptlang.org/zh/
  • https://ts.xcatliu.com/

为什么要用TypeScript？

• js是一个动态类型语言，变量的类型是动态，可变的，不确定，数据的类型是在运行过程中随时可变的，那么我们就不能在运行之前对它进行检测了。
• 程序是可能有错误的，比如，计算错误（对非数字类型数据进行一些数学运算），调用一个不存在的方法。
• 不同类型的数据有不同的操作方式或方法，如：字符串类型的数据就不应该直接参与数学运算

TypeScript能做什么？

• TypeScript 核心：解决 JavaScript 编程中的类型安全问题

什么是类型安全？

动态类型语言 & 静态类型语言

静态类型语言

• 程序编译期间做数据类型检查的语言，如：Java。
• 就是把程序的变量存储的数据类型给固定下来（变量一旦声明，就不能改变存储的数据类型了），那么这个时候，我们的程序就可以根据这个特性，来检测你在程序使用这个变量的时候有没有用对。

静态类型语言的优缺点

优点：

• 程序编译阶段（配合IDE、编辑器甚至可以在编码阶段）即可发现一些潜在错误，避免程序在生产
  环境运行了以后再出现错误；
• 编码规范、有利于团队开发协作、也更有利于大型项目开发、项目重构
• 配合IDE、编辑器提供更强大的代码智能提示/检查
• 代码即文档

缺点：

• 麻烦
• 缺少灵活性

动态类型语言

• 程序运行期间才做数据类型检查的语言，如：JavaScript

动态类型语言的优缺点

优点：

• 静态类型语言的缺点

缺点：

• 静态类型语言的优点

什么是类型系统？

类型系统

• 类型系统包含两个重要组成部分：
  • 类型标注（定义、注解） - typing：给变量声明（标注）类型
  • 类型检测（检查） - type-checking：依据类型标注进行检测

类型标注

• 类型标注就是在代码中给数据（变量、函数（参数、返回值））添加类型说明，当一个变量或者函数（参数）等被标注以后就不能存储或传入与标注类型不符合的类；
• 有了标注， TypeScript 编译器就能按照标注对这些数据进行类型合法检测；
• 有了标注，各种编辑器、IDE等就能进行智能提示。
• 在 TypeScript 中，类型标注的基本语法格式为：
  数据载体:类型
• TypeScript 的类型标注，我们可以分为
  • 基础的简单的类型标注
  • 高级的深入的类型标注

类型检测

• 对数据的类型进行检测。
• 类型系统检测的是类型，不是具体值（虽然，某些时候也可以检测值），比如某个参数的取值范围（1-100之间），我们不能依靠类型系统来完成这个检测，它应该是我们的业务层具体逻辑，类型系统检测的是它的值类型是否为数字。

环境搭建

• TypeScript 编写的程序并不能直接通过浏览器运行，我们需要先通过 TypeScript 编译器把TypeScript 代码编译成 JavaScript 代码
• TypeScript 的编译器是基于 Node.js 的，所以我们需要确保安装了Node.js

安装 TypeScript 编译器

• 通过 NPM 包管理工具安装 TypeScript 编译器
  npm i -g typescript
• 安装完成以后，我们可以通过命令 tsc 来调用编译器

# 查看当前 tsc 编译器版本
tsc -v

编写代码

• TypeScript 文件

// ./src/hello.ts 
let str: string = '小陈';

• 默认情况下， TypeScript 的文件的后缀为 .ts TypeScript 代码

编译执行

• 使用我们安装的 TypeScript 编译器 tsc 对 .ts 文件进行编译

tsc ./src/hello.ts

• 默认情况下会在当前文件所在目录下生成同名的 js 文件

其他的编译选项

• 编译命令 tsc 支持许多编译选项，这里我先来了解几个比较常用的

–outDir

• 指定编译文件输出目录

tsc --outDir ./dist ./src/hello.ts

–target

• 指定编译的代码版本目标，默认为 ES3

tsc --outDir ./dist --target ES6 ./src/hello.ts

–watch

• 在监听模式下运行，当文件发生改变的时候自动编译

tsc --outDir ./dist --target ES6 --watch ./src/hello.ts

• 通过上面几个例子，我们基本可以了解 tsc 的使用了，但是大家应该也发现了，如果每次编译都输入这,么一大堆的选项其实是很繁琐的，好在TypeScript 编译为我们提供了一个更加强大且方便的方式，编译配置文件： tsconfig.json 我们可以把上面的编译选项保存到这个配置文件中

编译配置文件

• 我们可以把编译的一些选项保存在一个指定的 json 文件中，默认情况下 tsc 命令运行的时候会自动去加载运行命令所在的目录下的 tsconfig.json 文件，配置文件格式如下：

{ 
	"compilerOptions": { 
		"outDir": "./dist", 
		"target": "ES2015", 
		"watch": true, 
	}, 
	// ** : 所有目录（包括子目录） 
	// * : 所有文件，也可以指定类型 *.ts 
	"include": ["./src/**/*"] 
}

• 有了单独的配置文件，我们就可以直接运行：

tsc

指定加载的配置文件

• 使用 --project 或 -p 指定配置文件目录，会默认加载该目录下的 tsconfig.json 文件

tsc -p ./configs

• 也可以指定某个具体的配置文件

tsc -p ./configs/ts.json