Types

오호·2022년 1월 21일
0
post-thumbnail
post-custom-banner

지난 챕터에서는 타입스크립트의 필요성에 대해 알아보았고 이번 챕터부터는 실제 타입에 알아보자.

1. any

any는 말 뜻 그대로 'anything'이라는 의미처럼 해석될 수 있다. 뭐든지 할 수 있지만 꼭 필요한 상황이 아니라면 사용하지 않는 것이 좋다. 모든 타입을 다 할다할 수 있다.

any는 최후의 보루로 가급적 사용하지 말자.

any를 여기저기에 사용하기 시작한다면 굳이 TypeScript를 사용할 필요 없이 JavaScript로 작성하는게 더 효율적이라는 생각이든다.

거의 없겠지만 any가 필요하다면 사용할 수도 있다.

let a : any = 666;
let b : any = ['danger'];
let c = a + b; // any

숫자와 배열을 더하는 이상한 짓을 해서 세번째 줄에서 에러가 발생할 것 같지만 any를 할당했기 때문에 에러가 발생하지 않는다.

2. unknown

우리는 앞에서 any라는 타입을 살펴보았다. unknown도 any처럼 모든 값을 대표하지만 묘한 준법정신(❓)을 가지고 있다.

그래서 혹 타입을 미리 알 수 없는 값이 있을 때는 any 대신에 unknown을 사용하자. unknown의 특징에 대해 알아보자.

  1. 타입스크립트는 어떤 것의 타입을 unknown이라고 추론하는 상황은 없다. 개발자가 명시적으로 설정하지 않는 이상.
  2. unknown 값이 특정 타입이라고 가정하고 해당 타입에서 지원하는 동작을 수행할 수는 없다.
let value : unknown = { a : 1 };
value.a; // 컴파일 에러

3. boolean

불리언 타입은 true, false 두 개의 값을 갖는다. 예제를 살펴보자.

let a = true; // boolean
var b = false; // boolean
const c = true; // true
let d : boolean = true; // boolean
let e : true = true; // true

어떤 값이 boolean인지 타입스크립트에 알려줄 수 있는 여러 방법이다.

a,b : 어떤 값이 boolean인지 타입스크립트가 추론하게 한다.
c : 어떤 특정 boolean인지 타입스크립트가 추론하게 한다.
d : 값이 boolean임을 명시적으로 타입스크립트에 알린다.
e : 값이 특정 boolean임을 명시적으로 타입스크립트에 알린다.

네 번째 방식을 주로 사용할 거 같지만 실제 프로그래밍에서는 첫 번째, 두 번째 방식을 많이 사용한다고 한다.(오피셜인지는 모르겠지만)

여기서 특이 사항은 세 번째 줄이다.

boolean으로 예측할 것 같았지만 const 키워드를 사용해서 타입스크립트는 이 변수가 더 이상 변하지 않을 것을 예측하고 가장 좁은 범위인 true로 추론한다는 점이다

4. number

number 타입은 모든 숫자(정수, 소수, 양수, 음수, Infinity, NaN 등)의 집합이다.

let a = 1234; // number
var b = Infinity * 0.10 // number
const c = 5678; // 5678
let d = a < b; // boolean
let e : number = 100; // number
let f : 26.218 = 26.218; // 26.218
let g : 26.218 = 10;  // 에러 '10' 타입을 '26.218' 타입에 할당할 수 없다

a,b : 타입스크립트가 값이 number임을 추론하게 한다.
c : const를 이용해 타입스크립트가 값이 특정 number임을 추론하게 한다.
e : 값이 number임을 명시적으로 타입스크립트에 알린다.
f,g : 타입스크립트에 값이 특정 number임을 명시적으로 알린다.

5. bigint

bigint는 자바스크립트와 타입스크립트에 새로 추가된 문법이다. number는 253까지의 정수를 표현할 수 있지만 bigint를 이용하면 이보다 큰 수도 표현할 수 있다.

let a = 1234n; // bigint
const b = 5678n; // 5678n
let e = 88.5n; // 에러 반드시 정수여야 한다.

6. string

string은 모든 문자열의 집합으로 연결(+), 슬라이스(slice)등의 연산을 수행할 수 있다.

let a = 'hello'; // string
let b = 'billy'; // string
const c = '!'; // '!'
let d = a + ' ' + b + c; // string
let e : string = 'zoom'; // string
let f : 'john' = 'john'; // 'john'

7. 객체

타입스크립트의 객체 타입은 객체의 형태를 정의한다.
다른 타입들과 마찬가지로 타입스크립트에서 객체를 서술하는 데 타입을 이용하는 방식은 여러가지다.

첫 번째 방법)

let a : object = {
  b : 'x'
}

a.b // 에러 'b' 프로퍼티는 'object'에 존재하지 않음

뭐지? 프로퍼티에 접근할 수 없다고 한다.

object는 서술하는 값에 관한 정보를 거의 알려주지 않고, 값 자체가 자바스크립트 객체라고(null이 아니라고) 말해줄 뿐이다

두 번째 방법)

let a = {
  b: 'x',
};
console.log(a.b);

두 번째 방법은 객체리터럴 문법으로 추론하게 하는 방법이다.

let a: { b: number };
a = {}; // 에러 '{}' 타입에는 {b : number} 에 필요한 b 프로퍼티가 없다.

a = {
  b: 1,
  c: 2, // 객체 리터럴은 알려진 프로퍼티만 지정할 수 있는데 'c'는 존재하지 않음
};

기본적으로 타입스크립트는 객체 프로퍼티에 엄격한 편이다. 예를 들어 객체에 number 타입의 b라는 프로퍼티가 있어야 한다고 정의하면 오직 b만을 기대한다. 다른 추가 프로퍼티가 있으면 에러를 발생시킨다.

그럼 예정에 없던 프로퍼티가 추가될 때는 어떻게 할까?

let a : {
  b : number;
  c?: string;
}
// a는 number 타입의 프로퍼티 b를 포함한다
// a는 string 타입의 프로퍼티 c를 포함할 수도 있다

객체 타입을 정의할 때 선택형 이외에도 readonly 한정자를 이용해 특정 필드를 읽기전용으로 바꿀 수 있다.

let user : {
  readonly firstName: string;
}

user.firstName = 'leo messi'; // 에러 'firstName' 읽기 전용 프로퍼티이므로 할당할 수 없다

결론적으로 object 타입을 사용하기 보다는 type이나 interface로 미리 선언한 구체적인 타입을 지정해주는 것이 좋다고 본다

8. type alias

기본적인 number, string, object 이런 타입이외에도 개발자가 직접 변수처럼 타입을 지정해서 타입을 새로 만들 수 있는 기능이 있는데 이를 type alias라고 한다.

type Age = number;
type Person = {
  name : string;
  age : Age;
}

let age : Age = 55;
let driver: Person = {
  name : 'leo messi',
  age : age
}

타입스크립트는 별칭을 추론하지는 않기 때문에 반드시 명시적으로 정의해야 한다. 이런 타입 alias 기능은 타입스크립트에서 매우 많이 사용되는 기능이다.

타입 앨리어싱은 복잡한 타입은 DRY(Dont' Repeat Yourself)하지 않도록 해주고 변수가 어떤 목적으로 사용되었는지 쉽게 이해할 수 있도록 도와준다

타입에 관한 내용이 많아 다음 챕터에서 이어서 보도록하자!

[참고자료]

  • 타입스크립트 프로그래밍 (보리스 체르니 저)
profile
오호
post-custom-banner

0개의 댓글