TypeScript

撒么快思晨

• TS是什么？——js的超集（js有的它都有，完全兼容）、为js添加了类型支持。js弱类型动态语言，java强类型静态语言。
• 弱类型：声明变量无需指定类型。强类型：声明变量时必须指定类型。
•   为什么要用ts? ———好处：找错误（js执行才会发现错误，ts写的时候就能发现），有提示（. 会有很多方法）。

撒么工具包

• typescript：npm i -g typescript  (使用：tsc -v 查看ts的版本，查看是否安装成功。)

创建基于TS的vue项目

npm create vite 

TS基础

类型注解

let age:number = 18

• :number就是类型注解，为变量添加类型约束。约定了什么类型就是什么类型，就只能给变量赋值该类型的值，否则就会报错。

TS类型

• js已有的

基础类型：number / string / boolean / null / undefined

复杂类型：数组、函数、对象

声明数组的两种方式：

let arr:number[] = []  //number类型的数组

let arr1:Array<number> = [1,2,3]

• TS新增的（函数、数组、对象都是js ）

联合类型

        联合类型—— ：|（或，或的优先级较低，需要用（）包裹提升优先级）

        需求：希望数组里面可以存数字或字符串

•  let arr:(number|string) [] = [1,2,3,'1']

•   一旦使用联合类型，说明arr中存储的既可能是number 也可能是string，所以只能.出来共有的方法

---

自定义类型（类型别名）

需求：希望N个数组里面可以存数字或者字符串

type ArrType = (number|string) []

let arr1:ArrType = [1,2,'2']

---

函数类型

   需求：设置函数的参数类型（number） + 返回值类型

• 在js中可以用下面的方式定义函数，ts不可以哦，因为ts必须在传参的时候定义参数的类型而返回值会自动推断类型

• function del(a:number,b:number){
      return a+b
  }

• 函数别名：

• type Fun = (a:number,b:number) => number
  
  const fb:Fun = (a,b) => {
      return a+b
  }
  

• 类型别名 通常是给箭头函数 / 函数表达式使用，不会给函数声明使用

---

void

需求：定义一个打印文本的函数 不需要返回值

如果函数没有返回值（js通常是undefined），但ts给我们的类型推断通常为void

在ts中写 :undefined  设置返回值类型的意思是  必须返回一个undefined

---

可选参数：？

const F = (name?:string,age?:number):void => {
    console.log(name,age)
}
F('ju')

注意：必选参数不能在可选参数后面

---

对象类型

let obj:{
    name:string,
    age:number,
    sayHi:(concent:string)=>void
    sai(name:string):void
}={
    name:'ju',
    age:28,
    sayHi(concent){
        console.log(concent)
    }
    
}

或

type Person ={
    name:string,
    age:number,
    sayHi:(concent:string)=>void
}
let obj:Person ={
    name:'ju',
    age:28,
    sayHi(concent){
        console.log(concent)
    }
}

接口

作用：给对象约束属性和方法

 interface Persons {
    name:string
    age:number
    sayHi:()=>void
 }
 const p :Persons ={
    name:'ju',
    age:12,
    sayHi(){

    }
 }

interface 接口名{
    属性名：类型
}

接口和type的区别：

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

注意：能用type 就用type！！！！因为灵活！！！

接口的继承

Students具备Persons 的所有 属性方法、实现接口复用。

 interface Persons {
    name:string
    age:number
    sayHi:()=>void
 }
 const p :Persons ={
    name:'ju',
    age:12,
    sayHi(){

    }
 }
 interface Students extends Persons {
    score:number
    sleep:()=>void
 }
const pp:Students ={
    name:'jj',
    age:18,
    sayHi(){

    },
    score:100,
    sleep(){
        
    }

}

扩展题：type 如何 和 interface 一样实现继承效果？

• & 与连接符：既要满足前面的也要满足后面的
• | 或连接符：满足其中一个即可

type pe ={
    name:string
    age:number
}
type pp={
    score:string
} & pe

元祖

元祖：限定数组的固定类型和数据（在地图中使用经纬度坐标来标记位置信息）

let arr:[number,number] =[1.22222,1.223444]
只能有两位

字面量类型

使用场景：比如游戏中的上下左右 方向

type direction = '上'|"下"|"左"|"右"
function a(direction:direction){

}
a("上")

枚举

类似于字面量

// type direction = '上'|"下"|"左"|"右"

默认没有值de:
enum direction{
上,下,左,右
}
function a(direction:direction){
console.log("枚举值",direction)
}
a(direction.上)
a(direction.下)
a(direction.左)
a(direction.右)

这样给值：
enum direction{
上=1,下=2,左=3,右=4
}

枚举可以通过键找值，也可以通过值找键：
direction[1]  就是上 

枚举如果没有值 默认从0开始

any类型

当值得类型为any时，可以对该值进行任意操作，并且不会有代码提示（所以不推荐）

其他隐式为any的情况：

• 声明变量不提供类型也不提供默认值 
• 函数参数不加类型

类型断言

强行指定获取到的结果类型：as

总结：当函数获取到的结果类型较为宽泛时，我们又知道具体类型，就可以使用断言强行指定类型

泛型

在调用函数是传入泛型指定的具体类型

<T> 在声明泛型
val:T 使用泛型


function getVal<T>(val:T){
    return val
}
getVal<number>(123)
getVal<string>('abc')

简化泛型函数调用：

function getVal<T>(val:T){
    return val
}
getVal(123)
getVal('abc')

类型约束

e.g：创建描述约束的接口，该接口要求提供length属性，通过extends关键字使用该接口，为泛型（类型变量）添加约束，该约束表示：传入的类型必须具有length属性

注意：传入的实参（如：数组）只要有length属性即可（类型兼容性）

// 定义接口
interface Ilength {
    length:number
}
// 添加约束
function getLen<L extends Ilength>(val:L){
console.log(val.length);

}