TypeScript基础知识

1.Ts有哪些数据类型

ts的数据类型有：布尔值(boolean)、数字(number)、字符串(string)、数组、元组、枚举(enum)、any、void、空(null)和未定义(undefined)、never、object

2.Ts语法使用

 2.1基本用法和定义

let str:string='你好'              //字符串
let num:number=1                   //数字
let isLoading:string=true          //布尔
let nul:null=null                  //空
let undef:undefined=undefined      //未定义

?        表示这个参数可有可无         用法:name?:string

|         表示或,也是ts里面的断言as  用法let naem(string|numder)=100        name="你好"

[ ]       表示结构                                写到数组的时候基本上都要用到"[ ]"这个

<>      在TypeScript中，<>符号用于表示类型断言（Type Assertion）或泛型2.3版本开始，可以使用as关键字

2.2数组定义方式

2.2.1如果我们定义一个数组，数组里面是1,2,3我们怎么使用ts定义类型呢？

let arr:number[]=[1,2,3]
let arr1: Array<number> = [1,2,3];
let arr2:(number)[]=[1,2,3];

以上写法只能给arr复制为number类型，如果给number改成string呢就只能写string类型的数据了

2.2.2如果我们定义一个数组，数组里面是年龄:18和名字:"小明"我们怎么使用ts定义类型呢？

方法一：用"()"来实现
let arr3:(number|string)[]=[18,"小明"]

方法二：用type来定义
type List=(number|string)[]
let arr3:List=[18,"小明"]

上面是联合类型和定义联合类型的两种方法

2.3函数基础用法

2.3.1基础用法

function fun(a: number, b: number):number {
  return a+b
}
console.log(fun(10,15));

2.3.2函数表达式

方法一    参数和返回值分开注解
const fun=(a:number,b:number):number=>{
  return a+b
}
console.log(fun(5,10));

方法二:用type方法      函数整体注解（只针对于函数表达式）
type List=(a:number,b:number)=>number
const fun:List=(a,b)=>{
  return a+b
}
console.log(fun(5,10));

2.3.3可选参数

function fun(a: string, b?: string){
  if(b){
    //当b有值的时候返回这个
    return a+b
  }else{
    //当b没值的话返回这个
    return a
  }
}
console.log(fun("你好"));
console.log(fun("你好","小明"));

问号表示这个参数可有可无

可选参数表示当前参数可传可不传，一旦传递实参必须保证参数类型正确

 2.3.4没有返回值的函数

function fun(a: string, b: number):void {
  console.log(a,b);
}
fun("小明", 18)

JS中的有些函数只有功能没有返回值，此时使用void进行返回值注解，明确表示函数没有函数值

注意事项：在JS中如何没有返回值，默认返回的是undefined, 在TS中 void和undefined不是一回事，undefined在TS中是一种明确的简单类型，如果指定返回值为undefined，那返回值必须是undefined类型

2.3interface接口

在TS中使用interface接口来描述对象数据的类型（常用于给对象的属性和方法添加类型约束）

一旦注解接口类型之后对象的属性和方法类型都需要满足要求，属性不能多也不能少

使用interface给对象约束

interface T{
   id:number
   name:string
}
const list:T={id:1,name:"小明"}

使用interface给数组约束

interface T{
   id:number
   name:string
}
const list:T[]=[{id:1,name:"小明"},{id:2,name:"张三"}]

2.3.1接口的可选设置

interface T{
   id:number
   name?:string
}
const list:T[]=[{id:1,name:"小明"},{id:2,name:"张三"},{id:3}]

通过？对属性进行可选标注，赋值的时候该属性可以缺失，如果有值必须保证类型满足要求

2.4字面量类型

type L="男"|"女"
let list:L="男"    //list只能复制为"男"或者"女" 

字面量类型在实际应用中通常和联合类型结合起来使用，提供一个精确的可选范围 场景1：性别只能是 ’男‘ 和 ’女‘，就可以采用联合类型配合字面量的类型定义方案

2.5类型推论和any类型

2.5.1 类型推论

概念：在 TS 中存在类型推断机制，在没有给变量添加类型注解的情况下，TS 也会给变量提供类型，以下是发生类型推断的几个场景

声明变量并赋值时

定义一个num不给它赋值ts会给它类型推论成number类型
let num = 10
//可以看num下面的波浪线，推论之后let num: number

决定函数返回值时

一些小建议

1. 开发项目的时候，能省略类型注解的地方就省略

2. 刚开始学TS，建议对所有类型都加上，先熟悉

3. 鼠标放至变量上，VsCode 自动提示类型

2. any类型

作用：变量被注解为any类型之后，TS会忽略类型检查，错误的类型赋值不会报错，也不会有任何

let list1:any="你好"
let list2:any=1
let list3:any={name:"小明",age:18}
let list4:any=['1',2,false]

注意：any 的使用越多，程序可能出现的漏洞越多，因此不推荐使用 any 类型，尽量避免使用

3. 类型断言

作用：有些时候开发者比TS本身更清楚当前的类型是什么，可以使用断言（as）让类型更加精确和具体 需求：获取页面中的id为link的a元素，尝试通过点语法访问href属性

let str: any = "hello";
let len2: number = (str as string).length;
console.log(len2);

4. 类型断言的注意事项

类型断言只能够「欺骗」TypeScript 编译器，无法避免运行时的错误，滥用类型断言可能会导致运行时错误

function fun(a:number | string){
console.log((a as string).length);
}
fun("del")

说明：利用断言把a变量的类型指定为精确的number，但是传参的时候还是可以传递number类型或者string类型均满足类型要求，但是传递string会导致运行时错误

2.6泛型

2.6.1 什么是泛型

概念：泛型（Generics）是指在定义接口、函数等类型的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性, 使用泛型可以复用类型并且让类型更加灵活 思考：下面的俩种数据结构如何使用interface接口实现类型注解？这样做有何问题？

2.6.2 泛型接口

语法：在接口类型的名称后面使用<T>即可声明一个泛型参数，接口里的其他成员都能使用该参数的类型

通用思路：

1. 找到可变的类型部分通过泛型抽象为泛型参数（定义参数）

2. 在使用泛型的时候，把具体类型传入到泛型参数位置 （传参）

2.6.3 泛型别名

语法：在类型别名type的后面使用<T>即可声明一个泛型参数，接口里的其他成员都能使用该参数的类型

需求：使用泛型别名重构ResData案例

2.6.4 泛型函数

语法：在函数名称的后面使用<T>即可声明一个泛型参数，整个函数中（参数、返回值、函数体）的变量都可以使用该参数的类型

需求：设置一个函数 createArray，它可以创建一个指定长度的数组，同时将每一项都填充一个默认值(多种类型)

2.6.5 泛型约束

作用：泛型的特点就是灵活不确定，有些时候泛型函数的内部需要访问一些特定类型的数据才有的属性，此时会有类型错误，需要通过泛型约束解决

添加约束