-
// 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环境：
在线网页版编辑器地址：https://www.typescriptlang.org/，选择Playground进入在线编辑区。
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
构建前端项目
1）打开cmd，进入想要创建前端项目地址，输入命令：npm create vite@latest
2）选择是否创建，输入：y
3) 输入创建的文件名
4）选择语言：vue
5) 选个脚本语言： typescript
6) 创建成功，根据提示，进入项目目录下，输入：npm install安装依赖，输入：npm run dev运行成功打开网址即可
查看全部 -
定义数组、函数
查看全部 -
四个范式
查看全部
举报