TypeScript的整理归纳

JavaScript的特点

强类型和弱类型

强类型语言和弱类型语言的区别

强类型：强类型的变量一经声明，就只能存储这种类型的值，其他的值则必须通过转换之后才能付给该变量，有编译器自动理解的转换，也有由程序员明确指定的强制转换，代表的就是Java、C++等等

弱类型：弱类型的变量类型则是随着需要不断转换，弱类型一般数据类型是根据值来确定的。Java、PHP

JS的问题

JS早期设计出来的目的就是简单快速的解决网页动态交互的效果。当初在设计过程中就要求，简单、容易上手，并且开发快速。所以早期的JS设计为弱类型、甚至模块化都没有。

随着JS语言的发展，目前前端工程非常的庞大，就导致了一些列问题。变量类型没有约束，导致在开发过程中很多问题都无法检测到，允许过程中才会抛出一些异常。并且JS这门语言是无需编译的，直接允许在浏览器里面，那就意味着，错误都在运行过程中出现的。

案列1：运行过程中才检测到对象没有某个属性

const object = {
   
    name:"xiaowang"
}
console.log(object.eat());

案列2：函数的参数类型不确定

function add(num1,num2){
   
    return num1 + num2
}
add("xiaowang",10)

当我们要累加两个数字时，你可以传递任何数据类型

案列3：参数传递不对，直接报错

function list(arr){
   
    return arr.reduce((sum,next)=>{
   
        return sum+=next
    },0)
}
const res = list([1,2,3,4,5]) //假设不传递数组，代码也不会报错，运行报错

案列4：有些代码运行的时候才会检测到问题

setTimeout(()=>{
   
   
},1000)

强类型的好处

1. 代码在编译的过程中，就会抛出一场，那就意味着，我们在编译的时候就可以解决很多问题，而不用上线后在检查各种错误。

2. 编码的过程中，只能提示更加的准确，比如函数的参数，参数类型等等。

   function show(obj){
        
     obj.name
   }
   

   在使用obj的时候，你是没有提示的，因为编译器不知道obj的什么类型。

3. 减少不必要的类型判断，你为了保证参数的类型是你想要的类型，你要自己编写一些类型判断的代码

   function show(num1,num2){
        
     if(typeof num1 && typeof num2){
        
        
        }
   }
   

Typescript介绍

1. TypeScript 是由微软开发的一款开源的编程语言。

2. TypeScript 是 Javascript 的超集，遵循最新的 ES6、ES5 规范。TypeScript 扩展了 JavaScript

的语法。

3. TypeScript 更像后端 java、C#这样的面向对象语言，可以让 js 开发大型企业项目。

4. 谷歌也在大力支持 Typescript 的推广，谷歌的 angular2.x+就是基于 Typescript 语法。

5. 最新的 Vue 、React 也可以集成 TypeScript。

6. Nodejs 框架 Nestjs、midway 中用的就是 TypeScript 语法。

TypeScript安装

在使用 npm 命令之前电脑必须得安装 nodejs

npm install -g typescript 
cnpm install -g typescript 

下载成功后的结果：

测试结果

tsc -v

TypeScript配置

基础编译

创建项目TS01-environment，创建index.ts文件

var username:string = "xiaofei";

将代码编译为js,终端执行

tsc index.ts

默认会在项目同级目录下面产生js文件

tsconfig.json配置

你可以创建tsconfig.json配置文件，设置编译后产生的文件路径

1. 在项目的根目录下面执行

   tsc --init
   

2. 修改配置文件，设置默认编译目录，添加js目录

   "outDir": "./js",  
   

3. 老版本 vscode 点击: 任务->运行任务-> tsc:监视-tsconfig.json 然后就可以自动生

   成代码了

   最新版本 vscode 点击: 终端->运行任务->typescript->tsc:监视-tsconfig.json 然后就

   可以自动生成代码了

   接下来在开发的时候，就可以自动完成编译功能。

TypeScript数据类型

数字类型

let price:number = 100;
//一旦申明了数据类型，就无法赋值其他类型的值
price = true; //报错

整数型和浮点数都可以使用number类型来表示

布尔类型

let flag:boolean = true;
flag = false;
console.log(flag);

字符串类型

let username:string = "xiaowang"
username = "xiaofei";

数组类型

1. 第一种定义数组的方式

   // 定义数组的第一种方式，值必须全为number类型
   let covers:number[] = [10,20,30];
   console.log(covers);
   

2. 第二种定义数组的方式

   // 定义数组的第二种方式。
   let covers2:Array<string> = ["xiaowang","xiaozhang"]
   console.log(covers2);
   

3. 第三种定义数组的方式

   // 定义数组的第三种方式
   let covers3:any = [1,"xiaowang",true]
   console.log(covers3);
   

元组类型（tuple）

元组类型（tuple）属于数组的一种，元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 比如，你可以定义一对值分别为 string和number类型的元组

let points:[string,number,boolean] = ["xiaowang",123,true];
console.log(points);

枚举类型

enum类型是对JavaScript标准数据类型的一个补充,比如：支付成功后的状态 0：失败 1：超时 2：成功,如果我们在代码中 使用0 1 2表示就不清除。这个时候可以用枚举类型

enum state {
   error=0,timeout=1,success=2};
let result = state.success;
let result2 = state.timeout
console.log(result);
console.log(result2);

const order = {
   
    id:"001",
    date:"2021-09-01",
    state:state.error
}

any任意类型

你可以给变量设置any类型，那变量就可以支持任何的数据类型

let num:any;
num =