매개변수 및 반환값 타입 지정
Coddy JavaScript 여정의 TypeScript 소개 섹션에 포함된 레슨. 73개 중 22번째.
함수는 모든 애플리케이션의 기본 구성 요소이며, TypeScript는 함수가 수락하고 반환하는 데이터의 유형을 정확하게 지정할 수 있게 함으로써 함수를 더 안전하고 예측 가능하게 만듭니다. 함수에 타입 어노테이션(type annotations)을 추가하면, 무엇이 입력되고 무엇이 출력되는지를 정의하는 명확한 계약을 만드는 것입니다.
함수에 타입을 추가하려면, 각 매개변수 이름 뒤에 타입을 지정하고, 선택적으로 매개변수 목록 뒤에 반환 타입을 지정합니다:
function greet(name: string): string {
return "Hello, " + name;
}
function multiply(a: number, b: number): number {
return a * b;
}구문은 간단한 패턴을 따릅니다: 각 매개변수에 대해 parameterName: type을 사용하고, 닫는 괄호 뒤에 : returnType을 사용합니다.
챌린지
쉬움두 개의 number 타입 매개변수를 받아 그 합을 반환하는 add라는 이름의 함수를 생성하세요. 이 함수는 number라는 명시적인 반환 타입 어노테이션을 가져야 합니다.
string 타입의 firstName과 string 타입의 lastName이라는 두 개의 매개변수를 받는 getFullName이라는 이름의 또 다른 함수를 생성하세요. 이 함수는 이름과 성 사이에 공백이 있는 하나의 문자열로 전체 이름을 반환해야 합니다. string이라는 명시적인 반환 타입 어노테이션을 추가하세요.
number 타입의 age와 boolean 타입의 hasLicense라는 두 개의 매개변수를 받는 isEligible이라는 이름의 세 번째 함수를 생성하세요. 이 함수는 나이가 18세 이상이고 면허가 있는 경우 true를 반환하고, 그렇지 않으면 false를 반환해야 합니다. boolean이라는 명시적인 반환 타입 어노테이션을 추가하세요.
다음 값들로 함수를 호출하고 결과를 출력하여 함수를 테스트하세요:
15와27을 사용하여add호출"John"과"Smith"를 사용하여getFullName호출20과true를 사용하여isEligible호출16과true를 사용하여isEligible호출
각 결과를 위에 지정된 순서대로 별도의 줄에 출력하세요.
직접 해보기
// TODO: 여기에 코드를 작성하세요
// 명시적 반환 타입 어노테이션을 사용하여 add 함수를 생성하세요
// 명시적 반환 타입 어노테이션을 사용하여 getFullName 함수를 생성하세요
// 명시적 반환 타입 어노테이션을 사용하여 isEligible 함수를 생성하세요
// 함수를 테스트하고 결과를 출력하세요
// 15와 27을 사용하여 add를 호출하세요
// "John"과 "Smith"를 사용하여 getFullName을 호출하세요
// 20과 true를 사용하여 isEligible을 호출하세요
// 16과 true를 사용하여 isEligible을 호출하세요이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
TypeScript 소개의 모든 레슨
4함수 활용하기
매개변수 및 반환값 타입 지정화살표 함수 타입 지정'void' 반환 타입'?'를 사용한 선택적 매개변수기본 매개변수 값나머지 매개변수 타입 지정함수 타입 정의하기요약: 타입이 지정된 함수 작성하기직접 연습해 보세요: 온라인 JavaScript 컴파일러