타입스크립트 공부하기, 타입스크립트 실행 방법, 따라하면서 이해하기 2~3 Studying TypeScript, how to execute TypeScript, and understanding while following 2-3

# 시작

<실전 리액트 프로그래밍> 책을 따라 공부해보는 과정 2~3일차

https://sjwdev.tistory.com/17

# 실습

923 함수 타입

함수의 타입 정의하기

// 924.tsfunction getInfoText(name: string, age: number): string {// 1const nameText = name.substr(0, 10);// 2const ageText = age >= 35 ? "senior" : "junior";// 3return `name : ${nameText}, age: ${ageText}`;
}
const v1: string = getInfoText("mike", 23);
const v2: string = getInfoText("mike", "23");// 타입 에러 4const v3: number = getInfoText("mike", 23);// 타입 에러 5

1) 매개변수 타입과 반환 타입 정의

2) 매개변수 name은 문자열 타입이라 substr 메서드 사용 가능

3) 매개변수 age는 숫자이므로 숫자와 비교 가능

4) age에 문자열을 입력하면 타입 에러

5) 숫자 타입에 문자열 반환값을 넣으면 타입 에러

변수를 함수의 타입으로 정의하기

// 925.tsconst getinfoText: (name : string, age: number) => string = function(name, age){// 1// ...
}

1) 함수 구현 코드에서 매개변수, 반환 타입을 작성하지 않아도 됨

선택 매개변수

매개변수 이름 오른쪽에 물음표 기호를 입력하면 선택 매개변수

// 926.tsfunction getInfoText(name: string, age: number, language?: string): string {
// 1const nameText = name.substr(0, 10);
    const ageText = age >= 35 ? "senior" : "junior";
    const languageText = language ? language.substr(0, 10) : "";// 2return `name : ${nameText}, age: ${ageText}, language: ${languageText}`;
}
getInfoText("mike", 23, "ko");
getInfoText("mike", 23);// 3
getInfoText("mike", 23, 123);// 타입 에러 4

1) language : 선택매개변수

2) 만약 인수의 존재 여부를 검사하지 않고 substr 메소드를 호출하면 타입 에러 발생

3) language 해당하는 변수는 없어도 됨

4) 입력하는 경우에는 반드시 정의된 타입으로 해야함

선택 매개변수 오른쪽에 필수 매개변수를 정의한 코드

// 927.tsfunction getInfoText(name: string, language?: string, age: number): string {
// ...
}

선택 매개변수 오른쪽에 필수 매개변수를 정의한 코드

// 927.tsfunction getInfoText(name: string, language?: string, age: number): string {
// ...
}

에러 발생

undefined를 사용해서 중간에 선택 매개변수 정의

// 928.tsfunction getInfoText(
    name: string,
    language: string | undefined, // 1
    age: number
): string {
// ...
}
getInfoText("mike", undefined, 23);// 2

1) 유니온 타입으로 undefined

2) 함수 호출 시 중간에 undefined 가능, 매개변수의 개수가 많은 경우 비구조화 문법으로 작성하는 것이 좋다.

매개변수의 기본값 정의

// 929.tsfunction getInfoText(
    name: string,
    age: number = 15, // 1
    language = "korean" // 2
): string {
// ...
}
// 3console.log(getInfoText("mike"));
console.log(getInfoText("mike", 23));
console.log(getInfoText("jone", 36, "english"));

const f1: (
// 4
    name: string,
    age?: number,
    language?: string
) => string = getInfoText;

1) 타입 오른쪽에 = 를 사용해서 기본값을 정의할 수 있다. age를 입력하지 않으면 15가 쓰임

2) 타입을 입력하지 않아도 기본값 정의 가능, 기본값이 문자열이므로 타입이 문자열이 됨

3) 세가지 모두 정상호출

4) 기본값이 있는 매개변수는 선택 매개변수다.

나머지 매개변수

// 930.tsfunction getInfoText(name: string, ...rest: string[]): string {
// ...
}

나머지 매개변수는 배열로 정의 가능

this 타입

this 타입을 정의하지 않으면 any 타입 사용, 하지만 any는 가급적 사용하지 않음

// 931.tsfunction getParam(index: number): string {
    const params = this.splt(",");// 1if (index < 0 || params.length <= index) {
        return "";
    }
    return this.split(",")[index];
}

1) split이 아니라 splt로 오타를 냈으나 this가 정의되어 있지 않아서 에러가 나지 않음

첫번째 매개변수 위치에 정의하면 된다.

this 타입을 정의한 코드

// 932.tsfunction getParam(this: string, index: number): string {// 1const params = this.splt(",");// 2// ...
}

1) index는 두 번째 자리에 정의, 하지만 this는 매개변수가 아니므로 index가 첫번째 매개변수임

2) this의 타입을 정의했기 때문에 splt오타에서 타입 에러

원시 타입에 메서드 추가

원시(primitive) 타입에 메서드를 등록할 때는 인터페이스 이용

// 933.ts
interface String {// 1
  getParam(this: string, index: number) : string;

}
String.prototype.getParam = getParam;// 2console.log('asdf, 1234, 0k '.getParam(1));// 3

1) 인터페이스를 이용해서 이미 존재하는 문자열 타입에 getParam 메서드 추가

2) 문자열의 프로토타입에 우리가 작성한 함수를 등록

3) 문자열에 등록된 getParam 호출

함수 오버로드 : 여러 개 타입 정의

add 함수를 가정해보자.

두 매개변수가 모두 문자열이면 문자열 반환

두 매개변수가 모두 숫자이면 숫자를 반환

두 매개변수를 서로 다른 타입으로 입력하면 안 된다.

함수 오버로드 사용하지 않은 코드

// 934.ts// 1function add(x: number | string, y: number | string): number | string {
    if (typeof x === "number" && typeof y === "number") {
        return x + y;
    } else {
        const result = Number(x) + Number(y);
        return result.toString();
    }
}
const v1: number = add(1, 2);// 타입 에러 2console.log(add(1, "2"));// 3

1) 모든 매개변수, 반환값 타입은 문자열이나 숫자

2) 모든 매개변수가 숫자면 반환값도 숫자이나 타입 에러

3) 두 매개변수의 타입이 달라도 타입 에러 발생하지 않음

> 1번에서 타입을 구체적으로 정의하지 않았기 때문이다.

함수 오버로드를 사용한 코드

// 935.ts// 1function add(x: number, y: number): number;
function add(x: string, y: string): string;
// 2
function add(x: number | string, y: number | string): number | string {
// ...
}
const v1: number = add(1, 2);// 3console.log(add(1, "2"));// 타입 에러 4

1) 모든 가능한 조합 정의

2) 실제 구현하는 쪽에서 정의한 타입은 함수 오버로드 타입 목록에서 제외

3) 두 매개변수의 타입이 숫자이면 반환타입도 숫자이므로 타입 에러 없음

4) 두 매개변수의 타입이 다르면 타입 에러가 발생

명명된 매개변수 사용하기

// 936.tsfunction getInfoText({
    // 1
    name,
    age = 15,
    language,
}: {
    // 2
    name: string;
    age?: number;
    language?: string;
}): string {
    const nameText = name.substr(0, 10);
    const ageText = age >= 35 ? "senior" : "junior";
    return `name: ${nameText}, age: ${ageText}, language: ${language}`;
}

1) 우선 매개변수의 이름 정의, 기본값 정의

2) 앞에 나열된 모든 매개변수 타입 정의

명명된 매개변수의 타입을 다른 코드에서도 재사용하려면 다음과 같이 인터페이스를 이용

인터페이스로 명명된 매개변수 타입 정의

// 937.ts// 1
interface Param {
    name: string;
    age?: number;
    language?: string;
}
// 2function getInfoText({ name, age = 15, language }: Param): string {
// ...
}

1) 명명된 매개변수의 타입을 인터페이스로 정의

2) Param 인터페이스 사용