# ts_basic_92
**Repository Path**: errlei/ts_basic_92
## Basic Information
- **Project Name**: ts_basic_92
- **Description**: ts基础语法的学习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 2
- **Created**: 2023-07-31
- **Last Updated**: 2023-08-18
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
## vue2的ui组件库
- element-ui --- pc，web端
- vant-ui - 移动端
- uni-view u-uni 小程序的组件库
- vue3
- element-plus，ant-design-vue --- pc，web端
- vant-ui ---- 移动端
## vue2创建项目
- vue-cli --- 底层是webpack
- vite
## vite 与 webpack 的区别 --- 面试题
- webpack是一个模块打包器，在编译过程中，会将所有模块打包为一个bundle.js文件，然后再运行这个文件，更新速度会随着代码体积增加越来越慢
- vite 是一个基于浏览器原生 ESModule imports 的开发服务器，在开发模式下，没有打包的步骤，它利用了浏览器的ES Module特性，只有在真正需要时才编译文件，所以编译速度快，不受项目体积影响
- 在生产模式下，vite使用Rollup进行打包，提供更好的tree-shaking，代码压缩和性能优化
- **开发效率：** webpack的热更新是全量更新，即使修改一个小文件，也会重新编译整个应用，这在大型应用中可能会导致编译速度变慢； vite的热更新是增量更新，只更新修改的文件，所以即使在大型应用中也能保持极快的编译速度
- **目前企业使用：**webpack有着成熟的插件生态,扩展性非常强。 而vite才刚刚起步，生态不行。 所以webpack适合于大型、复杂的项目。 vite凭更适合于中小型项目开发
## type module含义
1. `type`字段的产生用于定义`package.json`文件和该文件所在目录根目录中`.js`文件和无拓展名文件的处理方式。值为`'moduel'`则当作es模块处理；值为`'commonjs'`则被当作commonJs模块处理
2. 目前node默认的是如果`pacakage.json`没有定义`type`字段，则按照commonJs规范处理
3. node官方建议包的开发者明确指定`package.json`中`type`字段的值
4. 无论`package.json`中的`type`字段为何值，`.mjs`的文件都按照es模块来处理，`.cjs`的文件都按照commonJs模块来处理
**在script标签中写js代码，或者使用src引入js文件时，默认不能使用形式，即不能使用import导入文件，但是我们可以再script标签上加上type=module属性来改变方式**
```javascript
//module.js
export default function test(){
return 'test...'
}
```
```html
// index.html
Document
// 方法 1 ： 引入module.js，然后在script标签里面调用
```
## setup的含义
- setup就是一个生命周期函数，比beforeCreate还早
- setup不需要使用this，也不能使用
- 如果数据或者函数 需要是模板中使用，必须在setup函数里面返回，通过return 对象出去
## watchEffect
## 副作用
一些当状态改变时需要执行的行为，比如在每次msg变量改变时我需要重新打印它，那么这个打印行为就可以说是一个副作用(effect)
- 纯函数中的副作用（side effect）就是如果有一个函数在输入和输出之外还做了其他的事情，那么这个函数额外做的事情就被称为副作用
- react中副作用可以这样理解：组件初始化的时候，组件根据开发者的设定，由自身驱动的第一次DOM修改，就是主作用。主作用之后，组件开始执行用户逻辑，这时你眼里的业务逻辑代码，在React眼里都是副作用
- vue3中的副作用与react中副作用的定义类似，响应式数据的变更造成的其他连锁反应，以及后续逻辑，这些连锁反应都叫副作用。 它可以是获取数据、事件监听或订阅、改变应用状态、修改 DOM、输出日志等等
## ref
- 定义ref变量，子组件需要通过defineExpose
## 父子组件的生命周期函数执行顺序(创建和销毁)
https://www.cnblogs.com/luhu123/p/16522839.html
## mock数据的使用
- 开发的时候，如果后端接口还没有写完，我们是用mock假数据 先写，所有的字段，都和后端保持一致。这样只要后端接口一些好，直接换真实请求， 可以快速的和后端联调
- **借助于mock数据，我可以很方便的修改服务器的返回数据，配合UI给的设计稿，选择最合适的结构去渲染页面。然后反向再给后端java说一下，前端某个接口需要什么数据。这样可以减少后期的沟通成本，也可以减少后期测试同学的一些bug。例如之前我在写各种增删改查的接口的时候，就通过mock假数据，很好的模拟请求的业务成功和业务失败。http状态码的200,400，500等等。完成自己请求，以及各种拦截器的大部分情况的测试覆盖 ------------- （显示自己的主动性思维，反向推动后端写接口，带有测试思维去写前端）**
## 顶级setup里面能不能直接使用 await
## vue3的插槽 和 解构赋值的写法
## playground
vue
ts
因为在练习vue 和ts的时候，需要先在本地搭建一个环境，很麻烦。所以网上有一些网站，直接给我们提供了练习vue和ts 或者react等等一些框架的 在线环境
vue playground https://playcode.io/vue
ts playground 等等 https://www.typescriptlang.org/play
## 什么是ts
## ts的一些关键词
**类型注解、类型约束、联合类型、数组类型、类型别名、函数类型、可选参数、类型推断、类型断言**
## interface vs type 他们俩的区别 ---- 面试题
- interface 接口 和 type 类型别名 我都用过，他们主要在对象的定义上面有些区别
- interface 只能定义对象的结构， type可以定义任意的结构。他们都可以实现继承。 interface采用的是extends关键字， type的继承有个说法叫 交叉类型 & 这个符号实现
- interface 定义的对象结构可以重名，属性会合并到一起。 type不能重复定义，不能重名
```
下面是另一种背诵的书法： 上面是老师总结的，自己也可以总结一个，方便自己背诵就可以了
它们都可以定义对象类型
它们都可以复用，interface 使用 `extends` , type 使用 `&`
type 不能重复定义，interface 可以重复会合并
```
## 泛型
重难点场景
```
function prop(obj, key) {
return obj[key];
}
这个函数接口两个参数，obj和key，并返回obj中对应key的属性值。但是，这里存在的问题是，我们并不知道obj是什么，也不知道属性的类型。所以，在TypeScript中，这种情况需要改成这样
function prop(obj:object, key: string) {
return obj[key];
}
但是这样是会报错
```
使用泛型改造
```
type Todo = {
id: number;
text: string;
done: boolean;
}
const todo: Todo = {
id: 1,
text: "Learn TypeScript keyof",
done: false
}
function prop(obj: T, key: K) {
return obj[key];
}
const id = prop(todo, "id"); // const id: number
const text = prop(todo, "text"); // const text: string
const done = prop(todo, "done"); // const done: boolean
首先定义一个泛型类型T，并且使用到extends，类型约束，使泛型类型T必须是object类型的子类型，也就是Todo的子类型，然后使用keyof获取T类型的所有键，其返回类型是联合类型，也即是number | string | boolean，最后再次使用extends关键字，将k类型必须是keyof T的子类型
```
## 泛型相关--常见关键词
**1. extends** 一般用于类型的继承(interfacee中) 或者 类型约束 (泛型中)
```
interface T1 {
name: string
}
interface T2 {
sex: number
}
// 多重继承，逗号隔开 ，， 合并
interface T3 extends T1,T2 {
age: number
}
// 合法
const t3: T3 = {
name: 'xiaoming',
sex: 1,
age: 18
}
这个时候表示t3 有三个属性
```
```
// 这里约束 arg 必须有 length 属性 ---- 泛型约束的作用
function log(arg: T):void{
console.log(arg.length)
}
```
**2. keyof T** 获取某种类型T的所有键，其返回类型是联合类型
- 类型的上下文中， 代码的运行时上下文
- 在运行时并不能直接提供属性名的具体信息
```
interface Person {
name: string
age: number
}
type K = keyof Person
// type K = "name" | "age"
```
- `T[K]` - 类型映射，获取类型的值。配合`keyof`一起使用获取一组 key 对应的 value
```
interface Person {
name: string
age: number
}
type V = Person[keyof Person]
// type V = "string" | "number"
```
在运行时直接打印类型是不可能的，因为TypeScript的类型信息在编译成JavaScript后会被删除，JavaScript本身是一种动态类型语言，没有类型信息。
- **TS 中的类型不能当做值来使用？**
```
如果类型可以当值使用了，那么就会出现这样的情况
interface A {}
const a = A
const b = 1
编译以后
const a =
const b = 1
这显然不符合 JS 语法规范，1 是 const 声明的常量必须赋初始值，2 是赋值符右边不能没有东西
所以，TS 最终通过会生成浏览器可执行的 JS 代码，在这期间会去掉类型的声明、使用和断言等
```
**3. `in T` - 遍历类型的键**
配合索引访问类型一起使用，用于表示目标类型的 key -- 循环所有的联合类型
```
type Property = 'name' | 'age' | 'phoneNum';
type PropertyObject = {
[key in Property]: string;
}
```
**4. 常见的内置类型**
- Partial（部分的，可选的），Required（全部 必须的）
```
export interface Student {
name: string;
age: number;
}
const student1: Student = {} 这里因为两个属性都是必填项的，所以ts报错没有传属性
const student2: Partial = {} 这里就不报错，因为Partial 改变了Student类型
两个工具函数的源码
type Partial = {
[P in keyof T]?: T[P];
};
type Required = {
[P in keyof T]-?: T[P];
};
```
- #### Record
这个类型用来描述一个对象，这个对象的属性都具有相同的类型。日常使用频率较高的内置类型了，主要用来描述对象，一般建议是不用Object来描述对象，而是用Record代替，Record几乎可以说是万金油了
```
export const student1: Record = {
name: '张三',
age: 20
}
源码
type Record = {
[P in K]: T;
};
```
## .ts 文件和.d.ts文件的区别
**类型声明文件: ** 在 TypeScript 中以 .d.ts 为后缀的文件，我们称之为 TypeScript 类型声明文件
+ .ts 文件, 既包含类型信息又可执行代码。可以被编译为 .js 文件
+ .d.ts 文件， 只包含类型信息的类型声明文件，不会生成 .js 文件。 仅仅为 JS 提供类型信息
类型声明文件有三种：
1. 内置的
2. 第三方库自带的
3. 自定义
## vuex 和 pinia的区别
+ pinia 和 vuex 都支持vue2 vue3
+ vue2 --- vuex 3.x
+ vue3 --- vuex 4.x
+ pinia完全支持 ts，和vue3完美契合
+ pinia 体积非常小， 1KB
+ pinia 没有mutation， 只有 state getters actions
css + js + vue 2 3 + ts + webpack/vite + 其他（前端优化，http）