TypeScript 배우기8

Parker.Park·2022년 8월 15일
0

TypeScript

목록 보기
8/8

타입스크립트 시작하기, Inflearn


Type inference

타입 추론이라고 하며 타입스크립트에서 확실한 타입을 지정하지 않았을 때 타입스크립트에서 제공하는 것이다. 예시를 보자.

let b1 = 123; // b1 : number

b1 = "a";
//error TS2322: 
//Type 'string' is not assignable to type 'number'.

let으로 선언한 b1 변수는 별도의 타입을 정의하지 않아도, 123 이라는 number값으로 타입 정보를 제공해주었다. 이러한 이유는 매번 타입을 제공하는 것은 생산성을 저하시키기 때문에 타입스크립트에서 다양한 방식으로 타입을 추론한다고 한다.
이번에는 const의 경우를 알아보자.

const c1 = 123; // c1 : 123

let c2: typeof c1 = 234;
//error TS2322:
//Type '234' is not assignable to type '123'.

const의 경우는 let과 달리 더 엄격하게 타입이 결정 된다고 한다. let의 경우는 재할당이 가능하기 때문에 융통성있게 타입이 결정된다고 한다. 예시를 보면 typeof 키워드로 c1의 타입을 가져와 c2를 정의 하였고, 234라는 number타입을 할당하였으나 에러가 발생하였다. const로 선언한 number이면서 123아니기 때문이다.

Array, Object - Type inference

배열과 객체에 대해서도 타입 추론이 제공된다고 한다. 예시를 보자.

const arr1 = [10, 20, 30]; // arr1: number[]

const obj1 = { name: "abcd", age: 2, region: "Incheon" };
/*
obj1: {
    name: string,
    age: number,
    region: string
}
*/

//비구조할당(Destructuring Assignment)하는 경우에도 타입이 따라간다. 
const [n1, n2, n3] = arr1;
const { name, age, region } = obj1;

//아래와 같은 경우는 모두 에러가 발생한다. 
arr1.push("a"); // Error
console.log(name === age); // Error

interface - Type inference

다수의 인터페이스의 경우를 알아보자. 인터페이스의 경우 할당 가능한 인터페이스를 정리하는 과정을 걷힌다고 한다. 그 다음 남는 최종 인터페이스 타입으로 묶는다고 한다.

interface Animal {
  name: string;
  age: number;
}
interface Dog extends Animal {
  kind?: string;
  liveInIncheon: boolean;
}
interface Cat extends Animal {
  kind?: string;
  liveInSeoul: boolean;
}

const p1: Animal = { name: "ddoddo", age: 10 };
const p2: Dog = { name: "bbobbo", age: 8, liveInIncheon: true, kind: "Shiba" };
const p3: Cat = { name: "bum", age: 7, liveInSeoul: false, kind: "Street" };

//p2, p3는 p1인 Animal에 할당 가능하기 때문에 arr1은 Animal type만 남게 된다고한다.
const arr1 = [p1, p2, p3]; //arr1: Animal[]

//p2, p3는 서로 할당 관계에 있지 않기 때문에 유니온 타입으로 남는다고 한다.
const arr2 = [p2, p3]; // arr2: (Dog|Cat)[]

function - Type inference

함수의 경우에 타입추론에 대해서 알아보자. 우선 예시를 보자. 지금까지 봐왔던 타입추론과 비슷한 양상이다.

function f1(a = 1, b = "five") {
  return `${a} : ${b}`;
}

let a1 = f1(3, "three"); // a1: string

console.log(f1("two", 2));
//error TS2345: 
//Argument of type 'string' is not assignable to parameter of type 'number'.

함수 f1과 같이 변수에 기본값을 정하는 경우 타입 추론으로 타입이 제공된다. 변수 a1을 보면 함수 f1의 리턴 타입 또한 별도 지정 없이 string인 것을 확인할 수 있다.

profile
개발자준비중

0개의 댓글