//  Record 工具类型实现原理

type RecordType<K extends string | number | symbol, T> = { [P in K], T }

const infoObj: Record<string,string> = { a:'a' }

索引类型，定义key：value，key和value可以定义为任何类型；通常定义数组对象

interface Person {

    name： string

    age: number

}

const personInfos: Person = { name: 'a', age: 16 }

// 》》》》》》》》》》 索引类型

interface Student {

    [id: number]: Person // id只是个站位符

}

const sudent: Student = {

    0:{ name:'a', age: 1 }

}

// 映射类型

利用操作符 keyof typeof，根据已有类型创建新的类型

type Keys = keyof  Person // 'name' | 'age'  联合类型的字面量

typeof 针对的是 ---- 变量值

type Ty = typeof personInfos  //   --- { name： string; age: number }

interface 描述对象的结构及属性

可以被实现class implements或者extends

interface User {

    name: string;

    age: number

}

// 类型别名

type UserType = User

// 继承类型

interface Person extends User {

    sex: string

}

数字枚举、字符串枚举、异构枚举

常量枚举：不转译枚举，代码较少

每个枚举属性都是只读的，不能赋值

tuple

push可以突破限制，但是读取不到

const arr: [number,string] = [1,'test'];

arr.push(66);

arr[2]; // 语法错误

函数类型：箭头函数（推荐）+ 函数语句

类型别名 

type Func = (p:string) => boolean;

const func1: Func = ('test') => true;

function func2(p:string):boolean{

    return true

}

any: 任何类型，放弃类型检查

never：永远没有返回值

const f1 = () :never  => {

    throw new Error() // 终止进程

    // 或者

    while(true){

        //  无限循环

    }

}

fan

aa

类型保护

表驱动

有code 和message

泛型

映射类型

typeof只能是值或者枚举

索引

断言

实例

联合和交叉类型

区别

别名

函数类型的联合类型和交叉类型试验结果如下：

对于交叉类型：函数参数列表取并集，函数返回值列表取交集。

对于联合类型：直接取第一个联合前的函数类型，后面的函数类型均无效，所以没有意义。

另外，对象/接口的联合/交叉类型也会增加复杂度，个人感觉通常情况下不适合使用，希望老师能给点例子说明适合使用的具体场景。

const products = {
1: {
name:'nick',
price:200
},
2:{
name: 'adidas',
price:300
}
}

interface Product {
name:string
price: number
}

//索引类型
interface Products {
[id:number]:Product
}

//映射类型
type Keys = keyof Product;
type Tp = typeof products;

//接口--类型的结构
interface User {
name:string
age: number
}

//类型别名
type UserType = {
name:string
age: number
}

function fun(params:User):User{
return params
}

// 接口可扩展，类型不能
interface Person extends User{
email:string
}
//接口可以被类实现，type不能
class ManC implements User{
name:string;
age: number;
email: string;
constructor(name:string, age:number,email:string){
this.name = name;
this.age = age;
this.email = email
}
}

interface Woman{
age: number
}

interface Man{
name:string
}
//type支持联合类型和交叉类型，interface不支持
type People = Man | Woman;  //联合类型    Man & Woman 交叉类型（两个都得有）
const p:People = {
name: 'zyw',
age: 34
}
//两种都可以用时，首选interface
//首字母大写
//有些公司，interface前加I，type前加T。不建议

表驱动

// 枚举
enum OrderStatus1{
Pending,
Shipped,
Completed,
Cancelled,
Unknown
}
//-------0 1 2 3 4

// 数字枚举
enum OrderStatus2{
Pending=3,
Shipped,
Completed=8,
Cancelled,
Unknown
}
//---------3 4 8 9 10

// 字符串枚举
enum OrderStatus3{
Pending='Pending',
Shipped='Shipped',
Completed='Completed',
Cancelled='Cancelled',
Unknown='Unknown'
}

// 异构枚举
enum OrderStatus4{
Pending,
Shipped,
Completed='Completed',
Cancelled='Cancelled',
Unknown='Unknown'
}
//------0 1  Completed Cancelled Unknown

js和ts类型

// 数组
const arr1:string[] = ['a','b','c'];
const arr2:Array<number | string> = ['a',3,5];

// 元祖--严格按照顺序，一一对应
const tuple: [string,number] = ['a',3]

// 函数
// 1.箭头函数
type Fun = (params:string)=>boolean;
const fun1:Fun = ()=>false;
// 2.函数语句
function fun2(params:string):boolean{
return false;
}
// 没有返回值--void
const v=():void =>{}

// 对象
interface Obj {a:string,b:string}
const obj:Obj = {
a:'1',
b:'2'
}

mkdir foldName 命令行新建文件夹

1

如何搭建TypeScript环境：

1. 在线网页版编辑器地址：https://www.typescriptlang.org/，选择Playground进入在线编辑区。

2. npm构建包环境：

   1）先创建一个空文件

   2）打开vscode，打开刚创建的空文件

   3）终端中输入：npm init,之后一直回车，则会创建出一个package.json文件

   4）新建src文件夹，在该文件中新建index.ts文件

   5）全局安装typescript：终端输入命令---npm i typescript -g

   6)  查看是否安装和查看版本：tsc -v

   7）输入tsc --init 自动创建出tsconfig.json配置文件

   8）在配置文件中输入调试运行语句："build":"tsc"

   9)  终端中输入npm run build

3. 构建前端项目

   1）打开cmd，进入想要创建前端项目地址，输入命令：npm create vite@latest

   2）选择是否创建，输入：y

   3)  输入创建的文件名

   4）选择语言：vue

   5)  选个脚本语言： typescript

   6) 创建成功，根据提示，进入项目目录下，输入：npm install安装依赖，输入：npm run dev运行成功打开网址即可

定义数组、函数

四个范式

n

t