vue 转向 react ，正好vue3.0 也用到TypeScript 所以需要抓紧时间学习 TypeScript 。
教学视频 是 千锋前端TypeScript教程陆荣涛老师主讲（陆神顶配版TS入门教程）
（可能之前都有一些基础 但是比较凌乱 现在想系统性的学习一下，而且视频 我都是看完一遍 第二遍的时候才开始记笔记 如果有小伙伴 想学习的话 根据自己实际情况 学习就行）
学习视频 ---> 千锋前端TypeScript教程陆荣涛老师主讲
TypeScript 简称 ts
Javascript 简称 js
什么是TypeScript
ts 是 js 的一个超集，可以在ts 中使用 js 之外的扩展 语法，同时借助ts 对面向对象 和静态类型的 良好支持，可以编写更大型更健康的项目。
我个人理解ts 把它理解成 预编译 也行 或者把他理解成 对你所使用的数据增加类型判断等 从而可以在运行代码之前就可以检验出代码是否正确，从而达到了更早发现问题的目的。
关于 ts 的优缺点
优点：
提供可选的强静态类型
更早发现 BUG
代码可预测
丰富的 IDE 支持
方便重构
提供面向对象的写法
缺点：
不是真正的静态类型
有一定的学习成本
需要写更多的代码
需要编译
TS 常用数据类型（基础篇 且 必用）
通常声明一个变量 以 ：类型 为准 如 数字类型 let num:number = 6;(在以后的变量使用中 如果num的数据类型发生变化（除了null undefined 外） 则代码编译的时候就会警告，这就是ts 不同于js 的地方之一)
TS中的常用的数据类型有 （内置类型）Number, String, Boolean, Null, Undefined， Void, enum，Array，Any，Object，元组， 接口等
数字类型
例如 let decimal: number = 6;
字符串
let color: string = "blue";
布尔类型
let isDone: boolean = true;
let bool1: Boolean = new Boolean();
Null和Undefined
null和undefined是所有类型的子类型，可以赋值给 任意类型的变量
undefined表示未定义的值，一个变量最原始的状态，例如声明了变量没有赋值
null是空值的意思，表示一个对象被人为的重置为空对象，相当于栈中的变量没有指向堆中的内存对象。
let num: number = undefined;
void类型（表示没有任何返回值的函数;表示没有任何类型）
function warnUser(): void {
console.log("This is my warning message");
}
enum枚举类型
enum Color {Red, Green, Blue}
let c: Color = Color.Greent
enum Color {Red = 1, Green, Blue}
let c: Color =color.green
数组
数组的项中不允许出现其他的类型； 有时候可以通过any类型来允许出现任意类型
类型+方括号的表示法 例如 number[], 这种类型的数组里面是不允许有除了number之外的类型
数组泛型 Array+ <类型> 例如 Array<number>
接口表示数组， 利用索引签名
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];
interface selfArray {
[index: number]: numer
}
let list3: selfArray = [1,2,3]
元组（数组是合并了相同类型的对象， 而元组Tuple合并了不同类型的对象）
let list:[number, string] = [1, 'a']
Any类型
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false;
Object 类型
Object类型的变量只是允许你给它赋任意值 - 但是却不能够在它上面调用任意的方法，即便它真的有这些方法
let prettySure: Object = 4;
prettySure.toFixed(); 这行会直接报错
安装编辑器 编译环境
我个人还是习惯用webstrom 编辑器
新建 xxx.ts 文件
在该文件中输入console.log('这是一个简单的测试！');
然后在该文件下打开termial 输入命令 tsc xxx.ts 后 会生成一个与之相对应的js 文件 ,然后再执行 node xxx.js 控制台输出内容。这样一个简单的ts 文件转化 以及输出 就完成了。
这里事先要说一下 将来可能会看到 xxx.ts 的文件 也会看到 xxx.tsx 文件 ,这个问题 问过大佬 大佬说 ts是js文件（通过编译转化成js文件） tsx是写代码模版的。日后会看到很多 先温习一下基础知识。
优化编译
解决 ts 和 js 的代码冲突问题
当 ts 和 js 中出现相同方法名称或者变量名称的时候 会出现警告。
如图
tsc --init 执行命令后 会在文件下生成 tsconfig.json 文件里面有各种配置项 （执行后会发现 方法中传入的参数会报警告，原因是没有定义 参数的类型）
tsc --watch 执行命令后 可以实时检查代码编译情况，包括报错情况。
tsc -noEmitOnError xxx.ts 文件 执行该命令的时候 当ts文件中的方法出现错误的时候 文件不可以编译成js 文件。（日后项目优化的时候 会用到）
在ts 文件中有类型的增加 如
function greet(person:string,date:Date){
console.log(`Hello ${person}, Today is ${date.toDateString()}`);
}
中的 person:string
在编译成js 代码后 没有出现 后面的 :string
以下是代码部分 我直接贴出来 有空的小伙伴 勤加练习。
//字符串
let str:string ='hello world!';
//数值
let num:number =100;
//布尔
let bool:Boolean =true;
//数组 （有两种写法） :type[] :Array<type>(泛型写法)
let arr01:number[] = [1,2,3];//数组中必须是 number 类型的值
let arr02:Array = [1,2,3];
//特殊类型 any (可以将任意类型的值 赋值给 对应的变量) 如下
let obj:any = {
x:0
};
obj ='any 也可以赋值成 字符串。'
//函数 :void 意思是 默认啥也不返回 name: string 类型注释 :void 返回值类型注释
function greet(name:string):void{
console.log(name)
}
greet('字符串参数。')
//也可以 写入 number 返回值类型
function returnNum(x:number):number{
return x>1?x:1
}
returnNum(50);
//匿名函数 会自动指定编译类型 names 中有不同类型的值 forEach输出的时候
// 就可以正常输出 不报任何错误
//值得注意的是 当我们打印 x.toUpperCase()的 时候就会报错toString() 不报错
let names = ['1','2',3];
names.forEach(x =>{
console.log(x.toString());
})
//对象类型
function printCoord(pt:{x:number,y:number}){
console.log(pt.x)
console.log(pt.y)
}
printCoord({x:1,y:1});
// 对象类型中 传入的参数 是可选 的 如下 last? 就是 用户 可传 可不传的 值 不可以额外传入 没有接收的值
function printName(obj:{first:string,last?:string}){
console.log(obj.first)
console.log(obj.last ?obj.last:'last 没有值');
//等同于上面的三元表达式
console.log(obj.last?.toString())
}
printName({first:'对象类型中传入last值',last:'传入last值。'});
printName({first:'对象类型中不传入last值'});
//联合类型 两个或者多个其他类型组成的类型
// 既可以是 字符串类型 也可以是 数值类型
function printId(id:string |number ){
console.log(id);
// 类型缩小 也叫类型判断 其实就是 事先对传过来的值 增加一个判断 然后根据类型的不同做不同的事儿
if(typeof id ==="string"){
console.log('传过来的是个字符串类型。')
}else{
console.log('传过来的是个数值类型。')
}
}
printId(100)
printId('100')
// 既可以传入 字符串 也可以传入 字符串类型的数组
// 这里 主要是想练习一下 Array.isArray(xxx) 的方法，以前都是通过 长度判断是否为字符串的
function welcomePeople(x:string[] |string){
if(Array.isArray(x)){
console.log('传过来的是个字符串类型的数组。')
}else {
console.log('传过来的是个字符串。')
}
}
welcomePeople(['1','2','3']);
welcomePeople('传入字符串。');
// 类型别名 通过 type 直接定义 对象 数值 字符串 三种类型
type obj = {
x:number,
y:number
};
type Id =number;
type name =string;
type arr = Boolean;
function isObjType(point:obj){
console.log(point.x)
console.log(point.y)
}
isObjType({x:0,y:1});
function isString(x:Id){
console.log(x)
}
// 自定义返回值 方式 之前的:void
type useArr =string;
function isMethods(str:string):useArr{
return str;
}
isMethods('返回一个字符串。')
