[图片] 众所周知，TypeScript 是一个静态类型的 JavaScript 超集，它提供了许多工具类来帮助编写类型安全的代码。也成为现在前端程序员必须掌握的技能，如果你没有学过后端语言，那么主要的难点会集中在“工具类”、泛型的高级应用和装饰器这块。 这里就主要介绍下，面试常会用到的工具类： 1、Pick<T, K> 从对象 T 中选取部分属性 K，返回一个新的类型。 [代码]interface Person { name: string; age: number; address: string; } type PersonNameAndAddress = Pick<Person, 'name' | 'address'>; const person: PersonNameAndAddress = { name: '鸡哥', address: '996 road.' }; [代码] 2、Omit<T, K> 从对象 T 中剔除部分属性 K，返回一个新的类型。 [代码]interface Person { name: string; age: number; address: string; } type PersonWithoutAge = Omit<Person, 'age'>; const person: PersonWithoutAge = { name: '鸡哥', address: '996 road.' }; [代码] 3、Record<K, T> 创建一个类型，其中键为 K，值为 T。 [代码]type Person = { name: string; age: number; }; type PersonMap = Record<string, Person>; const people: PersonMap = { alice: { name: '鸡哥', age: 30 }, bob: { name: '坤哥', age: 40 }, }; [代码] 4、Partial<T> 将对象的所有属性设为可选属性，返回一个新的类型。 [代码]interface Person { name: string; age: number; } type PartialPerson = Partial<Person>; const person: PartialPerson = { name: '鸡哥' }; [代码] 5、Required<T> 将对象的所有属性设为必选属性，返回一个新的类型。 [代码]interface Person { name?: string; age?: number; } type RequiredPerson = Required<Person>; const person: RequiredPerson = { name: '鸡哥', age: 100 }; [代码] 6、Readonly<T> 将对象的所有属性设为只读属性，返回一个新的类型。 [代码]interface Person { name: string; age: number; } type ReadonlyPerson = Readonly<Person>; const person: ReadonlyPerson = { name: '鸡哥', age: 100 }; person.age = 31; //报错 : Cannot assign to 'age' because it is a read-only property. [代码] 7、Exclude<T, U> 从类型 T 中排除类型 U，返回一个新的类型。 [代码]type Animal = 'dog' | 'cat' | 'bird'; type DomesticAnimal = 'dog' | 'cat'; type WildAnimal = Exclude<Animal, DomesticAnimal>; // 'bird' function makeSound(animal: WildAnimal) { console.log(`The ${animal} makes a loud noise.`); } makeSound('bird'); // OK makeSound('cat'); //报错 : Argument of type 'cat' is not assignable to parameter of type 'WildAnimal'. [代码] 8、NonNullable<T> 从类型 T 中排除 null 和 undefined，返回一个新的类型。 [代码]type MaybePerson = Person | null | undefined; type DefinitelyPerson = NonNullable<MaybePerson>; const person1: MaybePerson = null; const person2: DefinitelyPerson = null; // 报错 : Type 'null' is not assignable to type 'Person'. [代码] 9、ReturnType<T> 获取函数的返回类型，返回一个新的类型。 [代码]function greet(name: string): string { return `Hello, ${name}!`; } type GreetReturnType = ReturnType<typeof greet>; // string const message: GreetReturnType = greet('鸡哥'); console.log(message); // 'Hello, 鸡哥!' [代码] 10、Parameters<T> 获取函数类型 T 的参数类型的元组类型。 [代码]function greet(name: string, age: number): string { return `Hello, ${name}! You are ${age} years old.`; } type GreetParamsType = Parameters<typeof greet>; // [string, number] const params: GreetParamsType = ['鸡哥', 30]; const message = greet(...params); console.log(message); // 'Hello, 鸡哥! 30岁啦.' [代码]

初始化代码如下 [图片] 手势响应函数如下 [图片] 页面代码如下 [图片] 拖动运行的结果如下 [图片] 不知道为何会如此。

目前上传逻辑： 点击网页上传按钮 -> 传入文件名称并请求服务端获取对象存储上传链接 -> 客户端根据返回的上传信息发起POST文件上传 -> 上传成功 遇到的问题：因为是客户端直传文件到对象存储，所以无法进行文件合法性验证（文件大小、文件类型），以及文件操作（图片缩略图生成、图片水印处理），如果在请求上传链接时提交文件，当文件大于1M，云托管接口限制又会报413异常错误，所以请求的时候不能携带文件。 期望的解决的方案：我该如何设计上传逻辑，可以解决以上我遇到的问题（文件验证、图片处理）