[TypeScript] 타입스크립트 기본 타입 (원시타입과 리터럴타입)

1. 기본타입이란?

 

기본타입이란 타입스크립트가 자체적으로 제공하는 타입으로 자바스크립트에서 기본적으로 제공하는 null, numver, string, undefined와 같은 타입도 존재하며, 타입스크립트에서 추가적으로 제공하는 타입인 any, void, unknown과 같이 타입스크립트에만 존재하는 타입들을 말한다.

 

위 사진과 같은 트리를 타입 트리라고 부르는데, 각각의 타입들은 트리구조로서 부모와 자식의 관계를 가진다.

 

 

2. 원시타입과 리터럴 타입

원시타입이란 영어로 Primitive Type으로 동시에 1개의 값만 저장할 수 있는 타입을 말한다.
예를 들어 원시타입이 아닌, 배열과 객체는 여러 값을 가질 수 있다.

numver, string, boolean, null, undefined와 같은 타입들은 1가지의 값만 저장할 수 있으며 이러한 타입을 원시타입이라고 부른다.

 

//number
let num1: number = 123;

 

num1변수를 선언하고 타입으로 number, 값으로 123을 넣어주었다.
여기에서 타입스크립트에서의 특이한 점인 : number와 같이 타입을 작성해 주는 문법을
타입주석 또는 Type annotation이라고 한다.
이 방식이 타입스크립트에서 타입을 정의하는 가장 기본적인 방식이다.

 

 

 

1. number

//number
let num1: number = 123;
let num2: number = -123;
let num3: number = 0.123;
let num4: number = -0.123;
let num5: number = Infinity;
let num6: number = -Infinity;
let num7: number = NaN;

 

number타입에는 정수, 소수 뿐아니라 무한대를 뜻하는 Infinity,-Infinity, 숫자가 아닌 not a number인 NaN도 포함된다.

 

number타입에는 당연히 문자열의 값을 넣어줄 수 없으며, num1.toUpperCase()와 같은 문자열에 사용가능한 메서드들은 당연하게 사용하지 못한다.

 

 

 

2. string

//string
let str1: string = 'hello';
let str2: string = 'hello';
let str3: string = `hello`;
let str4: string = `hello${num1}`;

string타입으로는 "", '', 으로 작성된 문자열 모두 문자열 타입에서 사용이 가능하다.

 

 

string 타입에서도 number와 마찬가지로 string이 아닌 값을 넣어줄 수 없으며, string메서드가 아닌, 다른 특정 타입에서만 사용가능한 메서드를 사용하게 되면 오류가 발생한다.

 

 

 

3. boolean, null, undefined

// boolean
let bool1: boolean = true;
let bool2: boolean = false;

// null
let null1: null = null;

//undefined
let unde1: undefined = undefined;

 

boolean타입은 true, false만 입력가능하고, null타입은 null, undefined타입은 undefined만 가능하다.

 

JavaSciprt에서는 number 변수에 처음에 값을 안 넣어놓고, 선언하기 위해 null값을 넣어놓는 경우가 존재한다.

 

하지만 TypeScript에서는 이처럼 number타입으로 지정한 변수에 null값을 넣지 못하게 된다.

null 값을 넣는 문제는 tsconfig.json에서 컴파일러 설정에서 해결할 수 있다.

 

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "outDir": "dist",
    "strict": true,
    "strictNullChecks": false, //null 체크
    "moduleDetection": "force",
    "skipLibCheck": true
  },
  "include": ["src"]
}

 

strictNullChecks옵션을 false로 지정하게 되면,

오류가 발생하지 않는 것을 확인할 수 있다.

 

strictNullChecks옵션은 이름에서도 알 수 있듯이, 엄격한 NULL 검사 옵션이다. true로 지정하게 되면 null타입이 아닌, string, number타입과 같은 타입에 null을 넣어준다면, 오류가 발생하게 되며 기본적으로 strict옵션과 같은 값으로 설정되어 있다.

 

strictNullChecks옵션에 false로 넣어두게 되면, null타입이 아닌 다른 타입의 변수에도 초깃값으로 null을 넣어둘 수 있게 된다. 개발 상황에 따라 false or true로 지정해 두고 사용하면 된다.

 

 

• strict옵션은 strictNullChecks옵션의 상위 옵션이다.
  • "strict": true으로 설정해 둔 경우 "strictNullChecks": true로 설정이 되고,
    "strict": false인 경우 "strictNullChecks": false로 설정이 된다. 명시적으로 strict옵션과 strictNullChecks옵션의 값을 다르게 설정할 수 있다.
  • 

 

• 지정해도 오류가 발생하는 경우!
  1. tsconfig.json파일을 ctrl+s로 저장
  2. ctrl+ shift + p로 명령 프롬포트에서 restart를 입력 후 TS 서버 다시 시작을 누르면 됨.

 

 

 

4. 리터럴 타입

//리터럴 타입
let numA: 10 = 10;
let strA: "hello"= "hello";
let boolA: true = true;

 

numA라는 변수의 타입을 값 자체를 입력하게 되면, 해당 값 빼고 다른 값을 넣어줄 수가 없다. 예를 들어 위 코드에서 numA를 10으로 타입을 지정하게 되면, 12의 값을 넣었을 때 오류가 발생하는 것을 볼 수 있다.

 

 

10으로 타입을 지정한 경우 10이라는 값만 허용하는 변수를 만든 것이다.
이렇게 값으로 만든 타입을 리터럴 타입으로 부른다. (리터럴 = 값)

 

string과 boolean도 마찬가지로 리터럴 타입으로 변수를 선언할 수 있다.

 

이처럼 TypeScript에는 원시타입 안에 포함되는 값 중 하나를 마치 타입인 것처럼 정의해서 사용할 수 있는 리터럴 타입도 존재한다.

 

 

 

 

 

 

- 이 포스팅은 '이정환 - 한 입 크기로 잘라먹는 타입스크립트 (인프런)' 강의를 참고하여 작성되었습니다.

한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런