TypeScript基础学习
最终还是没有逃过ts的魔爪，哈哈哈也不能说魔爪，工作这段时间，感觉每天都在学习新的知识，最近在看源代码的时候看到了部分源码是用ts写的，之前没接触过，今天就来学习一下ts。
文章参考：
TypeScript超详细入门教程
TypeScript 入门教程——菜鸟教程
TypeScript 入门教程-阮一峰
Typescript 和 Javascript之间的区别
上面的教程都写的比较详细了，我就总结部分重要的知识点和我自己的理解
文章主要参考阮一峰老师的教程写的。
一、了解TypeScript
1、 TypeScript是什么
TypeScript 是 JavaScript 的一个超集，扩展了 JavaScript 的语法。
我们都知道Javascript在声明变量时是没有定义数据类型的，赋值的类型决定了变量的类型。这样的做法在小型的开发环境中是实用的，但随着js的壮大，其实这种不定义数据类型的做法就容易产生一些不可避免的麻烦。当数据类型错误的时候只有在运行的时候才能检查出来。而ts是一种静态类型检查的语言，提供了类型注解，在代码编译阶段就可以检查出数据类型的错误。
关于强类型和弱类型看我上一篇文章：
Flow学习笔记
我在看ts代码的时候发现 大量的ts代码其实是在js的代码上增加了类型注释之后变成的，（这只是一个初学ts者的理解），对js玩家很友好。对js代码有兼容性。
2、TypeScript和javascript的区别
TypeScript 是JavaScript 对象的扩展。
JavaScript 代码可以在无需任何修改的情况下与 TypeScript 一同工作，同时可以使用编译器将
TypeScript 代码转换为 JavaScript。
TypeScript 通过类型注解提供编译时的静态类型检查。
TypeScript 中的数据要求带有明确的类型，JavaScript不要求。
TypeScript 为函数提供了缺省参数值。
TypeScript 引入了 JavaScript 中没有的**“类”概念**。
TypeScript 中引入了模块的概念，可以把声明、数据、函数和类封装在模块中。
3、TypeScript的优点
-
静态输入
静态类型化是一种功能，可以在开发人员编写脚本时检测错误。查找并修复错误是当今开发团队的迫切需求。有了这项功能，就会允许开发人员编写更健壮的代码并对其进行维护，以便使得代码质量更好、更清晰。 -
大型的开发项目
有时为了改进开发项目，需要对代码库进行小的增量更改。这些小小的变化可能会产生严重的、意想不到的后果，因此有必要撤销这些变化。使用TypeScript工具来进行重构更变的容易、快捷。 -
更好的协作
当发开大型项目时，会有许多开发人员，此时乱码和错误的机也会增加。类型安全是一种在编码期间检测错误的功能，而不是在编译项目时检测错误。这为开发团队创建了一个更高效的编码和调试过程。 -
更强的生产力
干净的 ECMAScript 6 代码，自动完成和动态输入等因素有助于提高开发人员的工作效率。这些功能也有助于编译器创建优化的代码。
4、TypeScript特性
类型批注和编译时类型检查 ：在编译时批注变量类型
类型推断：ts中没有批注变量类型会自动推断变量的类型
类型擦除：在编译过程中批注的内容和接口会在运行时利用工具擦除
接口：ts中用接口来定义对象类型
枚举：用于取值被限定在一定范围内的场景
Mixin：可以接受任意类型的值
泛型编程：
名字空间：名字只在该区域内有效，其他区域可重复使用该名字而不冲突。
元组：元组合并了不同类型的对象，相当于一个可以装不同类型数据的数组。
Await：
二、TypeScript基础知识
1、安装
npm install -g typescript
ts的文件后缀一般就是.ts
用 TypeScript 编写 React 时，文件后缀为 .tsx
编译：
tsc hello.ts
//hello.ts是文件名
2.hellow world ts实例
function sayHello(person: string) {
return 'Hello, ' + person;
}
let user = 'Tom';
console.log(sayHello(user));
在上面的代码中 ：string 就是我们为person指定的变量的类型。其他语法与js相同。
3、原始数据类型
原始数据类型包括：布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol 和 ES10 中的新类型 BigInt
前几种比较简单我就不详细去说了，我就写一下BigInt
Bigint 任意精度整数
在javaScript中，number可以准确表达的最大数字是2^53没有比这更大的数字,
Number可以表示的最大安全范围是正负2^53 - 1。也就是Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER.BigInt类型出现就可以解决这一问题，比2^53大的数可以使用BigInt类型表示
4、任意值 （any）
any 任意值类型
跟名字一样，any值是对类型不做出确定的值。
any 类型，则允许被赋值为任意类型
我的理解是 一个ts变量被定义为any类型后 。一夜回到解放前，和js一样了。
变量的类型由给他赋值的数据决定。
mix类型：可以接受任意类型的值
注：在ts中 如果一个变量没有被指定类型，那么它默认就是any类型
5、类型推断（Type Inference）
类型推断简单理解说就是在ts的语法中 如果一个变量没有定义类型，会被自动进行类型推断
如果变量没有赋值，那么会被类型推断为any类型
注：如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查：
6、联合类型（Union Types）
在使用类型检查的时候可以使用多种数据类型，也就是说一个变量可以定义多个数据类型
例如：
let pc： string | number;
pc = one ；
pc = 1 ;
在上面这个例子中 pc这个变量被同时定义为string和number，这就是所谓的联合类型。
联合类型中 数据类型中用 | 隔开
当ts不确定变量是联合类型中的哪个类型时，只能能访问此联合类型的所有类型里共有的属性或方法：
比如上面的例子中
如果我们没有确定pc=one或者pc=1时
使用length属性就会报错，因为length属性不是number的方法
使用string方法时不会报错，因为两者都有string方法。
7、接口（Interfaces）
接口简单来说就是用来描述对象的类型
数据的类型有number null string等数据格式，对象的类型就是用接口来描述的。
这里我借用阮一峰老师的例子：
interface Person {
name: string;
age: number;
}
let tom: Person = {
name: 'Tom',
age: 25
};
在这个例子中 Person就是我们定义的一个接口。定义了两个变量name和age
这样就比较好理解name和age两个属性都被包含在person这个接口中 调用的时候直接调用person而不是分别去调用每一个属性。
这里要注意几个点：
1、定义的变量属性数量要和接口的保持一致，不能多也不能少
2、接口中可以使用任意属性的方法来定义接口
name: string;
age?: number;
[propName: string]: any;
}
let tom: Person = {
name: 'Tom',
gender: 'male'
};
上面代码中：
使用 [propName: string] 定义了任意属性取 string 类型的值。
3、接口中可以使用readonly定义只读属性
readonly id: number;
注意，只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候
8、数组
在ts中 数组有多中定义方式
1、类型 + 方括号」来表示数组：
let fibonacci: number[] = [1, 1, 2, 3, 5];
2、使用数组泛型（Array Generic） Array 来表示数组：
let fibonacci: Array<number> = [1, 1, 2, 3, 5];
3、接口也可以用来描述数组：
nterface NumberArray {
[index: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];
4、用 any 表示数组中允许出现任意类型：
let list: any[] = ['xcatliu', 25, { website: 'http://xcatliu.com' }];
9、函数
ts中的函数 其实就是在js的函数基础上增加类型检查
来看一个ts的函数定义
function sum(x: number, y: number): number {
return x + y;
}
在这个代码中，给x y sum
分别增加了类型检查，其他没有变化。
注 ：在TS中 =>不是类似于ES6中的箭头函数。是指向的意思
左边是输入类型，需要用括号括起来，右边是输出类型。
ts的函数参数必须和定义的保持一致，不能多也不能少
本节参考：
函数的类型
10、类型断言
类型断言（Type Assertion）可以用来手动指定一个值的类型。
简单来说就是我们在前面使用any类型后小组值明确他到底是什么类型
语法主要有两种：
值 as 类型 如果是在react中使用 必须使用这个
<类型>值
用途：
1、将一个联合类型断言为其中一个类型
2、将一个父类断言为更加具体的子类
3、将任何一个类型断言为 any
类型断言
这一部分内容比较多 我单独写一篇文章
11、声明文件
这里补充几个概念：
声明语句：在我们使用第三方库的语法时，ts不认识此语法 因此我们要先写出声明语句来标识使用了该第三方库
声明文件：把所有的声明语句放到一个单独的文件中，这个语句就是声明文件。声明文件必需以 .d.ts 为后缀。
第三方声明文件：有一些常用的声明文件已经是写好的，比如jQuery文件。直接下载安装即可
npm install @types/jquery --save-dev
declare var 声明全局变量
declare function 声明全局方法
declare class 声明全局类
declare enum 声明全局枚举类型
declare namespace 声明（含有子属性的）全局对象
interface 和 type 声明全局类型
export 导出变量
export namespace 导出（含有子属性的）对象
export default ES6 默认导出
export = commonjs 导出模块
export as namespace UMD 库声明全局变量
declare global 扩展全局变量
declare module 扩展模块
///
这块内容也非常多 后续单独补
12、内置对象
在ts中 沿用了js中的内置对象。
ECMAScript 内置对象：
Boolean、Error、Date、RegExp
DOM 和 BOM 内置对象：
Document、HTMLElement、Event、NodeList
这些在ts中都是可以直接使用的。