TypeScript 精炼及深入 | 青训营

1.TypeScript VS JavaScript

TypeScript	JavaScript
JavaScript的超集，用于解决大型项目的代码复杂性	一种脚本语言，用于创建动态网页
强类型，支持静态和动态类型	动态弱类型语言
可以在编译期间发现并纠正错误	只能在运行时发现错误
不允许改变变量的数据类型	变量可以被赋值成不同类型

TypeScript带来了什么？

• 类型安全
• 下一代 JS 特性
• 完整的工具链

TypeScript学习推荐：

• Awesome Typescript ：TS开源教程及应用
• Typescript Playground : TS到JS在线编译

2.TypeScript基础--基础类型

• boolean、number、string
• 枚举 enum
• any、unknown、void
• never
• 数组类型 []
• 元组类型 tuple

3.TypeScript基础--函数类型

定义：TS定义函数类型时，要定义输入参数类型和输出类型
输入参数：参数支持可选参数和默认函数
输出函数：输出可以自动推断，没有定义返回值时，默认为 void 类型
函数重载：函数名相同但是参数不同，可以通过重载支持多种类型

❗注意：重载函数的多义性无法确定，直到遇到函数调用。 此时，将为函数调用中的每个自变量生成集，并且可以确定是否存在明确的重载。 这意味着，多义性可能会保留在代码中，直到它们由特定函数调用引发。

4.TypeScript基础--interface

定义：接口是为了定义对象类型 特点：

• 可选属性：？
• 只读属性：readonly
• 可以描述函数类型
• 可以定义自定义属性(通过 as 或 [propName: string]: any 来制定可以接受的其他额外属性)

小结：接口非常灵活 duck typing

5.TypeScript基础--类

定义：写法和JS差不多，增加了一些定义 特点：

• 增加了public、private、protected
  - public 修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public 的
  - private 修饰的属性或方法是私有的，不能在声明它的类的外部访问
  - private 修饰的属性或方法是私有的，不能在声明它的类的外部访问

🔗三种修饰符的区别

• 抽象类：
  • 只能被继承，不能被实例化
  • 作为基类，抽象方法必须被子类实现
• interface约束类，使用implements关键字

2.TS进阶

1.TypeScript进阶--高级类型

1.联合类型 |
2.交叉类型 &
3.类型断言：TypeScript 允许你覆盖它的推断，并且能以你任何你想要的方式分析它，这种机制被称为「类型断言」。TypeScript 类型断言用来告诉编译器你比它更了解这个类型，并且它不应该再发出错误。

interface Foo {
  bar: number;
  bas: string;
}

const foo = {} as Foo;
foo.bar = 123;
foo.bas = 'hello';

🤔TypeScript 是怎么确定单个断言是否足够？ 当 S 类型是 T 类型的子集，或者 T 类型是 S 类型的子集时，S 能被成功断言成 T。这是为了在进行类型断言时提供额外的安全性，完全毫无根据的断言是危险的，如果你想这么做，你可以使用 any。 4.类型别名：任何类型的名称 实际上，您可以使用类型别名来为任何类型命名，而不仅仅是对象类型。 例如，类型别名可以命名联合类型：

type ID = number | string;

❗注意：别名只是别名 - 您不能使用类型别名来创建相同类型的不同/不同 "versions"。 当您使用别名时，就好像您已经编写了别名类型。

📋type 和 interface 对比

相同点：

• 都可以定义对象或函数
• 都允许继承

不同点：

• interface 是TS用来定义对象，type是用来定义别名方便使用
• type可以定义基础类型，interface不行
• interface合并重复声明，type不允许重复定义

适用场景：开发时使用组合/交叉类型时，可以使用 type，涉及到类时，使用interface，其它情况，按需选用。

2.TypeScript进阶--泛型--什么时候需要泛型？

官方定义：软件工程中，我们不仅要创建一致的定义良好的 API ，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。

在像 C ＃和 Java 这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。

3.TypeScript进阶--泛型

基本定义： 1.泛型的语法是<>里面写类型参数，一般用 T 表示 2.使用时有两种方法指定类型： 1.定义要使用的类型 2.通过 TS 类型推断，自动推导 3.泛型的作用是 临时占位，之后通过传来的类型进行推导

4.TypeScript进阶--泛型工具类型--基础操作符

• typeof :获取类型
• keyof :获取所有键
• in :遍历枚举类型
• T[K] :索引访问
• extends :泛型约束

5.TypeScript进阶--泛型工具类型--常用工具类型

• Partial:将类型属性变为可选
• Required:将类型属性变为必选
• Readonly:将类型属性变为只读
• Pick 、Record ...

type Partial<T> = {
  [P in keyof T]?:T[P];
};

type Required<T> = {
  [P in keyof T]-?:T[P];
};

type Readonly<T> = {
  readonly [P in keyof T]:T[P];
};

3.TS实战

1.TS实战--声明文件

• declare：三方库需要类型声明文件
• .d.ts ：声明文件定义
• @types：三方库TS类型包
• tsconfig.json：定义TS的配置

2.TS实战--泛型约束后端接口类型

import axios from 'axios';

//定义接口
interface API{
    '/book/comment':{
        id:number,
    },
    '/book/detail':{
        id:number,
        comment:string,
    },
    '/book/user':{
        account:number,
        password:any,
    }
}

//用于向指定的 URL 发起 POST 请求，并传递一个对象作为请求的数据,
//函数使用了 TypeScript 的泛型 (<T extends keyof API>) 来指定请求的 URL 类型，
//并使用对象索引类型 (API[T]) 来指定请求数据的类型
function request<T extends keyof API>(url:T,obj:API[T]){
  //axios.post() 方法返回一个 Promise，用于处理请求的响应
    return axios.post(url,obj);
}

case1:正确使用

request('/book/user',{
    account:20,
    password:'yes12345'
});

case2: 参数错误

request('/book/detail',{
    id:1,
    comment:12345//报错：TS2322: Type ' number ' is not assignable to type ' string '.
})

case3:路径错误

//报错信息：TS2345: Argument of type ""/book/star"" is not assignable to parameter of type 'keyof Apl'.
request('/book/star',{
    type:'科幻',
    count:21,
});

2.1 补充：axios 介绍

axios 是一个基于 promise 的HTTP库，可以运用于浏览器和 node.js 中 特点：

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

🔍 XSRF是什么？ XSRF（跨站请求伪造）是一种恶意的攻击手段，也称作CSRF（跨站点请求伪造）。它是指攻击者在受害者用户与攻击者制作的恶意网页之间以受害者的身份发起恶意请求，从而实施网站攻击。

XSRF攻击通常是由HTML表单，图片标记和JavaScript脚本等技术实现的，主要用于在受害者和他们正在访问的网站之间执行恶意操作。攻击者通常可以利用XSRF攻击实施多种利害关系，其中包括盗取信息、欺骗受害者来完成伪装的网站交易，甚至是篡改或删除敏感的网站数据。

为了防止XSRF攻击，开发者使用CSRF令牌来确认用户提交的表单是否是来自受信任的源。它通常会在用户提交表单时生成，并保存在服务器端。在用户提交表单时，服务器会检查提交的令牌是否与保存在服务器上的令牌相匹配，以确保表单的安全性。

XSRF是一种公认的攻击手段，所以确保实施强大的防护措施非常重要。编写HTTP头以验证跨站访问请求的源和目标是一种控制措施，并且有助于防止恶意的XSRF攻击。

此外，开发者也可以使用安全的Cookies和增强的会话管理功能来防止XSRF攻击。确保所有网络通信仅由受信任的客户端执行，从而减少攻击者利用攻击来实施XSRF攻击的可能性也是必要的准备措施之一。 另外，确保用户登录时总是使用相同的域名或IP地址，并实施SSL双因素验证，从而最大程度地降低XSRF攻击的风险也是非常重要的。以上是防止XSRF攻击的一些常用方法。

2.2 补充：认识npm

npm: node.js 的包管理工具 为什么需要使用包管理工具？ 因为在Node.js上开发时，很多时候要用到别人写的JS代码，如果每次都上官网查询对应包，下载并解压，然后使用，这是非常麻烦的事情，npm就应运而生了，大家把自己的模块打包放至npm官网上，当我们需要使用时，直接在终端通过 npm 命令安装就可以直接使用了，简化了我们自己去官网下载的流程，重点是，npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。否则，靠我们自己手动管理，肯定既麻烦又容易出错。

4.学习小结

1.TS的类型检查比JS更严格，在编译之前就可以实现，而无需在运行后再报错，所以现在更倾向于使用TS
2.TS其实知识也很多，官方文档写的很全面很详细，但是其实看久了会觉得有点枯燥无味，我的组长就告诉我一个好方法：先去多写，当需要使用一个用法的时候，发现自己不知道或者不熟悉就上官方文档去查，再去细细的学一遍，因为官方文档上的所有东西不可能每一个都用的上，所以需要的时候再去查就好啦~
3.学好TS，眼睛看会了，手也要跟上来，多敲代码才能做到 “熟能生巧，举一反三” 继续加油鸭~😛