[TS] TypeScript를 이용해 함수 사용하기

JavaScript With Syntax For Types.

 

 

1️⃣  TypeScript에서 함수 사용하기

 

-  TypeScript 함수 작성 시 반환 타입을 추론 하도록 하는 걸 권장

-  함수의 매개 변수와 인수의 타입이 호환 가능하게 작성 (인수의 타입을 잘못 전달하면 에러가 발생)

 

// 함수 선언식
function world(name: string): string {
    return `hello ${name}`;
}

// 함수 표현식
let world2 = function (name: string): string {
    return `hello ${name}`;
}

// 화살표 함수 표현식
let world3 = (name: string): string => {
    return `hello ${name}`;
}

// 단축형 화살표 함수 표현식
let world4 = (name: string): string => `hello ${name}`;

 

 

TypeScript 컴파일러는 방정식의 한쪽에만 타입이 있더라도 타입을 추론할 수 있다.

이러한 타입 추론 형태를 "contextual typing"이라고 한다.  이를 통해, 프로그램에서 타입을 유지하기 위한 노력을 줄일 수 있다.

// 일반적인 함수
let f12 = function (x: number, y: number): number { 
    return x + y;
}


// 매개변수 x와 y는 number 타입이라는 것을 추론
let f12: (baseValue: number, increment: number) => number = function (x, y) {
    return x + y;
}

 

 

 

 

💡  용어 정리

-  함수를 정의할 때 사용되는 변수를 매개 변수

-  함수를 호출할 때 사용되는 값을 인수

 

→  인자 값 == 매개변수 == Parameter

function 함수이름(매개변수1, 매개변수2) {
    return 리턴값;
}

함수이름(인자1, 인자2);

function add(x, y) {
    return x+y;
}

add(2,5);

 

 

 

💡  일급객체 (first-class object)

:  다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 일급 객체

 

일급 객체의 조건

-  다른 함수에 매개변수로 제공할 수 있다.

-  함수에서 반환 가능하다.

-  변수에 할당 가능하다.

 

→  JavaScript와 TypeScript의 함수는 일급 객체이다.

 

 

 

 

💡  함수 선언 방법

1)  함수 선언식

function world(name) {
    return `hello ${name}`;
}

 

2)  함수 표현식

let world2 = function (name) {
    return `hello ${name}`;
}

 

3)  화살표 함수 표현식

let world3 = (name) => {
    return `hello ${name}`;
}

// 단축형 화살표 함수 표현식
let world4 = (name) => `hello ${name}`;

 

4)  함수 생성자

let world5 = new Function("name", 'return "hello " + name');

 

 

 

 

 

 

2️⃣  함수의 매개변수

 

기본 매개변수 (Parameter)

-  함수에 주어진 인자의 수는 함수가 기대하는 매개변수의 수와 일치해야함.

function buildName(firstName: string, lastName: string) {
    return firstName + " " + lastName;
}

let result1 = buildName("Bob");                    // Error: Expected 2 arguments, but got 1
let result2 = buildName("Bob", "Adams", "Sr.");    // Error: Expected 2 arguments, but got 3
let result3 = buildName("Bob", "Adams");

 

 

선택적 매개변수 (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

 

 

기본-초기화 매개변수 (Default Parameter)

-  TypeScript에서는 값을 제공하지 않거나, undefined로 했을 때에 매개변수의 값 할당 가능

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

 

 

나머지 매개변수 (Rest Parameters)

-  컴파일러는 생략 부호(...) 뒤의 인자 배열을 빌드해 함수에서 사용 가능

-  나머지 매개변수는 매개변수의 수를 무한으로 취급

-  아무것도 넘겨주지 않을 수도 있음.

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"

 

 

 

 

 

---

 이 글은 엘리스의 AI트랙 5기 강의를 들으며 정리한 내용입니다.