함수의 타입 명시
- 함수의 반환 (Return) 타입
함수에 최종 리턴값 함수 의 반환 타입을 명시하는 방법
타입이 명시 되지 않은 자바스크립트 함수 이다.
매개변수를 받아서 그 값을 콘솔로그에 출력하는 함수 이다.
타입 스크립트에서 함수의 반환값 을 나타내기 위해서 파라미터를 포함하고 있는 괄호 뒤에 :콜론을 찍고 반환 타입을 명시해 줄 수 있다.
- void 타입
-아무것도 반환 하지 않는 함수의 반환 값으로만 사용될 수 있는 타입
function sendGreeting(message, userName): void {
console.log(`${message}. ${userName}`);
}- string 타입
-함수의 return 값이 문자열 이라면 string 이라고 명시해 줄 수있다.
function sendGreeting(message, userName): string {
return 'Hello, Mark';
}- [] 배열 타입
-반환 되는 값이 배열 타입인 경우 배열 타입을 명시해 줄 수 있다.
function sendGreeting(message, userName): string[] {
return ['Hello, Mark'];
}함수의 매개변수 타입 명시
변수에 타입을 명시 할 수 있듯이 매개변수에도 타입을 명시 할 수 있다.
string 타입이 명시된 후에는 string 말고 다른 타입을 가진 인자 (argument) 는 전달 될 수 없다.
function sendGreeting(message:string, userName:string): void {
console.log(`${message}. ${userName}`);
}
sendGreeting("Hello", 1); 이렇게 숫자를 전달 하려고 하면 타입에 관한 에러 메세지가 나오게 된다.
⚠️ Argument of type 'number' is not assignable to parameter of type 'string'
//
만약 함수를 호출 할때 첫번째 매개변수에 메시지 만을 인자로 전달 하고 싶을때에는 두번째 인자만을 지우면 될까?
function sendGreeting(message:string, userName:string): void {
console.log(`${message}. ${userName}`);
}
sendGreeting("Hello"); 🙅♂️ 아니다 두번째 인자를 그냥 지우기만 하면 분명 에러가 생길것이다.
⚠️ An argument for 'userName' was not provided
.
이런 에러 메시지가 나오는 이유는 타입스크립트는
함수에 정의된 모든 매개 변수가 함수에 필요하다고 가정하기때문이다.
즉, 함수가 호출 되면 타입스크립트 컴파일러는 함수에 정의된 매개변수와 함수를 호출 할때 전달되는 인자를 비교 검사 하게 되는데, 매개변수와 인자의 수가 일치 하지 않으면 에러 메시지가 나오게 된다.
🟣 해결 방법
선택적 매개변수 (Optional Parameter)
매개 변수 이름 뒤에 ? 물음표를 붙이면 선택적 매개변수가 되면서 에러메시지도 사라지게 된다.
function sendGreeting(message:string, userName?:string): void {
console.log(`${message}. ${userName}`);
}
sendGreeting("Hello"); ❕중요❕
전달되는 매개 변수가 여러개이고 전달되는 매개변수 중 몇가지만 매개변수인 경우 선택적 매개변수 들은 반드시 필수 매개변수 뒤에 나타나야 한다.
타입스크립트 규칙상 하나의 매개변수가 선택적 매개 변수가 되면
오른쪽에 위치한 나머지 매개변수 들 역시 선택적 매개변수가 되어야 하기 때문이다.
기본 매개변수(Default Parameter)
function sendGreeting(message:string, userName?:string): void {
console.log(`${message}. ${userName}`);
}
sendGreeting("Hello"); 터니멀에서 node app.js 명령어를 넣고 실행 시키면 호출된 함수가 실행이 되고 콘솔로그의 값이 터미널에 출력이 되는데
출력된 콘솔로그이 값은 두번째 파라미터 userName 의 값이 전달 되지 않아 Hello, undefined 이라고 나오게 된다.
이렇게 아무런 값이 전달 되지 않을때 undefined 대신 할당된 값을 출력 하려면 기본 매개변수 를 사용 할 수 있다.
→사용법은 매우 간단한다.←
그냥 매개변수 뒤에 = 그리고 기본값이 될 값을 할당 해주면 된다. 그러면 함수의 값이 아무것도 전달되지 않을 때 지정 해준 기본값이 자동으로 매개변수에 할당 되게 된다.
이렇게 기본 매개변수를 사용 할 시에는 더이상 선택적 매개변수가 필요하지 않게 되기 때문에 ? 물음표는 더이상 필요가 없게 된다.
그리고 string 을 나타내는등에 타입들도 필요가 없게 된다.
(매개변수의 타입을 지워주는 이유는 타입스크립트의 타입추론과 연관되어 있다. 매개변수의 기본값이 주어지는 코드를 통해서 타입스크립트는 타입추론으로 userName 의 매개변수의 타입이 string 값이 됨을 알게 되기 때문이다. 따라서 보다 간결한 코드를 위해서 매개변수에 스트링 타입을 생략 하는것이 좋다. )
화살표 함수 (Arrow Function)
단순하고 간결한 문법으로 함수를 만들기 위해서 사용 되는 방법이다.
function add (num1, num2) {
return num1 + num2 ;
}🔽
const add = (num1, num2) => num1 + num2 ;
👉 youtube 땅콩 코딩
