TypeScript语言规范与基本应用

在前端快速发展的今天，如果不能时刻保持学习就会很快被淘汰。分享一下对TypeScript相关知识的学习，文章有点长，希望对大家有所帮助。每天进步一点点。

一、TypeScript介绍

TypeScript：JavaScript + 类型系统 + ES6+

​ TypeScript 起源于使用JavaScript开发的大型项目 。由于JavaScript语言本身的局限性，难以胜任和维护大型项目开发。因此微软开发了TypeScript ，使得其能够胜任开发大型项目。

​ TypeScript是JavaScript的一个超集，在JavaScript的基础上增加了类型系统和ES6新特性，TypeScrip中的类型系统的作用和Flow是类似的（避免编码过程当中的类型异常，提高开发效率以及代码的可靠程度），TypeScrip支持ES6+提供的新特性，它会自动转换这些新特性（与babel转换是类似的，TypeScrip最低可以转换为ES3版本的代码），TypeScrip支持任何一种JavaScript运行环境，

​ TypeScript属于渐进式的，即使一点不了解TypeScript，也可以按照JavaScript的方法去使用它。

​ Angular项目以及vue3.0也开始使用TypeScrip来取代之前所使用的Flow，TypeScrip可以说是前端领域中的第二语言，特别适用于长周期开发的大项目。

二、TypeScrip 快速上手

// 准备工作： 
// 1、yarn init -yes  初始化项目
// 2、yarn add typescript --dev 	安装依赖
// 3、新建ts文件，编写代码

// 可以完全按照 JavaScript 标准语法去编写代码
const fn = (name: string) => {
	console.log(`Hello, ${name}`)
}
fn('typescript')

// 使用命令 yarn tsc ceshi.ts 运行 
// 自动转换为ES3版本的代码，类型注解也被去掉了
// var fn = function (name) {
//     console.log("Hello, " + name);
// };
// fn('typescript');

三、TypeScript 配置文件

tsc命令不仅仅可以编译指定的文件，还可以编译整个项目【整个工程】

// 1、初始化配置文件  yarn tsc --init
// 2、打开tsconfig.json文件，修改相应的配置
// 一些常用配置介绍：
// target:设置编译后的JavaScript所采用的的ECMAScript标准
// moudle:输出代码采用模块化的方式
// sourceMap:是否开始源代码映射
// outDir:编译结果输出到的文件夹
// rootDir:源代码【.ts文件】所在的文件夹
// strict: 是否开始严格模式
// strictNullChecks:检查变量是否为空

// 3、设置过后，如果使用tsc命令运行指定文件，配置是不会生效的

四、TypeScript 数据类型

1、原始类型

// 在非严格模式下，string number boolean 类型默认是可以为 null 或者 undefined
const a: string = 'abc'
const b: number = Infinity // NaN // 100
const c: boolean = false // true
// 非严格模式下 void 类型值可以是null 或者 undefined，严格模式只能为undefined
const e: void = undefined // null
const d: null = null
const d: undefined = undefined
// ES6中新增的类型，如果配置文件中设置target为ES6以下就会报错
// 解决方法，1、target修改为ES6；
// 解决方法, 2、在配置文件的lib中添加ES2015,会覆盖默认标准库，还需要添加DOM（包含BOM和DOM）
// P