入营第四次笔记|青训营

92 阅读4分钟

今天学习的是如何学好Type Script,以及实践选题ts中常用泛型。 要学好TypeScript,1.首先要熟悉JavaScript:TypeScript是JavaScript的超集,因此对于掌握TypeScript来说,首先需要对JavaScript有一定的了解和熟悉。如果你对JavaScript还不太了解,建议先学习和掌握JavaScript的基础知识。2.学习TypeScript的语法:TypeScript拓展了JavaScript,并引入了静态类型和其他新特性。了解TypeScript的语法、数据类型、函数和类等概念是学习该语言的基础。可以参考官方文档、TypeScript的手册或者在线教程来学习TypeScript的语法。3.安装TypeScript和配置开发环境:为了实践学习TypeScript,你需要安装TypeScript编译器。可以使用npm安装TypeScript,并设置好开发环境的配置,例如使用tsconfig.json文件来指定编译选项。4.编写类型声明:TypeScript的一个重要功能就是为JavaScript添加静态类型。学习如何为变量、函数、对象等添加类型注解,以及如何使用接口、类型别名和枚举等高级类型来定义数据结构。5.实践TypeScript的高级特性:TypeScript提供了许多高级特性,例如泛型、装饰器、模块化等。通过实践练习,例如编写泛型函数、使用装饰器进行函数或类的装饰,以及创建模块化的代码结构,可以更好地掌握TypeScript的强大功能。6.结合现有JavaScript项目进行迁移:如果你有一个现有的JavaScript项目,你可以考虑将其逐步迁移到TypeScript。这样可以让你在实践中应用TypeScript,并逐步将代码部分改写为TypeScript来获得更好的类型检查和开发体验。7.参与开源项目或者个人项目:选择一些开源TypeScript项目,可以是框架、库或者工具等,参与其中贡献或者尝试解决其中的问题。这样可以锻炼自己的实践能力,同时与其他开发者交流和学习。8.学习TypeScript生态系统:探索TypeScript的生态系统,了解常用的TypeScript工具、框架和库,例如React、Angular、Express等。通过应用这些工具和框架来构建实际的项目,可以更好地理解和应用TypeScript的最佳实践。 TypeScript中的泛型是一项强大的功能,它允许你在编写代码时指定类型的参数,从而增加代码的灵活性和安全性。泛型可以应用于函数、类和接口等不同的场景。 函数中的泛型: function identity(arg: T): T { return arg; } // 使用泛型函数,并传入具体的类型参数 let result = identity("Hello"); console.log(result); // 输出 "Hello" // 或者省略类型参数,让编译器根据参数类型自动推断 let result2 = identity(123); console.log(result2); // 输出 123 上述代码中的 identity 函数使用了泛型类型参数 T,它可以代表任意类型。这样通过函数调用时传入不同的类型参数,可以使函数具有更广泛的适用性。 类中的泛型: class Box { private value: T; constructor(value: T) { this.value = value; } getValue(): T { return this.value; } setValue(newValue: T): void { this.value = newValue; } } // 创建一个存储字符串的盒子 let stringBox = new Box("TypeScript"); console.log(stringBox.getValue()); // 输出 "TypeScript" // 创建一个存储数字的盒子 let numberBox = new Box(123); console.log(numberBox.getValue()); // 输出 123 上述代码中的 Box 类使用了泛型类型参数 T,它可以代表任意类型。通过在实例化类时传入具体的类型参数,可以创建特定类型的盒子对象。 接口中的泛型: interface Pair<T, U> { first: T; second: U; } // 使用泛型接口 let pair: Pair<number, string> = { first: 1, second: "two" }; console.log(pair.first); // 输出 1 console.log(pair.second); // 输出 "two" 上述代码中的 Pair 接口使用了两个泛型类型参数 T 和 U,它们分别代表两个不同的类型。通过指定具体的类型参数,可以使用泛型接口创建符合特定类型要求的对象。 使用类型约束可以增加代码的灵活性和安全性,特别是在泛型的使用中: 使用 extends 关键字进行类型约束: function getLength<T extends { length: number }>(arg: T): number { return arg.length; } let length = getLength("Hello"); console.log(length); // 输出 5 let length2 = getLength([1, 2, 3]); console.log(length2); // 输出 3 let length3 = getLength(123); // 编译错误,因为数字类型没有 length 属性 上述代码中,getLength 函数接受一个泛型类型参数 arg,并约束它必须有 length 属性。通过这种类型约束,我们可以确保在函数内部可以安全地访问 arg.length 属性。 使用 keyof 关键字进行索引类型约束: function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] { return obj[key]; } let person = { name: "Alice", age: 30 }; let name = getProperty(person, "name"); console.log(name); // 输出 "Alice" let age = getProperty(person, "age"); console.log(age); // 输出 30 let invalid = getProperty(person, "address"); // 编译错误,因为 "address" 不是 person 对象的属性 上述代码中的 getProperty 函数使用了两个泛型类型参数,T 表示对象类型,而 K 表示对象的键类型。通过使用 keyof T 约束,我们可以确保传入的 key 参数是对象 obj 的有效键名,从而安全地访问该属性。