网站设计需要的元素,windows优化大师自动安装,微信公众号登录平台入口,横向网站源码一#xff0c;前言
继续学习
二#xff0c;TS接口泛型自定义类型
1.接口
TypeScript 接口#xff08;Interface#xff09;是一种定义对象形状的强大工具#xff0c;它可以描述对象必须包含的属性、方法和它们的类型。接口不会被编译成 JavaScript 代码#xff0c;仅…一前言
继续学习
二TS接口泛型自定义类型
1.接口
TypeScript 接口Interface是一种定义对象形状的强大工具它可以描述对象必须包含的属性、方法和它们的类型。接口不会被编译成 JavaScript 代码仅在编译阶段用于类型检查。
基本语法与用法
接口使用 interface 关键字定义下面是一些常见用法
// 定义基本接口
interface User {name: string;age: number;//“?” 表明该属性是可选的其数据类型为布尔型即值只能是 true 或 false。“readonly id: string;” 表示定义一个名为 “id” 的属性“readonly” 关键字意味着这个属性一旦被赋值就不能再被修改isAdmin?: boolean; // 可选属性readonly id: string; // 只读属性greet: (message: string) void; // 方法
}// 使用接口
const user: User {name: 张三,age: 30,id: user123,greet: (message) console.log(${message}, ${this.name})
};// 接口继承
interface AdminUser extends User {role: string;
}// 函数接口
interface Calculator {(a: number, b: number): number;
}const add: Calculator (a, b) a b;// 可索引接口
interface StringArray {[index: number]: string;
}const names: StringArray [Alice, Bob];高级特性
接口还支持更复杂的类型定义
// 混合类型接口对象 函数
interface Counter {(): void; // 函数签名count: number; // 属性
}function createCounter(): Counter {const counter () counter.count;counter.count 0;return counter;
}// 接口合并同名接口会自动合并
interface Box {height: number;
}interface Box {width: number;
}const box: Box { height: 10, width: 20 };最佳实践
使用接口定义对象形状特别是在大型项目中使用类型别名处理联合类型、交叉类型等复杂类型保持接口名称简洁明了通常使用名词或形容词 名词为可选属性添加 ? 标记为只读属性添加 readonly 标记
接口是 TypeScript 类型系统的核心组成部分合理使用可以显著提高代码的可读性和可维护性。
2.泛型
泛型是 TypeScript 中一个强大的特性它允许我们创建可重用的组件同时保持类型安全。泛型让我们可以在定义函数、接口或类时不预先指定具体类型而是在使用时再确定类型。
基本泛型函数
// 泛型函数示例
function identityT(arg: T): T {return arg;
}// 使用泛型函数
const output1 identitystring(myString); // 显式指定类型
const output2 identity(100); // 类型推断为 number泛型接口
// 泛型接口
interface GenericIdentityFnT {(arg: T): T;
}function identityT(arg: T): T {return arg;
}const myIdentity: GenericIdentityFnnumber identity;泛型类
// 泛型类
class GenericNumberT {zeroValue: T;add: (x: T, y: T) T;
}const myGenericNumber new GenericNumbernumber();
myGenericNumber.zeroValue 0;
myGenericNumber.add (x, y) x y;3自定义类型
自定义类型允许我们创建复杂的、特定用途的类型定义提高代码的可读性和类型安全性。
类型别名Type Aliases
// 基本类型别名
type Name string;
type NameResolver () string;
type NameOrResolver Name | NameResolver;// 复杂类型别名
type UserInfo {name: string;age: number;address?: string;
};// 泛型类型别名
type ContainerT { value: T };交叉类型Intersection Types
// 交叉类型
interface Colorful {color: string;
}interface Circle {radius: number;
}type ColorfulCircle Colorful Circle;const cc: ColorfulCircle {color: red,radius: 10
};联合类型
// 联合类型
type StringOrNumber string | number;
type Text string | { text: string };// 字面量类型
type Easing ease-in | ease-out | ease-in-out;**条件类型
// 条件类型
type MessageOfT T extends { message: unknown } ? T[message] : never;interface Email {message: string;
}type EmailMessageContents MessageOfEmail; // string映射类型
// 映射类型
interface User {name: string;age: number;email: string;
}// 创建只读版本
type ReadonlyUser {readonly [P in keyof User]: User[P];
};// 创建可选版本
type PartialUser {[P in keyof User]?: User[P];
};三v-for指令
v-for 是 Vue.js 中用于循环渲染列表的指令它允许你基于数组或对象的数据来动态生成 DOM 元素。
基本用法
v-for 指令的基本语法是 item in items其中 items 是源数据数组而 item 是当前被迭代的数组元素的别名。
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8titleVue v-for 简单示例/titlescript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/scriptstylebody { font-family: Arial, sans-serif; }.example { margin-bottom: 30px; padding: 15px; border: 1px solid #eee; }ul { list-style-type: none; padding: 0; }li { margin: 5px 0; }/style
/head
bodydiv idapp!-- 示例1循环数组 --div classexampleh31. 循环数组/h3ulli v-for(item, index) in fruits :keyindex{{ index 1 }}. {{ item }}/li/ul/div!-- 示例2循环对象 --div classexampleh32. 循环对象/h3ulli v-for(value, key) in user :keykey{{ key }}: {{ value }}/li/ul/div!-- 示例3循环数字 --div classexampleh33. 循环数字/h3p前 {{ count }} 个数字的平方/pulli v-forn in count :keyn{{ n }} × {{ n }} {{ n * n }}/li/ul/div/divscriptnew Vue({el: #app,data: {fruits: [苹果, 香蕉, 橙子, 草莓],user: {name: 张三,age: 28,email: zhangsanexample.com},count: 5}})/script
/body
/html
key 的重要性 为每个 v-for 项提供唯一的 key 是最佳实践它帮助 Vue 跟踪节点的身份从而高效地更新 DOM。避免使用索引作为 key特别是当列表可能会重新排序或过滤时这可能导致性能问题或错误的更新。 响应式更新 Vue 能够检测到数组的变更方法如 push、pop、splice 等并触发相应的 DOM 更新。直接修改数组索引或长度不会触发响应式更新应使用 Vue 提供的方法。 过滤和排序 当需要显示过滤或排序后的结果时应使用计算属性或方法而不是在 v-for 中直接操作。
四props
props 是 Vue 组件中用于从父组件向子组件传递数据的机制。它允许你创建可复用的组件同时保持数据的单向流动。
index.ts
// 定义一个接口用于限制person对象的具体属性
export interface PersonInter
{name: string;age: number;sex: string;
}// 一个自定义类型
export type Persons PersonInter[]
App.vue
templateperson ahh:listpersonlist/
/template
script langts setup nameApp
import person from ./components/person.vue;
import { reactive } from vue;
import { type Persons} from ./types;
let personlist reactivePersons([{name:张三,age:18,sex:男,},{name:李四,age:19,sex:男,},{name:王五,age:20,sex:男},])
/scriptperson.vue
templatediv classpersonh2{{a}}/h2
ulli v-forp in list :keyp.id{{p.name}} {{p.age}}/li
/ul/div
/template
script langts setup namePerson
import { defineProps } from vue;
// // 接收a参数和list
defineProps([a,list])
// // 接收a参数,同时将props保存起来
// let x defineProps([a])
// console.log(x.a)
/script
style/style大概就是这样反正就是从父组件那里搞点数据还有很多别的用法遇到了再说。
