Необязательный абстрактный метод typescript

Typescript: необязательная имплементация абстрактного метода

Допустим, в родительском классе нам необходимо сослаться на тот метод, который возможно будет имплементирован в унаследованном классе.

В приведённом примере ниже, метод setOnInputListener определяет обязательные действия, которые должны быть выполнены при вводе символа в поля ввода. Метод onInput , если он определён в унаследованном классе, позволяет добавить дополнительный функционал.

export default class CompoundInputField < // . private setOnInputListener(): void < this.$AuthenticInputField.on('input', () => < this.updateInputFieldState(); if (this.onInput)< this.onInput(true); >>); > protected onInput?(flag: any): void; > 

Это решение работает, но оно не совсем понятное. Какие есть лучшие альтернативы?

Способ setOnInputListener()< super.setOnInputListener() >; не подходит потому, что разработчик может просто-напросто забыть добавить super.setOnInputListener() .

Ответы (1 шт):

Какие есть лучшие альтернативы?

abstract class CompoundInputField < protected $AuthenticInputField: any protected updateInputFieldState: any // . input = () => < // this.updateInputFieldState(); this.onInput.forEach(f =>f(true)) > private setOnInputListener(): void < this.$AuthenticInputField.on('input', this.input.bind(this)); >// protected onInput?(flag: any): void; protected abstract onInput: ((. args: any[]) => void)[] = [] > class EmailCompoundInputField extends CompoundInputField < protected onInput = [() =>console.log('test')] > let q = new EmailCompoundInputField q.input()//test 

Источник

Методы в TypeScript

Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи. Facebook

1- Что это за метод?

В языке программирования TypeScript метод представляет собой блок кода (block of code), определенный внутри класса и выполняемый только при вызове. Методы разделяют большую задачу на мелкие части и выполняют конкретную операцию этой программы. Этот процесс повышает возможность повторного использования кода и расширяет модульный подход программы.

• Регулярный метод (нестатический и неабстрактный).
• Статический метод (static method).
• Абстрактный метод (abstract method).

2- Регулярный метод

 [private | protected | public] method_name(arguments) : return_type < // statement(s) >

• return_type: Возвращаемый тип данных метода. Используйте ключевое слово void в качестве типа возвращаемого значения, если метод ничего не возвращает.
  
• ​​​​​​​method_name: Имя метода. В отличие от других языков, таких как Java, TypeScript не допускает двух методов с одинаковым именем, даже если они имеют разные параметры. Это необходимо для преобразования кода TypeScript в Javascript.
  
• ​​​​​​​arguments: Параметры метода.
  

Например: класс Cat и метод sayHello(..). Чтобы вызвать sayHello(..), необходимо создать объект Cat и вызвать метод, используя точечную нотацию (dot notation).

 class Cat < sayHello(name: string): void < console.log(`Hello $`); > > function method_ex1_test() < var tom: Cat = new Cat(); // Create a Cat object. tom.sayHello("Jerry"); // Call the method through the object. >// Call the method: method_ex1_test(); 

 class Rectangle < width: number; height: number; constructor(width: number, height: number) < this.width = width; this.height = height; >getArea(): number < return this.width * this.height; >changeWidthHeight(newWidth: number, newHeight: number): void < this.width = newWidth; this.height = newHeight; >showMe(): void < console.log(`I am a rectangle, width: $, height: $`); > > function method_ex2_test() < var rec = new Rectangle(5, 10); // Create an object. rec.showMe(); // Call the method. var area = rec.getArea(); // Call the method. console.log(`Area: $`); console.log(` --- Change width and height --- `); rec.changeWidthHeight(25, 15); // Set newWidth, newHeight rec.showMe(); // Call the method. area = rec.getArea(); // Call the method. console.log(`Area: $`); > method_ex2_test(); // Call the function. 

 I am a rectangle, width: 5, height: 10 Area: 50 --- Change width and height --- I am a rectangle, width: 25, height: 15 Area: 375 

3- Статический метод

TypeScript использует ключевое слово static в сочетании с синтаксисом определения обычного метода для определения статического метода.

 [private | protected | public] static method_name(arguments) : return_type < // statement(s) >

• Статический метод вызывается с помощью имени класса и точечной нотации. Например, MyUtility.sum(100, 50).
• Нестатические члены класса не могут отображаться в статическом методе, если к ним не осуществляется доступ через объект (см. Пример ниже).

 class MyUtility < static sum(a: number, b: number): number < // same as 'public' return a + b; >public static minus(a: number, b: number): number < return a - b; >> function method_static_ex1_test() < var result = MyUtility.sum(100, 50); console.log(`Sum Result: $`); result = MyUtility.minus(100, 50); console.log(`Minus Result: $`); > method_static_ex1_test(); // Call the method 

 Sum Result: 150 Minus Result: 50 

• side1, side2 и side3 являются нестатическими полями класса Triangle, они не могут отображаться в статическом методе.
  

 class Triangle < side1: number; side2: number; side3: number;// Non-static fields (Cann't use in static method) static DEFAULT_COLOR:string = 'blue'; // Static field (Can use in static method) constructor(s1: number, s2: number, s3: number) < var valid = Triangle.isValidSides(s1, s2, s3); // Check if all sides are valid. if (!valid) < throw new Error('Invalid Sides!'); // Throw an Error. >this.side1 = s1; this.side2 = s2; this.side3 = s3; > static isValidSides(s1: number, s2: number, s3: number): boolean < if (s1 < 0 || s2 < 0 || s3 < 0) < return false; >return s1 + s2 > s3 && s1 + s3 > s2 && s2 + s3 > s1; > isEquilateralTriangle(): boolean < return this.side1 == this.side2 && this.side2 == this.side3; >> function method_static_ex2_test() < var valid = Triangle.isValidSides(6, 8, 10); console.log(`Are sides 6, 8 and 10 valid to make a triangle? $`); var triangle = new Triangle(3.0, 4.0, 5.0); // Check if the triangle is equilateral triangle. var check = triangle.isEquilateralTriangle(); console.log(`Is Equilateral Triangle? $`); > method_static_ex2_test(); // Call the method. 

 Are sides 6, 8 and 10 valid to make a triangle? true Is Equilateral Triangle? false 

4- Абстрактный метод

На языке TypeScript абстрактный метод является нестатическим методом и не имеет содержимого.

 [protected | public] abstract method_name(arguments) : return_type; 

Класс, имеющий по крайней мере один абстрактный метод, должен быть объявлен абстрактным, и один из его подклассов должен переопределять (override) эти абстрактные методы и писать для них содержимое.

 abstract class Person < abstract sayHello(): void; // An abstract method. >class EnglishPerson extends Person < sayHello(): void < console.log("Hello"); >> class RussianPerson extends Person < sayHello(): void < console.log("Привет"); >> function method_abstract_ex1_test() < var enPerson = new EnglishPerson(); enPerson.sayHello(); var ruPerson = new RussianPerson(); ruPerson.sayHello(); >method_abstract_ex1_test(); // Call the function. 

5- опциональные параметры

Как упоминалось выше, классы в TypeScript и JavaScript не допускают методов с одинаковыми именами, но метод может включать опциональные параметры.

 // Non-static method with optional arguments: [private | protected | public] method_name(args, optional_args?): return_type < // statement(s) >// Static method with optional arguments: [private | protected | public] static method_name(args, optional_args?) : return_type < // statement(s) >// Abstract method with optional arguments: [protected | public] abstract method_name(args, optional_args?): return_type; 

 class MyUtils < static concat(s1: string, s2: string, s3?: string): string < if (s3) < return s1 + s2 + s3; >return s1 + s2; > static sum(v1: number, v2: number, v3?: number, v4?: number): number < return v1 + v2 + (v3 ?? 0) + (v4 ?? 0); >> function method_optional_args_ex1_test() < var result1 = MyUtils.concat('One', 'Two'); console.log(`result1: $`); var result2 = MyUtils.concat('One', 'Two', 'Three'); console.log(`result2: $`); var value1 = MyUtils.sum(1, 2, 3, 4); console.log(`value1: $`); var value2 = MyUtils.sum(1, 2, 3); console.log(`value2: $`); var value3 = MyUtils.sum(1, 2); console.log(`value3: $`); > method_optional_args_ex1_test(); // Call the method. 

 result1: OneTwo result2: OneTwoThree value1: 10 value2: 6 value3: 3 

6- Параметры со значениями по умолчанию

TypeScript поддерживает методы с параметрами по умолчанию, которые должны быть последними параметрами в списке параметров.

 // Non-static method [private | protected | public ] method_name ( arg1 : data_type1, arg2 : data_type2, arg3 : data_type3 = defaultValue3, arg4 : data_type4 = defaultValue4) : return_type < // statement(s) >// Static method [private | protected | public ] static method_name ( arg1 : data_type1, arg2 : data_type2, arg3 : data_type3 = defaultValue3, arg4 : data_type4 = defaultValue4) : return_type < // statement(s) >// Abstract method [protected | public ] abstract method_name ( arg1 : data_type1, arg2 : data_type2, arg3 : data_type3 = defaultValue3, arg4 : data_type4 = defaultValue4) : return_type; 

 class SalesUtils < static applyDiscount(amount : number, discount: number = 0.05) : number < return amount * (1 - discount); >> function method_default_value_args_ex1_test() < var value1 = SalesUtils.applyDiscount(1000); console.log(`value1 = $`); var value2 = SalesUtils.applyDiscount(1000, 0.5); console.log(`value2 = $`); > method_default_value_args_ex1_test(); // Call the method. 

7- Параметры с типом данных объединения

 // Non-static method [private | protected | public ] method_name ( arg1 : data_type1, arg2 : data_type2, arg3 : data_type31 | data_type32 | data_type3N, // Union Data Type arg4 : data_type4 = defaultValue4) : return_type < // Statament(s) >// Static method [private | protected | public ] static method_name ( arg1 : data_type1, arg2 : data_type2, arg3 : data_type31 | data_type32 | data_type3N, // Union Data Type arg4 : data_type4) : return_type < // Statament(s) >// Abstract method [protected | public ] abstract method_name ( arg1 : data_type1, arg2 : data_type2, arg3 : data_type31 | data_type32 | data_type3N, // Union Data Type arg4 : data_type4) : return_type; 

 interface IStudent < studentId: number, studentName: string >interface IWorker < workerId: number, workerName: string >class AppUtils < static getName(person: IStudent | IWorker): string < // Union Type Arg var p = person as IStudent; if (p.studentName) < return p.studentName; >return (person as IWorker).workerName; > > function method_union_type_args_ex1_test() < var student = < studentId: 1, studentName: "Tom" >; var worker = < workerId: 2, workerName: "Jerry" >; var name1 = AppUtils.getName(student); var name2 = AppUtils.getName(worker); console.log(`name1: $`); console.log(`name2: $`); > method_union_type_args_ex1_test(); // Call the method. 

8- Переопределение метода

Подкласс может переопределять (override) метод родительского класса, если выполняются следующие условия:

• Два метода должны иметь одинаковое имя и одинаковые параметры.
• Тип возвращаемого значения двух методов должен быть одинаковым, или тип возвращаемого значения метода в подклассе должен быть подтипом типа возвращаемого значения метода в родительском классе.

• Класс Mouse переопределяет (override) метод sayAnything() класса Animal.

 class Animal < sayAnything(): void < console.log(''); > > class Mouse extends Animal < sayAnything(): void < // Override method of parent class. console.log('Hi Tom!'); >> function method_override_ex1_test() < var animal = new Mouse(); animal.sayAnything(); // Hi Tom! >method_override_ex1_test(); // Call the function. 

Например: Вы также можете использовать ключевое слово super для вызова метода с тем же именем родительского класса.

 class BoldFormatter < formatText(text: string): string < return '' + text + ''; > > class BoldItalicFormatter extends BoldFormatter < formatText(text: string): string < // Override method of parent class. var boldText = super.formatText(text); // Call super method. return '' + boldText + ''; > > function method_override_ex2_test() < var formatter = new BoldItalicFormatter(); var formattedText = formatter.formatText('Hello'); console.log(formattedText); >method_override_ex2_test(); // Call the method. 

9- Method Overloading

В статье о функциях в TypeScript я представил «Function Overloading» (Перегрузку функций) . Метод рассматривается как функция класса, поэтому он также имеет аналогичную концепцию, которая называется «Method Overloading» (Перегрузка метода).

TypeScript не допускает двух методов с одинаковым именем в классе, даже если они имеют разные параметры. Method Overloading позволяет определить метод с различными типами параметров.

В TypeScript, Method Overloading выглядит иначе, чем в C++, Java или C#. Основная идея перегрузки (overload) для метода заключается в создании универсального метода, который проверяет, какой тип параметра был передан при вызове метода, а затем выполняет некоторую логику для соответствующего случая. Полезно добавить определения для метода, чтобы помочь другим программистам узнать, как его правильно использовать.

 // Definition 1 [static] method_name(arg_11 : type_11, arg_1N : type_1N): return_type; ]// Definition 2 [static] method_name(arg_21 : type_21, arg_22 : type_22, arg_2M : type_2M) : return_type; [static] method_name(. args : any[]) : return_type < // Method body. >

 interface IDimension < width: number, height: number >class MathUtils < static getArea(dimension: IDimension): number; // Definition 1 static getArea(width: number): number; // Definition 2 static getArea(width: number, height: number): number; // Definition 3 static getArea(. args: any[]): number < if (args.length == 1) < if (typeof args[0] == 'number') < // Use Definition 2 return args[0] * args[0]; >else < // Use Definition 1 var dim = args[0] as IDimension; return dim.width * dim.height; >> else if (args.length == 2) < return args[0] * args[1]; >else < throw new Error('Arguments Invalid!'); >> > function method_overloading_ex1_test() < var area1 = MathUtils.getArea(< width: 10, height: 20 >); // 200 var area2 = MathUtils.getArea(10); // 100 var area3 = MathUtils.getArea(10, 15); // 150 console.log(`area1: $`); console.log(`area2: $`); console.log(`area3: $`); > method_overloading_ex1_test(); // Call the function. 

 area1: 200 area2: 100 area3: 150 

View more Tutorials:

Это онлайн курс вне вебсайта o7planning, который мы представляем, он включает бесплатные курсы или курсы со скидкой.

• Full Stack AWS Application Development
• Design Patterns in C# and .NET
• HTML5, CSS3 & JavaScript Workshop: Build 7 Creative Projects
• Application security on AWS with Amazon Cognito (June 2017)
• Starting 2D Game Development in Unity with C#
• Learn iPython: The Full Python IDE
• CSS Development (with CSS3!)
• Basic Concepts of Web Development, HTTP and Java Servlets
• Python Programming Full Course (Basics,OOP,Modules,PyQt)
• Developing High Quality Android Applications
• Servlets and JSPs Tutorial: Learn Web Applications With Java
• Projects in AngularJS — Learn by building 10 Projects
• Hibernate in Practice — The Complete Course
• Build an Amazon clone: Nodejs + MongoDB + Stripe Payment
• Microservices with Spring Cloud
• Be a NodeJS expert from scratch
• Build an AirPods finder app in Swift — iOS 13 — Xcode 11
• SQL Server FAST TRACK — Temp Tables and Table Variables
• The Complete TDD Course: Master Ruby Development with RSpec
• Rebuild Pinterest from Scratch with HTML + CSS (Part 1) FREE
• Connecting and working with Oracle Cloud DBaaS
• Python 3000: Tactical SQL Quick-Start
• Introducing Dart
• Starting with React & Redux: Build modern apps (2nd edition)
• The Complete Oracle SQL Certification Course

Источник

Необязательный абстрактный метод typescript

Абстрактные классы представляют классы, определенные с ключевым словом abstract . Они во многом похожи на обычные классы за тем исключением, что мы не можем создать напрямую объект абстрактного класса, используя его конструктор.

abstract class Figure < >// let someFigure = new Figure() // Ошибка!

Как правило, абстрактные классы описывают сущности, которые в реальности не имеют конкретного воплощения. Например, геометрическая фигура может представлять круг, квадрат, треугольник, но как таковой геометрической фигуры самой по себе не существует. Есть конкретные фигуры, с которыми мы и работаем. В то же время все фигуры могут иметь какой-то общий функционал. В этом случае мы можем определить абстрактный класс фигуры, поместить в него общий функционал, и от него унаследовать классы конкретных геометрических фигур:

abstract class Figure < getArea(): void< console.log("Not Implemented") >> class Rectangle extends Figure < constructor(public width: number, public height: number)< super(); >getArea(): void< let square = this.width * this.height; console.log("area b">абстрактный:
 
abstract class Figure < abstract getArea(): void; >class Rectangle extends Figure < constructor(public width: number, public height: number)< super(); >getArea(): void< let square = this.width * this.height; console.log("area b">abstract. При наследовании класс-наследник также обязан предоставить для них реализацию:
 
abstract class Figure < abstract x: number; abstract y: number; abstract getArea(): void; >class Rectangle extends Figure < //x: number; //y: number; constructor(public x: number, public y: number, public width: number, public height: number)< super(); >getArea(): void < let square = this.width * this.height; console.log("area brush:ts;">abstract x: number; abstract y: number;
 
Класс Rectangle предоставляет для них реализацию с помощью определения полей через параметры конструктора:
 
constructor(public x: number, public y: number, public width: number, public height: number)
 
По большому счету в данном случае большого смысла в абстрактных полях нет, тем не менее TypeScript позволяет их применять.
 
Источник