TypeScript介绍

TypeScript是什么？

TypeScript（简称:TS）是Javascript的超集（js有的 TS都有）。

TS = Type + Javascript (在js的基础上，为js添加了类型支持)

//TypeScript 代码，有明确的类型，即  :number (数值类型)
let age1:number = 18;

//javascript 代码：无明确的类型
let age2 = 18

注：TypeScript是微软开发的开源编程语言，可以在任何运行Javascript的地方运行

TypeScript为什么要为JS添加类型支持？

背景：JS的类型系统存在“先天缺陷”，JS代码中绝大部分错误都是类型错误(UncaughtTypeError).

问题：增加了找Bug、改Bug的时间，严重影响开发效率。

从编程语言的动静来区分，TypeScript属于静态类型的编程语言，JS属于动态类型的编程语言。

静态：编译期做类型检查；动态：执行期做类型检查；

代码编译和执行顺序：编译=>执行

对JS来说：需要等到代码真正去执行的时候才能去发现错误（晚）。

对于TS来说：在代码编译的时候（代码执行前）就可以发现错误（早）。

并且，配合VSCode等开发工具，TS可以提前到在编写代码的同时就发现代码中的错误，减少找Bug、改Bug的时间。

TypeScript相比JS的优势

更早（写代码的同时）发现错误，减少找Bug、改bug的时间，提升开发效率。
程序中任何位置的代码都有代码提示，随时随地的安全感，增强开发体验。
强大的类型系统提升了代码的可维护性，使得重构代码更加容易。
支持最新的ECMAScript语法，优先体验最新语法，让你走在前端技术的前沿。
TS的类型推断机制，不需要在代码中每个地方都显示标注类型，让你享受优势的同时，尽量降低了成本。

除此之外，Vue3源码使用TS重写、Angular默认支持TS、React与TS完美配合，TypeScript已成为大中型前端项目的首选编程语言。

TypeScript初体验

安装编译TS的工具包

为什么要安装编译TS的工具包？因为 Node.js/浏览器 只认识JS代码，不认识TS代码，需要先将TS代码转化为JS代码，然后才可以运行。

安装命令 npm i -g typescript

typescript包 用来编译J代码的包，提供了 tsc命令，实现了TS => JS的转化。

验证是否安装成功 tsc -v (查看TS版本)。

编译并运行TS代码

1.创建hello.ts文件（注意，ts文件的后缀名为 .ts ）

2.将TS编译为JS,在终端输入命令tsc hello.ts (此时，在同级目录中会出现一个同名的js文件）。

3.执行JS代码，在终端输入命令node hello.js 。

说明：所有合法的JS代码都是TS代码，有JS基础只需要学习TS的类型即可。

注意：由TS编译生成的js文件，代码中就没有类型信息了。

简化运行TS步骤

每次修改代码后，都需要执行两个命令才能运行TS代码，太繁琐。

简化方式：使用tsc-node包，直接在Node.js中执行TS代码。

安装：npm i -g ts-node (ts-node包提供了 ts-node的命令)。

使用：ts-node hello.ts

注：ts-node命令在内部将TS转化为JS，然后再运行JS代码。

TypeScript常用类型

概述

TypeScript是JS的超集，TS提供了JS的所有功能，并且额外增加了：类型系统

所有的JS代码都是TS代码。
JS有类型（比如 number/string 等），但是JS不会检查变量的类型是否发生变化，而TS会检查。

TypeScript类型系统主要优势：可以显示标记出代码中的意外行为，从而降低了发生错误的可能性。

如上两张截图，分别在js/ts中按照步骤编写代码，js只有在运行时才会报错，而ts在编写时就会报错并有明确的错误提示。

类型注解

示例代码

let age: number = 18;

说明：代码中的: number就是类型注解。

作用：为变量添加类型约束。比如，上述代码中，约定变量age的类型为number（数值类型）。

解释：约定了什么类型，就只能给变量赋值该类型的值，否则就会报错。

常用基础类型概述

可以将TS中常用基础类型细分为两类： 1.JS已有类型。2.TS新增类型。

1.JS已有类型

原始类型：number 、string 、boolean 、null 、 undefined 、symbol
对象类型：object （包括：数组、对象、函数等）

2.TS新增类型

联合类型、自定义类型（类型别名）、接口、元组、字面量类型、枚举、void、any等。

原始类型

原始类型：number 、string 、boolean 、null 、 undefined 、symbol

特点：简单，完全按照JS中类型的名称来编写。

let age: number = 18;
let myName: string = "王老师";
let isLoading: boolean = false ;
let a: null = null;
let b: undefined = undefined;
let s: symbol = Symbol();

数组类型([]/Array<>)和联合类型(|)

对象类型：object（包括：数组、对象、函数等）

特点：对象类型在TS中更加细化，每个具体的对象都有自己的类型语法。

数组类型的两种写法：（推荐使用number[]写法）
```
  let numbers: number[] = [1,3,5];
  
  let strings: Array<string> = ['a','b','c'];
  
```
需求：如果数组中既有number类型，又有string类型，这种类型该如何写？
```
 let arr: (number | string)[] = [1,2,'a','b'];
```
解释：｜（竖线）在TS中叫做联合类型（由两个或多个其它类型组成的类型，表示可以使这些类型中的任意一种）。

小贴士：这是TS中联合类型的语法，只有一根竖线，不要和JS中的或（||） 混淆了哦。

类型别名（自定义类型）(type)

类型别名（自定义类型）:为任意类型起别名。

使用场景：当同一类型（复杂）被多次重复使用时，可以通过类型别名，简化该类型的使用。

    type CustomArray = (number | string | boolean)[] 
    
    let arr1: CustomArray = [1,'a',true]
    
    let arr2: CustomArray = [2,'b',false]

解释：

1.使用 type 关键字来创建类型别名。

2.类型别名（比如此处的CustomArray）可以是任意的合法的变量名称。

3.创建类型别名后，直接使用该类型别名作为变量的类型注解即可。

函数类型

函数类型实际上指的是：函数参数和返回值的类型。

为函数指定类型的两种方式： 1.单独指定参数、返回值的类型。2.同时指定参数、返回值的类型

1.单独指定参数、返回值的类型

    function add1(num1: number,num2: number):number{
        return num1+num2
     }
     
    const add2 = (num1: number,num2: number):number=>{
        return num1 + num2;
     }

2.同时指定参数、返回值的类型

    const add: (num1: number,num2: number) =>number = (num1,num2)=>{
        return num1 + num2
    }

注：当函数作为表达式时，可以通过类似箭头函数形式的语法来为函数添加类型。这种方式只适用于函数表达式。

3.如果函数没有返回值，那么，函数返回值类型为void

  function greed(name: string): void{
          console.log("hello")
   }

4.可选参数(?)

在使用函数实现某个功能时，参数可传可不传，这种情况下，再给函数指定类型时，就可以用到可选参数了。

例如：数组的slice方法，可以slice(),也可以slice(1),还可以slice(1,3)。

语法：在可传可不传的参数名称后面添加 ?(问号)。

    function mySlice(start?: number,end?: number): void{
        console.log("起始索引:",start,"结束索引:",end)        
     }

注意：可选参数只能出现在参数列表的最后，也就是说可选参数后面不能再出现必选参数。

对象类型({})

JS中的对象是由属性和方法构成的，而TS中的对象的类型就是在描述对象的结构（有什么类型的属性和方法）。

1.对象类型的写法

    let person: {name: string;age: number;sayHi(): void} = {
        name:"jack",
        age:18,
        sayHi(){}
     }

解析：

直接使用 {}来描述对象结构，属性采用属性名：类型的形式；方法采用方法名(): 返回值类型的形式
如果方法有参数，就在方法名后面的小括号中指定参数类型（比如:greet(name: string): void).
在一行代码中指定对象的多个属性类型时，使用；（分号）来分割。
如果一行代码只指定一个属性类型（通过换行来分割多个属性类型），可以去掉；（分号）。
方法的类型也可以使用箭头函数的形式（例如： {sayHi: ()=>viod}).

2.可选属性(?)

对象的属性和方法，也可以设置可选的，此时就用到可选属性了。

例如，我们在使用axios({...})时，如果发送get请求，methods属性就可以省略。

    function myAxios(config: {url: string;method?: string}){
        console.log(config)
    }
    myAxios({url:"192.168.0.3"})

可选属性的语法与函数的可选参数语法一致，都是使用？（问号）来表示。

接口(interface)

当一个对象类型被多次使用时，一般会使用 接口（interface） 来描述对象的类型，达到复用的目的。

    interface IPerson {
        name:string
        age:number
        sayHi(): void
    }   
    
    let person1: IPerson={
        name:'jack',
        age:18,
        sayHi(){}
    }   
    
    let person2: IPerson={
        name:'zhangsan',
        age:19,
        sayHi(){}
    }

1.使用interface关键字声明接口。

2.接口名称（比如此处的IPerson）可以是任意合法的变量名称。

3。声明接口后，直接使用接口名称作为变量类型。

4.因为一行只有一个属性类型，因此属性类型后没有；（分号）。

interface（接口）和type（类型别名）的对比：

相同点：都可以给对象指定类型。
不同点：
- 接口只能为对象指定类型。
- 类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名。

接口继承

如果两个接口之间有相同的属性或方法，可以将公共的属性或方法抽离出来，通过继承实现复用。

比如，下面这两个接口都有x,y两个属性，重复写两次，可以但很繁琐。

    interface Point2D {x: number,y: number }
    
    interface Point3D {x: number,y: number,z: number }

通过继承实现：

    interface Point2D {x: number,y: number }
    
    interface Point3D extends Point2D {z: number}

使用extends关键字实现了接口 Point3D 继承Point2D。
继承后，Point3D就有了Point2D的所有属性和方法。（此时的Point3D同时拥有x,y,z三个属性）。

元组（Tuple）

场景：在地图中，使用经纬度来标记位置信息。

可以使用数组来记录坐标，那么，该数组中只有两个元素，并且这两个元素都是数值类型。

    let position: number[] = [37.8272,113.3729]

使用number[]的缺点：不严谨，因为该类型的数组中可以出现任意多的数字。

更好的方式：元组（Tuple）

元组类型是另一种类型的数组，它确切地知道包含多少个元素，以及特定索引对应的类型。

    let position:[number,number] = [37.8272,113.3729]

元组类型可以确切地标记出有多少个元素，以及每个元素的类型。
该示例中，元组有两个元素，每个元素的类型都是number。

类型推论

在TS中，某些没有明确指出类型的地方，TS的类型推论机制就会帮助提供类型。

换句话说，由于类型推论机制的存在，这些地方类型注解可以省略不写！

发生类型推论的2种常见场景： 1.声明变量并立刻初始化 2.决定函数返回值

注意：这两种情况，类型注解可以不写。

推荐：能省略类型注解的地方就省略，充分利用TS的类型推论能力，提升开发效率。

技巧：如果不知道类型，可以通过鼠标放在变量名称上利用VSCode的提示来查看类型。

类型断言（as）

使用类型断言：

    const alink = document.getElementById("link") as HTMLAnchorElement

解释：

使用as关键字实现类型断言
关键字as后面类型是一个更加具体的类型（HTMLAnchorElement是HTMLElement的字类型）
通过类型断言，alink的类型变得更加具体，这样就可以访问a标签的所有属性或方法了。

另一种语法，使用<>语法，这种不常用，知道即可：

     const alink = <HTMLAnchorElement>document.getElementById("link")

技巧：在浏览器控制台，通过console.log（）打印DOM元素，在属性列表的最后面，即可看到该元素的类型。

操作dom使用类型断言。

字面量类型

let str1 = "Hello TS"

const str2 = "hello TS"

如上声明的变量和常量，通过TS的类型推论机制，得到答案：

1.变量str1的类型为：string

2.常量str2的类型为：Hello TS

这是为什么呢？

1.str1是个变量（let），它的值可以是任意字符串，所以类型为：string

2.str2是一个常量（const），它的值不能变化只能是“Hello TS”,所以它的类型也是Hello TS

注意：此处的Hello TS就是一个字面量类型，也就是说某个特定的字符串也可以作为TS中的类型。除了字符串外，任意的JS字面量（比如对象、数字等）都可以作为类型使用。

听起来很抽象，也很奇怪，为什么会有这样的设计模式？我们接下来设计一种场景：

例如，在贪吃蛇游戏中，游戏的方向只能选择上、下、左、右中的一个。这个时候如果用字符串类型，那么所有的字符都可以选择。如果使用字面量类型配合联合类型，表示一组明确的可选值列表，就能满足需求。

因此：

字面量类型使用模式：字面量类型配合联合类型使用

字面量类型使用场景：用来表示一组明确的可选值列表

function changeDirection(direction:'up' | 'down'| 'left'|'right'){
    console.log(direction)
}
 changeDirection('up')//打印值为 up

参数direction的值只能是up/down/left/right中的一个
相对于string类型，字面量类型更加精确、严谨

枚举类型（enum）

枚举的功能类似于字面量类型 + 联合类型的组合功能，也可以表示一组明确的可选值。

枚举：定义一组命名常量。它描述一个值，该值可以是这些命名常量中的一个。

    enum Direction {Up,Down,Left,Right}
    
    function changeDirection(direction: Direction){
        console.log(direction)
    }
    
   changeDirection(Direction.Up)//打印值为 0

使用enum关键字定义枚举
约定枚举名称、枚举中的值以大写字母开头
枚举中的多个值之间通过，（逗号）隔离
定义好枚举后，直接使用枚举名作为类型注解

枚举值：

将鼠标移入Direction.Up，可以看到Direction.Up值为0
枚举成员是有值的，从0开始的自增的数值
我们把枚举成员的值为数字的枚举，称为 数字枚举

当然，也可以给枚举中的成员初始化值

  enum Direction {Up = 10,Down = 8,Left = 6,Right}
  //Right值为7

字符串枚举：枚举成员的值是字符串

     enum Direction {
         Up = "Up",
         Down = "Down",
         Left = "Left",
         Right ="Right",
     }

注意：字符串枚举没有自增长行为，因此，字符串枚举的每个成员必须有初始值

枚举是TS为数不多的非JavaScript类型级扩展（不仅仅是类型）的特性之一。

因为：其它类型仅仅被当成类型，而枚举不仅用作类型，还提供值（枚举成员都是有值的）。

也就是说，其它的类型会在编译为JS代码时自动移除，但是枚举类型会被编译成JS代码。

说明：枚举与前面讲到的字面量类型+联合类型组合的功能类似，都用来表示一组明确的可选值列表。

一般情况下，推荐使用字面量类型+联合类型组合的方式，因为相对枚举，这种方式更加直观、简洁、高效。

any类型

原则：不推荐使用any！ 这会让TypeScript变为“AnyScript”(失去TS类型保护的优势）。

因为当值的类型为any时，可以对该值进行任意操作，并不会有代码提示。

let obj: any = {x:0}

obj.bar = 100

obj()


const n: number = obj

以上代码编写都不会有任何类型错误提示，即使可能存在错误！
尽可能避免使用any类型，除非临时使用any来“避免”书写很长、很复杂的类型！
其它隐式具有any的情况：1.声明变量不提供类型也不提供默认值 2.函数参数不加类型
注意：因为不推荐使用any，所以以上两种情况都应该提供类型！

typeof操作符

众所周知，js提供了typeof操作符，用来在js中获取数据的类型

console.log(typeof "hello world")//string

实际上，TS也提供了typeof操作符：可以在类型上下文中引用变量或者属性的类型（类型查询）。

使用场景：根据已有变量的值，获取该值的类型，来简化类型的书写。

 let p = {x:1,y:1}

function formatPoint (point: typeof p ){
}

// function formatPoint (point: {x: number;y: number} ){
// }

formatPoint({x:1,y:100})

使用 typeof 操作符来获取变量p的类型，结果与对象字面量形式类型相同
typeof出现在类型注解的位置（参数名称的冒号后面）所处的环境在类型上下文（区别于js）
注意：typeof只能用来查询变量或者属性的类型，无法查询其它形式的类型（比如函数调用的类型）

后续会更新高级类型等，敬请期待...

从0开始- 超级详细的TypeScript学习笔记-基础篇