타입스크립트 기초 2

 

유니언 타입

 

// 숫자나 문자열 중 하나를 사용해도 괜찮다는 것을 알림
function combine(input1: number | string, input2: number | string) {
    let result;
    if (typeof input1 === 'number' && typeof input2 === 'number') {
        result = input1 + input2;
    } else {
        result = input1.toString() + input2.toString();
    }
    return result;
}

const combinedAges = combine(30, 26);

const combinedNames = combine('Kim', 'Park');

 

서로 다른 두 종류의 값을 사용해야 하는 함수나 상수 혹은 변수의 매개변수를 사용해야 한다면 유니언 타입을 사용할 수 있습니다.

아닌 경우도 있지만 유니언 타입을 사용할 경우 위와 같이 타입 분류가 필요한 경우가 많습니다.

 

 

리터럴 타입

 

리터럴 타입은 단순한 특정 변수나 매개변수가 아닙니다.

숫자나 문자열도 아니며 정확한 값을 가지는 타입입니다.

 

 

위와 같이 숫자를 할당했지만 상수로 지정하였기에 타입을 추론하지 않고 26이라고만 뜨는 걸 볼 수 있습니다.

 

function combine(
    input1: number | string,
    input2: number | string,
    resultConversion: 'as-number' | 'as-text'
) {
    let result;
    if (typeof input1 === 'number' && typeof input2 === 'number' || resultConversion === 'as-number') {
        result = +input1 + +input2;
    } else {
        result = input1.toString() + input2.toString();
    }
    return result;
}

const combinedAges = combine(30, 26, 'as-number');

const combinedStringAges = combine('30', '26', 'as-number'); // 이 숫자로 이루어진 문자열도 덧셈 연산을 할 수 있음

const combinedNames = combine('Kim', 'Park', 'as-text');

 

 

타입 얼리어스(별칭)

 

type Combinable = number | string
type ConversionDescriptor = 'as-number' | 'as-text'

function combine(
    input1: Combinable,
    input2: Combinable,
    resultConversion: ConversionDescriptor
) {
    let result;
    if (typeof input1 === 'number' && typeof input2 === 'number' || resultConversion === 'as-number') {
        result = +input1 + +input2;
    } else {
        result = input1.toString() + input2.toString();
    }
    return result;
}

 

위와 같이 타입을 미리 설정해 어디에서든 재사용할 수 있습니다.

 

function greet(user: { name: string, age: number}) {
    console.log('Hi, I am' + user.name)
}

 

또한 객체 타입도 타입 알리어스가 가능한데 위의 예시를 이용하여

 

type User = { name: string, age: number };

function greet(user: User) {
    console.log('Hi, I am' + user.name)
}

 

다음과 같이 해결할 수 있습니다.

 

 

함수 반환 타입

 

함수가 반환하는 타입도 명시적으로 설정할 수 있으며 이 역시 타입스크립트가 추론할 수 있게 하는 것이 좋습니다.

 

//                                   여기
function add(n1: number, n2: number): number {
    return n1 + n2;
}

 

 

또 반환하는 것이 없는 경우인 void 타입도 추가된 것을 확인할 수 있습니다

 

function printResult(num: number): undefined {
    console.log('Result: ' + num);
    return;
}

 

비슷하지만 다른 undefined 반환 타입은 실제 값을 반환하지 않을 때 사용할 수 있습니다.

하지만 아무 값도 반환하고 싶지 않은 경우 그를 강요하지 않는 것이 void이기에 void를 사용하는 게 더 좋습니다.

 

 

타입의 기능을 하는 함수

 

function add(n1: number, n2: number): number {
    return n1 + n2;
}

function printResult(num: number): undefined {
    console.log('Result: ' + num);
    return;
}

let combineValues: Function;

combineValues = add;
combineValues = 5; // 에러
combineValues = printResult; // 에러 처리 못함 함수이기 때문

console.log(combineValues(8, 8));

 

: Function으로 타입을 지정하여 앞으로 함수만 들어오게 할 수 있습니다.

하지만 인자를 두 개로 받는 combineValues임에도 불구하고 printResult 함수를 넣어도 에러 처리를 하지 못합니다.

그래서 더 디테일한 설정이 필요해집니다.

 

function add(n1: number, n2: number): number {
    return n1 + n2;
}

function printResult(num: number): undefined {
    console.log('Result: ' + num);
    return;
}

// 두 개의 숫자 인자를 받으며 숫자를 반환함
let combineValues: (a: number, b: number) => number;

combineValues = add;
combineValues = printResult; // 에러

console.log(combineValues(8,8));

 

이렇게 인자의 수와 타입 그리고 반환 타입도 설정해 들어올 수 있는 함수를 제어할 수 있게 됩니다.

 

 

함수 콜백

 

function addAndHandle(n1: number, n2: number, cb: (num: number) => void) {
    const result = n1 + n2;
    cb(result);
}

addAndHandle(10, 20, (result) => {
  console.log(result); // 30
});

 

이렇게 매개변수에 콜백 함수를 받을 수 도 있습니다.

 

 

unknown 타입

 

let userInput: unknown;
let userName: string;

userInput = 5;
userInput = 'Kim';
userName = userInput; // 에러

 

unknown 타입은 어느 값이든  저장할 수 있습니다.

하지만 unknown은 항상 그 할당한 라인에만 국한되기에 다른 타입에 할당할 수 없습니다.

이것이 any와 다른 점입니다.

 

 

never 타입

 

function generateError(message: string, code: number): never {
    throw {message: message, errorCode: code };
}

generateError('Am error occurred!', 500)

 

 

never 타입을 할당하여 이 함수는 never를 반환하며 반환 값을 생성하지 않게 할 수 있습니다.