[TypeScript] 함수와 리터럴, 유니온/교차 타입

 

 

함수

 

✅ 타입스크립트로 함수를 작성한 코드

function hello(name: string,age?: number ) : string{
    if(age !== undefined) return `Hello, ${name}. You are ${age}.`;
    else return `Hello, ${name}.`;
}

console.log(hello('gyeol',30)); // "Hello, gyeol. You are 30." 출력

 

🤔 만약 매개변수 age를 name보다 먼저 선언하고 싶다면?

function hello(age?: number, name: string) : string{
    if(age !== undefined) return `Hello, ${name}. You are ${age}.`;
    else return `Hello, ${name}.`;
}
// 위의 hello 함수는 에러가 발생함!
// 'A required parameter cannot follow an optional parameter'
// 필수 매개변수는 선택적 매개변수 뒤에 올 수 없다는 뜻임

✅ 이럴 땐 age를 number 혹은 undefined 를 받을 수 있게끔 처리하면된다!

function hello(age: number | undefined, name: string ) : string{
    if(age !== undefined) return `Hello, ${name}. You are ${age}.`;
    else return `Hello, ${name}.`;
}

 

✅ 나머지 매개변수의 타입

function add(...nums: number[]):number{
    return nums.reduce((result, num)=> result+num,0);
}

console.log(add(1,2,3,4,5,6,7)) // 28

 

 

명시적 this

 

✅ this 사용 시도 예시 (이렇게 사용하면 에러가 발생한다!)

interface User {
    name:string;
}

const user1:User = {
    name:'gyeol',
};

function hello(){
    console.log(this.name)
    // 'this' implicitly has type 'any' because it does not have a type annotation 에러 발생
    // 'this'는 유형 주석이 없기 때문에 암시적으로 'any' 유형을 가집니다.
}

 

✅ hello 라는 함수의 this 타입은 명시적으로 user 인터페이스를 가리키게 하여 타입을 명시적으로 선언해주어 해결할 수 있다.

interface User {
    name:string;
}

const user1:User = {
    name:'gyeol',
};

function hello(this:User){
    console.log(this.name)
}
// this의 타입을 명시적으로 선언할 수 있음

const a = hello.bind(user1);
a(); //  "gyeol" 출력

 

함수 오버로드

✅ 매개변수 age의 타입에 따라 return 타입이 바뀌는 함수를 작성해보자

interface User {
    name:string;
    age:number;
}

function join(name:string, age:number|string): User | string {
    if(typeof age === 'number'){
        return {
            name,
            age,
        };
    }else return '나이는 숫자로 입력해주세요.'
}

 

✅ 언뜻보면 문제 없는 코드로 보이지만 실제로 실행하면 에러가 발생한다.

const kim: User = join('Kim', 30);
const Lee: string= join('Lee', '30');
// Type 'string | User' is not assignable to type 'User'.
// Type 'string' is not assignable to type 'User'.

컴파일러 입장에서 join 함수는 User를 반환할지 string을 반환할지 모르기 때문에 에러가 발생하는 것

이럴 땐 함수 오버로딩을 통하여 해결할 수 있다.

 

✅ 함수 오버로딩을 적용한 코드

function join(name:string, age:string):string;
function join(name:string, age:number):User;
function join(name:string, age:number|string): User | string {
    if(typeof age === 'number'){
        return {
            name,
            age,
        };
    }else return '나이는 숫자로 입력해주세요.'
}

 

 

 

리터럴, 유니온/교차타입

 

Literal Types

✅ 문자열과 숫자의 경우 값 자체를 타입으로 선언할 수 있다.

 

✅ 숫자 리터럴 타입 예시

const num = 1;
// 이 경우 num의 타입은 number가 아닌 1이다.

 

✅ 문자열 리터럴 타입

: 문자열에 값을 정확하게 지정할 때 사용한다.

 

 

Union types

✅ 2개 이상의 타입을 허용하는 경우. Union이라고 한다.

✅ | (파이프)를 통해 타입을 구분하고 배열일 경우 괄호도 함께 사용한다.

 

✅ Union types 예시1

let union: string| number;
union = 'hello';
union = 123; 
union = true; // 에러

 

✅ Union types 예시2(에러가 발생한 코드)

interface Car {
    name:'car';
    color:string,
    start(): void;
}

interface Mobile {
    name: 'mobile';
    color: string;
    call() : void;
}

function getGift(gift: Car | Mobile) {
    console.log(gift.color);
    gift.start(); // 에러발생!
    // property 'start' does not exist on type 'Car | Mobile'.
    // Property 'start' does not exist on type 'Mobile'.
    // Car와 Mobile 둘다 color는 가지고 있기때문에 문제가 안되지만 
    // start()의 경우 Car에만 존재하기때문에 먼저 확인 필요
}

 

✅ 이 경우 이렇게 해결하면 된다!

function getGift(gift: Car | Mobile) {
    console.log(gift.color);
    if(gift.name === 'car') gift.start();
    else gift.call();
}

 

✅ 이렇게 동일한 속성의 타입을 다르게 해서 구분할 수 있는 것을 식별가능한 union type이라고 한다.

 

 

Intersection Types(교차타입)

✅ 여러 타입을 합쳐서 사용한다.

✅ union 은 A 또는 B 즉 OR를 뜻한다면, Intersection는 AND 를 의미한다.

 

✅ Intersection Types 예시

interface Car {
    name:string
    start(): void;
}

interface Toy {
    name: string
    color: string;
    price : number;
}

// 이렇게하면 모든 속성을 다 기입해줘야함 
const toyCar: Toy & Car = {
    name: 'toytoy',
    start(){},
    color: 'yellow',
    price: 1000,
};

 

 

 

---

Reference

https://www.youtube.com/watch?v=5oGAkQsGWkc&list=PLZKTXPmaJk8KhKQ_BILr1JKCJbR0EGlx0&index=2 

 

https://inpa.tistory.com/entry/TS-%F0%9F%93%98-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%83%80%EC%9E%85-%EC%84%A0%EC%96%B8-%EC%A2%85%EB%A5%98-%F0%9F%92%AF-%EC%B4%9D%EC%A0%95%EB%A6%AC#%ED%83%80%EC%9E%85_-_union

📘 타입스크립트 타입 선언 & 종류 💯 총정리