[TS] (2) 기초 : 타입 선언과 타입 추론

김영인·2021년 10월 12일
0

타입 선언과 타입 추론(inference)

1) 타입 추론 없이 타입 선언하기 : 얼마나 코드가 길어질지...


a) 변수에 타입 선언 : '변수명: 타입'(타입 추론은 적용하지 않았습니다)
  • 변수 선언만 할 때도 미리 변수에 들어갈 타입을 선언할 수 있다.
  • 객체: 아래처럼 세미콜론으로 프로퍼티를 나눠 선언한다.
// let 키워드
let a: number; // 선언만
let b: string = "Hello";
a = 12 // Good
a = "Bye" // Error : 'string' 형식은 'number' 형식에 할당할 수 없습니다.
b = "Bye" // Good
b = 12 // Error : 'number' 형식은 'string' 형식에 할당할 수 없습니다.
//
// const 키워드
const c: string = "Hi";
const arr1: number[] = [12, 35];
const arr2: [number,boolean] = [12, true]; // tuple 타입이다.(길이 고정, 인덱스마다 타입 다름)
const arr3: (number | boolean)[] = [12, true]; // union 타입이다. (몇 개의 타입 허용)
//
// 객체 타입 선언
const obj1: {
    key1: boolean;
    key2: string;
    key3: number;
} = {
    key1: true,
    key2: "Hi",
    key3: 123,
};

b) 함수에 타입 선언(타입 추론은 적용하지 않았습니다)

  • 매개변수의 타입 선언 : 변수에서와 동일.
  • ( 중요 ) return 값의 타입 선언(다양함) : 괄호("()") 옆 타입 작성
// 함수 선언식
function fun1(a: number, b: number): string {
    const sum: number = a + b;
    return sum.toString(); // function fun1(a: number, b: number): string 
}
// 함수 표현식(익명 함수)
const fun2 = (a: number, b: number): string => {
    const sum: number = a + b;
    return sum.toString(); // const fun2 = (a: number, b: number): string
};
// 콜백 함수의 타입
const fun3 = (
    a: number,
    b: number,
    c: (d: number, e: number) => string
): string => {
    return c(a, b);
};
console.log(fun3(1, 3, fun2)); // 4

2) 타입 추론(Type Inference)을 활용하여 타입 선언하기

타입 추론이란? : 타입을 선언하지 않더라도, 코드 문맥상 추론 가능한 가장 흔한 타입(best common type)으로 선언되는 것.
Documentation - Type Inference - TypeScript

자세한 내용은 위 링크에 있으며, 지금까지 내가 경험해본 것들만 정리를 하자면 다음과 같다.

0) 선언만 할 때(let 키워드)에는 타입 선언이 필요하다(추론 불가). 그렇지 않으면 'any' 타입으로 지정되므로 타입스크립트을 사용하는 의미가 없어진다. 정말 필요한 경우에만 'any' 타입을 사용할 것이다

1) 변수(+객체의 프로퍼티, 함수의 매개변수)를 선언함과 동시에 '원시 타입'의 값을 할당할 때는 타입 추론이 명확히 되기 때문에 타입 선언이 필요 없다. (여기서 원시 타입은 자바스크립트의 원시 타입)

2) 객체 타입(객체, 배열, 함수 등)에서 복합적인 타입 선언이 필요할 경우 경우에 따라서 타입 추론이 아니라 명확한 타입 선언을 해줘야 한다.

3) 함수의 return 타입은 함수 선언 시에 명확하게 return 값의 타입을 알 수 있다면 타입 추론이 가능하다.


이를 잘 활용하면 불필요한 타입 선언을 안 하게 되어 코드 길이가 줄어든다!!

코드 보기 전 꿀팁 : vscode에서 해당 변수 혹은 함수에 hover해보면 추론이 어떻게 되었는지 확인하기 쉽다!

타입 추론 없이 확인해봤던 위 코드들을 축약해보자

// 타입 추론을 활용하여 타입 선언하기

// 변수에 타입 선언

let a: number; // 타입 추론이 불가하므로 타입 선언 필요
// let a; // 선언만 할 때 아무 타입도 지정하지 않으면 "any" 타입으로 선언됩니다.(권장 안함)
let b = "Hello"; // 할당(초기화)된 값의 타입으로 타입 추론(string)
a = 12; // Good
// a = "Bye"; // Error : 'string' 형식은 'number' 형식에 할당할 수 없습니다.
b = "Bye"; // Good
// b = 12; // Error : 'number' 형식은 'string' 형식에 할당할 수 없습니다.

const c = "Hi"; // 할당(초기화)된 값의 타입으로 타입 추론(string)
const arr1 = [12, 35]; // 숫자 타입으로만 이루어진 배열로 타입 추론

// 목적에 따라 타입을 선언해줘야 하는 경우
const arr2: [number, boolean] = [12, true]; // 타입 선언 필요 : 선언하지 않으면  (number | boolean)[] 유니온 타입으로 추론됨
const arr3 = [12, true]; // 타입 선언 불필요 : 원하는 타입으로 추론

const obj1 = {
    key1: true,
    key2: "Hi",
    key3: 123,
}; // 각각 프로퍼티의 값의 타입으로 타입 추론

// 함수 선언할 때 타입 선언

function fun1(a: number, b: number) {
    // return 타입 선언 불필요 : return 타입이 코드 문맥상 확실히 string
    const sum = a + b; // 타입 선언 불필요 : 타입이 코드 문맥상 확실히 number
    return sum.toString();
}

const fun2 = (a: number, b: number) => {
    // return 타입 선언 불필요 : return 타입이 코드 문맥상 확실히 string
    const sum = a + b; // 타입 선언 불필요 : 타입이 코드 문맥상 확실히 number
    return sum.toString();
};

const fun3 = (a: number, b: number, c: (d: number, e: number) => string) => {
    // return 타입 선언 불필요 : return 타입이 코드 문맥상 확실히 string
    return c(a, b);
};
console.log(fun3(1, 3, fun2));

깃허브로 확인하기

두 코드의 차이는 깃허브에 올려놓았으니 확인해보세요!
Github: 타입 선언과 타입 추론

profile
꾸준히, 그리고 정직하게 성장하는 프론트엔드 개발자

0개의 댓글