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
산출:
매개변수가 없는 화살표 함수
다음 프로그램은 매개변수가 없는 화살표 함수의 예입니다.
let Print = () => console.log('Hello JavaTpoint!'); Print();
산출:
화살표 함수에서 함수 본문이 하나의 명령문으로만 구성된 경우 중괄호와 return 키워드가 필요하지 않습니다. 아래 예를 통해 이해할 수 있습니다.
let sum = (a: number, b: number) => a + b; console.log('SUM: ' +sum(5, 15));
산출:
클래스의 화살표 함수
화살표 함수를 클래스의 속성으로 포함할 수 있습니다. 다음 예는 이를 더 명확하게 이해하는 데 도움이 됩니다.
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();
산출: