logo

TypeScript 화살표 기능

TypeScript의 ES6 버전은 다음과 같은 화살표 기능을 제공합니다. 속기 익명 함수, 즉 함수 표현식을 정의하기 위한 구문입니다. function 키워드가 생략되었습니다. 우리는 그것을 뚱뚱한 화살표라고 부를 수 있습니다. 왜냐하면 ->는 얇은 화살표이고 =>는 ' 지방 ' 화살표). 그것은 또한 람다 함수 . 화살표 함수의 어휘 범위는 ' 이것 ' 키워드.

사자와 호랑이의 차이

화살표 기능의 동기는 다음과 같습니다.

  • 계속해서 타이핑 기능을 할 필요가 없을 때.
  • 이 키워드의 의미를 어휘적으로 포착합니다.
  • 이는 인수의 의미를 어휘적으로 포착합니다.

통사론

Arrow 함수의 구문을 세 부분으로 나눌 수 있습니다.

    매개변수:함수에는 매개변수가 있을 수도 있고 없을 수도 있습니다.화살표 표기법/람다 표기법(=>)진술:이는 함수의 명령어 세트를 나타냅니다.
 (parameter1, parameter2, ..., parameterN) => expression; 

우리가 뚱뚱한 화살 (=>) 표기법을 사용할 필요가 없습니다. 기능 예어. 매개변수는 대괄호() 안에 전달되고, 함수 표현식은 중괄호({}) 안에 포함됩니다.

ES5 및 ES6 스타일의 코딩에는 함수를 작성하는 두 가지 방법이 있습니다.

 // ES5: Without arrow function var getResult = function(username, points) { return username + ' scored ' + points + ' points!'; }; // ES6: With arrow function var getResult = (username: string, points: number): string => { return `${ username } scored ${ points } points!`; } 

매개변수가 있는 화살표 함수

다음 프로그램은 매개변수가 있는 화살표 함수의 예입니다.

 let sum = (a: number, b: number): number => { return a + b; } console.log(sum(20, 30)); //returns 50 

위의 예에서는 합집합 화살표 함수입니다. ' a: 숫자, b: 숫자 '는 매개변수 유형입니다. : 숫자 '는 반환 유형이고 화살표 표기법 =>은 함수 매개변수와 함수 본문을 구분합니다.

위의 TypeScript 프로그램을 컴파일한 후 해당 JavaScript 코드는 다음과 같습니다.

 let sum = (a, b) => { return a + b; }; console.log(sum(20, 30)); //returns 50 

산출:

TypeScript 화살표 기능

매개변수가 없는 화살표 함수

다음 프로그램은 매개변수가 없는 화살표 함수의 예입니다.

 let Print = () => console.log('Hello JavaTpoint!'); Print(); 

산출:

TypeScript 화살표 기능

화살표 함수에서 함수 본문이 하나의 명령문으로만 구성된 경우 중괄호와 return 키워드가 필요하지 않습니다. 아래 예를 통해 이해할 수 있습니다.

 let sum = (a: number, b: number) => a + b; console.log('SUM: ' +sum(5, 15)); 

산출:

TypeScript 화살표 기능

클래스의 화살표 함수

화살표 함수를 클래스의 속성으로 포함할 수 있습니다. 다음 예는 이를 더 명확하게 이해하는 데 도움이 됩니다.

 class Student { studCode: number; studName: string; constructor(code: number, name: string) { this.studName = name; this.studCode = code; } showDetail = () => console.log('Student Code: ' + this.studCode + '
Student Name: ' + this.studName) } let stud = new Student(101, 'Abhishek Mishra'); stud.showDetail(); 

산출:

TypeScript 화살표 기능