代码拉取完成，页面将自动刷新
type字段的产生用于定义package.json文件和该文件所在目录根目录中.js文件和无拓展名文件的处理方式。值为'moduel'则当作es模块处理；值为'commonjs'则被当作commonJs模块处理pacakage.json没有定义type字段，则按照commonJs规范处理package.json中type字段的值package.json中的type字段为何值，.mjs的文件都按照es模块来处理，.cjs的文件都按照commonJs模块来处理在script标签中写js代码，或者使用src引入js文件时，默认不能使用形式，即不能使用import导入文件，但是我们可以再script标签上加上type=module属性来改变方式
//module.js
export default function test(){
return 'test...'
}
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
// 方法 1 ： 引入module.js，然后在script标签里面调用
<script type="module">
import test from './module.js';
console.log(test())
</script>
</body>
</html>
一些当状态改变时需要执行的行为，比如在每次msg变量改变时我需要重新打印它，那么这个打印行为就可以说是一个副作用(effect)
https://www.cnblogs.com/luhu123/p/16522839.html
vue
ts
因为在练习vue 和ts的时候，需要先在本地搭建一个环境，很麻烦。所以网上有一些网站，直接给我们提供了练习vue和ts 或者react等等一些框架的 在线环境
vue playground https://playcode.io/vue
ts playground 等等 https://www.typescriptlang.org/play
类型注解、类型约束、联合类型、数组类型、类型别名、函数类型、可选参数、类型推断、类型断言
下面是另一种背诵的书法： 上面是老师总结的，自己也可以总结一个，方便自己背诵就可以了
它们都可以定义对象类型
它们都可以复用，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<T extends object, K extends keyof T>(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<T extends {length: number}>(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 对应的 valueinterface Person {
name: string
age: number
}
type V = Person[keyof Person]
// type V = "string" | "number"
在运行时直接打印类型是不可能的，因为TypeScript的类型信息在编译成JavaScript后会被删除，JavaScript本身是一种动态类型语言，没有类型信息。
如果类型可以当值使用了，那么就会出现这样的情况
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<Student> = {} 这里就不报错，因为Partial 改变了Student类型
两个工具函数的源码
type Partial<T> = {
[P in keyof T]?: T[P];
};
type Required<T> = {
[P in keyof T]-?: T[P];
};
这个类型用来描述一个对象，这个对象的属性都具有相同的类型。日常使用频率较高的内置类型了，主要用来描述对象，一般建议是不用Object来描述对象，而是用Record代替，Record<string, any>几乎可以说是万金油了
export const student1: Record<string, any> = {
name: '张三',
age: 20
}
源码
type Record<K extends keyof any, T> = {
[P in K]: T;
};
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
