매개변수와 인수
function add(x, y) {
return x + y;
}
add(2, 5);
- 매개변수 : 함수를 정의할 때 사용되는 변수를 매개변수라고 합니다. (x, y)
- 인수 : 함수를 호출할 때 사용되는 값을 인수라고 합니다. (2, 5)
- 인자 값, 매개변수, 파라미터(Parameter)는 모두 같은 말입니다.
일급객체 : 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체
함수에 매개변수 제공
함수에서 반환 가능
변수에 할당 가능
JS와 TS의 함수는 일급 객체이다.
일급 객체의 함수선언
- 함수 자체를 값으로 저장 가능
let sum=function(a,b){
return a+b;
}
function ul(child){
return `<ul>{&child}</ul>`
}
- 함수를 리턴
function makeLI(container,contents){
const liList=[];
for(const content of contents){
liList.push(`<li>${content}</li>`)
}
return container(liList.join('')) //함수를 리턴
}
-함수를 파라미터로 넣어줄 수 있다.
const htmlUL=makeUL(ul,['월','화','수','목','금','토','일']);
타입스크립트 함수 선언 방식
함수 내부에서 매개변수의 타입을 체크할 필요없이 사용할 수있고 함수 반환값의 타입도 명확해 졌다.
아래와 같이 매개변수 옆에 매개변수의 타입을 )옆에 반환값을 타입을 선언해줄 수 있다.
let f12 = function (x: number, y: number): number {
return x + y;
}
TypeScript 컴파일러는 방정식의 한쪽에만 타입이 있더라도 타입을 추론할 수 있다.
이러한 타입 추론 형태를 “contextual typing” 이라고 하며, 이를 통해 타입을 유지하기 위한 노력을 줄일 수 있다.
// 매개변수 x와 y는 number 타입
let f12: (baseValue: number, increment: number) => number = function (x, y) {
return x + y;
}
타입스크립트 매개변수
함수에 주어진 인자의 수는 함수가 기대하는 매개변수의 수와 일치해야 한다.
- 기본-초기화 매개변수(Default parameter)
function buildName(firstName: string, lastName = "Smith") {
return firstName + " " + lastName;
}
let result1 = buildName("Bob"); // "Bob Smith"
let result2 = buildName("Bob", undefined); // "Bob Smith"
let result3 = buildName("Bob", "Adams"); // "Bob Adams"
let result4 = buildName("Bob", "Adams", "Sr."); // Error: Expected 1-2 arguments, but got 3.
- 선택 매개변수(optional parameter)
선택 매개변수는 인수로 전달받지 않을 수도 있다는 선언을 해주는 것이다.
Javascript에서는 모든 매개변수가 선택적으로, 인수가 없다면 undefined가 된다.
TypeScript에서도 선택적 매개변수를 사용할수 있는데, 매개변수 뒤 ?를 붙인다.
function buildName(firstName: string, lastName?: string) {
if (lastName) return firstName + " " + lastName;
else return firstName;
}
let result1 = buildName("Bob");
let result2 = buildName("Bob", "Adams");
let result3 = buildName("Bob", "Adams", "Sr."); // Error: Expected 2 arguments, but got 3
- 나머지 매개변수(rest parameter)
컴파일러는 생략 부호(...)을 이용하여 뒤의 인자 배열을 빌드해 함수에서 사용할 수 있다.
나머지 매개변수들을 배열로 받아 무한으로 취급한다.
아무것도 안넘겨줘도 된다.
function buildName1(firstName: string, ...restOfName: string[]) {
// restOfName = [ 'Samuel', 'Lucas', 'MacKinzie' ]
return firstName + " " + restOfName.join(" ");
}
let employeeName = buildName1("Joseph", "Samuel", "Lucas", "MacKinzie"); // "Joseph Samuel Lucas MacKinzie"
함수 오버로드
함수 오버로드는 객체 지향의 특징을 말할 때 사용하는 오버로드와 비슷한 기능을 한다. 함수명은 같지만 매개변수와 반환타입이 다른 함수를 여러개 선언할 수 있다.
이 함수 오버로드는 컴파일 시간에 가장 적합한 오버로드를 선택하여 컴파일하기 때문에 런타임 비용이 들지 않는다. 이때 조심할 것은 결국 하나의 함수이기 때문에 각 오버로들를 독립된 블록으로 선언하면 안된다는 점이다.
function line(say?:string, word:string):string{}
function line(say?:number, word:number):number{}
function line(say?:any, word:any):any{}
함수 오버로드를 사용하는 방법은 일반적인 함수 타입을 가장 아래에 선언하고 그 위로 구체적인 타입들을 선언하는 것이다.
function line(say?:string, word:string):string
function line(say?:number, word:number):number
function line(say?:any, word:any):any
{}
익명함수의 사용
익명함수와 화살표 함수
익명함수를 좀더 간단하게 표현 할 수 있는 방법이 화살표 함수이다. 화살표 함수는 람다함수라고 할 수 있다.
const funq = ()=>{}
화살표 함수를 쓸 때 특징으로 매개변수가 없을 땐 ()를 쓰고 하나일 땐 생략가능, 2개 부턴 다시 써줘야한다. 함수 몸체에서 코드가 리턴문 한줄이라면 return과 코드 블럭을 생략할 수 있다.
const funq = ()=>{}
const funq = a => a
const funq = (a,b)=>a+b
화살표 함수를 콜백함수로 사용
화살표 함수는 무엇보다 가독성이 좋다. 때문에 filter, reduce, setTimeout등의 콜백함수가 필요한 함수안에서 많이 사용된다.
[...a].filer((item,idx)=>{});
[...a].reduce((acc,cur,idx)=>{})
객체의 메소드로 사용
화살표 함수는 객체 리터럴에서 메소드로도 사용할 수 있다. 이때 메소드 내부에서 객체의 다른 요소들을 참조하고 싶을 때 this를 사용하는데, 그냥 this를 사용하면 코드 어시스트가 동작을 안한다...이를 해결하려면 객체에 타입을 선언해줘야한다.
interface objType {
name:string,
say(this:objType,to:string):string
// this를 사용하기 위해 매개변수자리에서 this의 타입을 해당 객체타입으로 선언해주고
// 다른 매개변수나 반환값도 타입지정을 해준다.
}
let obj :objType = {
name: "백승일",
say:(this:objType,to:string)=>{}
}
this의 타입을 지정해줌으로 내부 참조시 코드 어시스트가 동작할 수 있다. 이렇게 된 이유는 this는 타입이 없기 때문이다. 그래서 인터페이스를 통해 this의 타입을 지정해준다면 문제가 해결된다. 이런 과정을 생략하는 것을 방지하려면 tsconfig에 noImplictThis옵션을 켜주면 반드시 this의 타입을 선언해줘야한다.
익명함수의 함수타입
익명함수의 타입선언
익명함수는 변수에 할당할 수 있습니다.
const funq = ()=>{}
이때 매개변수와 반환값의 타입지정도 가능하지요
const funq = (a:string):string=>{}
그리고 이 익명함수를 담는 변수도 타입선언이 가능합니다.
const funq :(a:string)=> string = (a:string):string=>{};
하지만 이렇게 되면 코드의 가독성이 떨어집니다. 필자는 처음에 뭐지 콜백인가 했다. 이를 막기 위해서 type 엘리어스를 이용하여 미리 타입을 분리해서 사용해준다.
type funqType = (a:string)=> string
const funq : funqType = (a:string):string=>{};
이렇게 타입을 분리해두면 재활용도 가능해진다.
type funqType = (a:string)=> string
const funq : funqType = (a:string):string=>{};
const funq2 : funqType = (a:string):string=>{};
이렇게 익명함수를 할당받는 변수에 타입을 선언하면 좋은 점은
- 익명함수의 타입을 분리하여 관리할 수 있다.
- 함수 타입만으로 익명함수의 타입이 안전해짐으로 익명함수에 타입추가안해도 안전하다.
- 가독성이 좋아진다.
정도가 되겠다.
콜백함수의 타입선언
콜백 함수라 함은 다른 함수의 매개변수로 전달되는 함수이다. 콜백함수를 받는 함수를 고차함수라고 하며 콜백함수를 전달 받거나 함수를 반환해주는 특성이 있다.
setTimeout(()=>{
console.log("으악!")
},1000)
이렇게 고차함수에 매개변수로 들어가는 콜백함수는 타입을 지정하지 않아서 타입 안전성이 떨어진다. 콜백함수의 역할이 중요해진다면 앞서 한 것 처럼 타입을 분리해서 추가해주는게 좋다.
type callBackType = (a:string)=>void;
const callBack:callBackType = a => a;
function sayWhat (message:string,callBack){
return callBack(message);
}
console.log(sayWhat("hi",callBack));
이처럼 콜백함수의 타입을 한번 지정해 놓으면 재사용이 가능하기 때문에 코드가 더 간결해 질 수 있다.
'PROGRAMING > TYPESCRIPT' 카테고리의 다른 글
TypeScript 06 인터페이스 (0) | 2021.11.26 |
---|---|
TypeScript 05 클래스와 인터페이스 (0) | 2021.11.24 |
TypeScript 03 Utility types (0) | 2021.11.24 |
TypeScript 02 TypeScript의 기본 Type (0) | 2021.11.24 |
TypeScript 01 개요 (0) | 2021.11.24 |