经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » TypeScript » 查看文章
[学习笔记]TypeScript查缺补漏（一）：类
来源：cnblogs　　作者：林晓lx　　时间：2023/11/1 9:00:43　　对本文有异议

@

目录

基础知识

创建类型

  1. class Abc { }

类的初始化

  1. const abc = new Abc();

类型和值

类既可以作为类型使用，也可以作为值使用。

  2. const a:Bag = new Bag()

JSDoc 注释

JSDoc 是 JavaScript 的一种注释规范，它使用特定的注释格式来自动生成 API 文档。JSDoc 通过注释来提取信息，例如函数名、参数类型和返回类型等，然后使用这些信息生成人类可读的文档。

示例：

  1. /**  
  2.  * 这是一个函数注释  
  3.  * @param {string} 参数名 - 参数描述  
  4.  * @returns {number} 返回值描述  
  5.  */  
  6. function myFunction(参数名) {  
  7.   // 函数实现  
  8.   return 0;  
  9. }

在这个例子中，/** 开始一个多行注释，然后在注释中使用 @param 和 @returns 来描述函数的参数和返回值。JSDoc 还支持其他注释标签，例如 @description、@type 和 @example 等。

字段

  1. class User extends Account implements Updatable, Serializable {
  2.     id: string;                     //普通字段
  3.     displayName?: boolean;          //可选字段
  4.     name!: string;                  //非可选字段
  5.     #attributes: Map<any， any>;    //私有字段
  6.     roles = ["user"];               //有默认值的字段
  7.     readonly createdAt = new Date() // 带有默认值的只读字段
  8. }

私有字段

  1. class Foo {  
  2.     private myAny = 1;  
  3. }  
  4.   
  5. class Bar {  
  6.     #myAny = 1;  
  7. }

私有成员只能在它们所属的类内部访问，类的外部无法直接访问这些私有成员。

示例：

  1. class MyClass {  
  2.     #myPrivateVariable: string;  
  3.   
  4.     public myPublicMethod() {  
  5.         console.log(this.#myPrivateVariable); // 正确，可以在类内部访问私有成员  
  6.     }  
  7. }  
  8.   
  9. const obj = new MyClass();  
  10. console.log(obj.#myPrivateVariable); // 错误，私有成员无法从外部访问

区别
private在编译后JavaScript中没有影响，仅对TypeScript编译器有影响，而使用#符号声明的私有属性在JavaScript中会被编译为常规的私有属性。

可选和非可选字段

感叹号（!）用于标记属性或方法为非可选（non-optional）。这意味着该属性或方法在类实例化时必须提供值，否则将导致编译错误。

  1. class Person {  
  2.   constructor(public name: string, public age: number!) {  
  3.   }  
  4. }  
  6. const person = new Person("Alice", 25); // 正确，age 属性必须提供值  
  7. const personOptional = new Person("Bob"); // 错误，age 属性未提供值

问号（?）用于标记属性或方法为可选（optional）。这意味着该属性或方法在类实例化时可以省略，不会导致编译错误。

  1. class Person {  
  2.   constructor(public name: string, public age?: number) {  
  3.   }  
  4. }  
  5.   
  6. const person = new Person("Alice"); // 正确，age 属性未提供值  
  7. const personOptional = new Person("Bob", 25); // 正确，age 属性提供了值

字段类型约束

[key: string]: number; 是一种对象类型的写法，表示对象的键是字符串类型，值是数字类型。

示例：

  1. const person: { [key: string]: number } = {  
  2.   age: 25,  
  3.   height: 170,  
  4.   weight: 65  
  5. };

Getter/Setter

Getter 是一个获取属性的方法，Setter 是一个设置属性的方法。可以使用 get 和 set 关键字来定义它们。
Getter/Setter可以在不改变属性的访问权限的情况下，对属性的值进行更精细的控制。比如可以在读取或设置属性的值时添加额外的逻辑。

  1. class Person {  
  2.   private _name: string;  
  3.   
  4.   get name(): string {  
  5.     return this._name;  
  6.   }  
  7.   
  8.   set name(value: string) {  
  9.     this._name = value;  
  10.   }  
  11. }  
  12.   
  13. let person = new Person();  
  14. person.name = "John"; // 使用 setter 设置值  
  15. console.log(person.name); // 使用 getter 获取值，输出 "John"

静态成员

静态方法中this指向类本身，而不是类的实例对象。

  1. class StaticClass {  
  2.     n?:number=4;
  4.     //静态字段
  5.     static s:number
  7.     //静态方法
  8.     static staticMethod() {  
  9.         this.s=5
  10.         console.log('This is a static method');  
  11.   }  
  12. }
  14. StaticClass.staticMethod(); // 调用静态方法
  15. var staticClass=new StaticClass();
  16. console.log(staticClass.n)     //类成员不受影响 ，输出4
  17. console.log(staticClass.s)     //undefined 
  20. console.log(StaticClass.n)     //undefined
  21. console.log(StaticClass.s)     //静态类成员不受影响 ，输出5

函数重载

在 TypeScript 中，可以使用函数重载（Function Overloading）来定义多个同名函数，它们具有不同的参数类型或参数数量。这可以帮助提高代码的可读性和可用性。

要实现函数重载，需要遵循以下规则：

  1. 重载的函数必须同名。
  2. 重载的函数参数类型或数量必须不同。
  3. 重载的函数可以有一个或多个重载。
  4. 函数重载不能改变函数的返回类型。

示例：

  1.   update: (retryTimes: number) => void;
  2.   update(retryTimes: number): void;

构造函数

构造函数是用于创建和初始化对象实例时候被调用的特殊方法，用于初始化对象的属性并为其分配内存空间。

示例：

  1. class Person {  
  2.   private name: string;  
  3.   private age: number;  
  4.   
  5.   constructor(name: string, age: number) {  
  6.     this.name = name;  
  7.     this.age = age;  
  8.   }  
  9.   
  10.   greet() {  
  11.     console.log(`名字 ${this.name} 年龄 ${this.age}`);  
  12.   }  
  13. }  
  14.   
  15. var person = new Person("John", 30);  
  16. person.greet(); // 输出 "名字 John 年龄 30"

参数属性

可以使用参数属性（Parameter Properties）来在类中定义与函数参数相关的属性。参数属性提供了一种简洁的方式来声明与函数参数相关的属性，而不需要显式地使用 this 关键字。

示例：

  1. class Person {  
  2.   constructor(public name: string, public age: number) {}  
  3. }
  5. var person = new Person("John", 30);  
  6. console.log(person.name); // 输出 "John"  
  7. console.log(person.age); // 输出 30

类的实例化

  1.   
  2.   (): JSONResponse              //  可以通过 () 调用这个对象 -（JS中的函数是可以调用的对象） 
  3.   new(s: string): JSONResponse; // 可以在此类对象上使用 new

示例：实例化泛型对象

  1. class Person {  
  2.   age= 25;
  3.   height= 170;  
  4.   weight= 65;
  5.   constructor() {  
  6.   }  
  7. }  
  9. class PersonService<TService> {
  10.     Service?: TService;
  11.     Init(service?: { new(): TService }) {
  12.         if (service != null) {
  13.             this.Service = new service();
  14.         }
  15.     }
  16. }
  18. var p = new PersonService<Person>(); 
  19. p.Init(Person);
  20. console.log(p.Service?.age);  // 25
  21. console.log(p.Service?.height);  // 170
  22. console.log(p.Service?.weight);  // 65

箭头函数

在箭头函数中，this不指向调用该函数的对象，而是指向定义该箭头函数时的上下文。
尽管箭头函数是在对象的方法中定义的，但是它不会捕获到调用该方法的对象作为自己的this上下文。

示例：

  1. let obj = {  
  2.     value: "I am an object",  
  3.     printValue: () => { console.log(this.value); }  
  4. }  
  5.   
  6. obj.printValue(); // 输出："I am an object"

this的作用域

全局

在全局作用域或单独的函数作用域中，this引用的是全局对象。

  1. console.log(this); // 在全局作用域中输出：window对象  
  2.   
  3. function testFunc() {  
  4.     console.log(this); // 在函数作用域中输出：window对象  
  5. }  
  6.   
  7. testFunc();

类和对象方法

当函数作为对象的方法被调用时，this指的是obj对象。

  1. let obj = {  
  2.     name: 'Example Object',  
  3.     printName: function() {  
  4.         console.log(this.name);   
  5.     }  
  6. }  
  7.   
  8. obj.printName(); // 输出："Example Object"

当调用类中的函数时，this指的是类的实例对象。

  1. class MyClass {  
  2.     myMethod() {  
  3.         console.log(this); // 输出：MyClass的实例对象  
  4.     }  
  5. }  
  6.   
  7. const obj = new MyClass();  
  8. obj.myMethod();

泛型

泛型是一种允许你在定义类、接口、函数和方法时使用类型参数的功能。泛型允许你编写灵活的代码，同时保持类型安全。通过使用泛型，你可以在强类型环境中编写可重用的代码，而无需担心具体的类型实现细节。

泛型类

  2. class Box<Type>{
  3.     contents?: Type
  4.     constructor(value: Type) {
  5.     this.contents = value;
  6. }}
  8. var stringBox = new Box("a package");
  9. console.log(stringBox.contents) // a package

泛型接口

  1. interface Generator<T> {  
  2.   generate(): T;  
  3. }  
  4.   
  5. class RandomNumberGenerator implements Generator<number> {  
  6.   generate() {  
  7.     return Math.random();  
  8.   }  
  9. }  
  10.   
  11. let generator = new RandomNumberGenerator();  
  12. let randomNumber = generator.generate(); // 类型为 number

泛型函数

  1. function identity<T>(arg: T): T {  
  2.   return arg;  
  3. }  
  4.   
  5. let x = identity<number>(123); // 类型为 number  
  6. let y = identity<string>("hello"); // 类型为 string

装饰器

装饰器是使用 @ 符号来标识的特殊类型的函数，可以用来扩展类或方法的行为。实现类似面向切面编程的特性。

可以在类、类方法、访问器、属性和方法参数上使用装饰器

示例：

  1. function log(target: any, obj:any) {  
  2.   console.log(target)
  3.   console.log(`Creating instance of ${target.name}`);  
  4. }  
  5.   
  6. @log  
  7. class MyClass {  
  8.   myMethod() {  
  9.     console.log("Hello, World!");  
  10.   }  
  11. }  
  13. const instance = new MyClass();

TypeScript示例可在https://www.typescriptlang.org/play中调试

原文链接：https://www.cnblogs.com/jevonsflash/p/17801625.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

TypeScript热门文章

  • TypeScript利用TS封装Axios实战
  • 在Vue3+TypeScript 前端项目中使用事件总线Mitt
  • 在基于vue-next-admin的Vue3+TypeScript前端项目中，为了使用方便全局挂载对象接口
  • TS 基础及在 Vue 中的实践：TypeScript 都发布 5.0 版本啦，现在不学更待何时！
  • websocket4.0+typescript 实现热更新的方法
  • Vue3+TypeScript 项目中，配置 ESLint 和 Prettier
  • TypeScript类型声明书写详解
  • vue + typescript + video.js实现 流媒体播放 视频监控功能
  • 你可能不知道的typescript实用小技巧
  • typescript基本数据类型

    • TypeScript推荐文章

  • Figma数值输入框支持拖拽调整功能实现
  • 前端 Typescript 入门
  • 从零搭建Vue3 + Typescript + Pinia + Vite + Tailwind CSS + Element Plus开发脚手架
  • 使用命令行方式搭建uni-app + Vue3 + Typescript + Pinia + Vite + Tailwind CSS + uv-ui开发脚手架
  • Vite4+Typescript+Vue3+Pinia 从零搭建(7) - request封装
  • [学习笔记]TypeScript查缺补漏（一）：类
  • TS 基础及在 Vue 中的实践：TypeScript 都发布 5.0 版本啦，现在不学更待何时！
  • 在Vue3+TypeScript 前端项目中使用事件总线Mitt
  • Vue3+TypeScript 项目中，配置 ESLint 和 Prettier
  • 项目中使用TypeScript的TodoList实例详解

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号