TypeScript

一，TypesScript

TypeScript是具有类型语法的JavaScript，是一门强类型的编程语言

image.png
image.png
优点是:

• 1 静态类型检测，提前发现代码错误。而js只有代码运行时才可以发现错误

  
  image.png

二，TS编译环境的搭建

为什么要进行TS编译环境的搭建呢？
因为TS编写的代码无法直接在浏览器中运行的，最终还需要编译成js代码才可以进行运行。

image.png

• 1:首先全局安装TS包（编译引擎）->注册tsc命令
  npm install -g typescript
• 2:新增hello.ts文件,执行tsc hello.ts命令生成hello.js文件

• 3:执行node hello.js查看js文件运行结果

  
  image.png
  image.png

当然在项目实际开发中是不能这样一个文件手动生成
**现在主流的项目都是采用工程化的开发模式,(webpack，vite)，TS的环境已经内置了，无需手动安装配置，通过以下命令可以创建一个最基础的自动化ts编译环境

image.png

三， TS类型注解

TS类型注解是给变量添加类型约束，使变量只能被赋值约定好的类型，同时可以有相关的类型提示

image.png
TS支持的常用类型注解有：
JS原有的类型：
number string boolean null undefined 数组 函数
TS新增的类型：
联合类型，类型别名，接口，字面量类型，泛型，枚举，void，any等
简单类型注解的格式 变量：注解
image.png
需要全小写
数组类型注解
不仅可以限制变量类型为数组，对其的数组成员变量也可以进行限制。并且编码时也可以提示对应数组的属性和方法
语法：
let arr：number[] = [1,2,3]; 推荐写法

let arr:Array<number> = [1,2,3]; 泛型写法

联合类型
就是可以将多个类型合并使用,比如数组既可以存放number类型又可以存放string类似数据
写法:let arr:(number|string)[] = ['侯旭',18];
类型别名
就是进行类型的简化复用
比如说我要生成let arr:(number|string)[] = ['侯旭',18];类型的数组5个,那么每次都要写很长,那么就可以这样简化写
type A1= (number|string)[];
let arr :A1 = ['侯旭',18];
let arr :A1 = ['侯旭',18];
let arr :A1 = ['侯旭',18];
大驼峰命名法
函数类型的基础使用

function fn(num1:number,num2:number):number{

    return num1+num2;
}

限制的参数的类型和返回值必须是number
箭头函数写法

type AddFn = (num1:number,num2:number)=>number
const add:AddFn=(num1,num2)=>{

    return num1+num2;
}

可选参数
表示函数中的参数可传可不传,一旦传递必须保证参数类型正确

image.png
无返回值
此函数只有功能,此时void进行返回值,明确表示函数没有函数值

function fn(index:string,index2:string):void{

    console.log(index+index2);
    
}
fn('q','q');

interface接口
用来给对象的属性和方法添加类型约束。

image.png
interface使用场景:
1前端向后端发送数据:收集表单对象时的类型校验
2前端使用后端数据:渲染后端对象数组列表时智能提示
image.png

interface可选选项配置

interface student{
    type:string
    size?:string
}

接口的继承
作用就是完成代码的复用问题
使用extend实现接口继承,实现类型复用
比如说有两个类型,但另一个类型只比其多了一个属性

image.png
可以写成;
image.png
比如后端传过来的response数据是
image.png

定义为这个接数据

image.png

js字面量类类型
普通类型可以赋任何值

let num:number;
num= 100;
num = 200;

字面量类型

let num:100;
num=100;只能赋值100

这个字面量类型通常和联合类型结合起来一起使用,提供一个精确的可选范围。
比如说性别只有男女 ，那么就可以定义

type gender = '男'|'女';
let sex :gender = '';//只能选男女。

如elementUI组件底层就是用ts语言编写的

image.png
类型断言
开发者比TS更清楚我当前要使用什么类型，可以使用断言as让类型匹配更加精确和具体。
泛型
定义接口函数等类型的时候，不预先指定具体的类型，而在使用的时候在指定类型，使用泛型可以复用类型并更加灵活

interface User{
    name:string
    age:number
}
interface Good{
    name:string
    goods:string
}
//创建一个公共方法
interface ResData<T>{
    code:number
    msg:string
    data:T
}

let userdata:ResData<User>={
    code:404,
    msg:'未找到',
    data:{
        name:'hx',
        age:55
    }
}

image.png
泛型函数
function fn<T> (){}

设置一个函数create,他可以创建一个指定长度的数组,同时将每一项都填充一个默认值(多种类型)

image.png