[타입스크립트 기본] 원시타입과 리터럴타입
해당 게시글은
강의 사이트, 인프런에서 이정환님이 진행하시는
'한 입 크기로 잘라먹는 타입스크립트' 를
들어보며 블로그를 작성하려고 합니다.
다음 게시글 내용은 해당 강의에 핸드북의 내용으로
출처는 다음과 같습니다.
https://ts.winterlood.com/7250edd7-a3fd-4662-b756-f11f927c73f2
타입스크립트를 소개합니다 - 타입스크립트 개론
한 입 크기로 잘라먹는 타입스크립트
ts.winterlood.com
원시타입
원시 타입(Primitive Type) 은
동시에 한 개의 값만 저장할 수 있는 타입들을 말합니다.
예를 들어 원시 타입이 아닌
배열이나 객체 같은 비 원시 타입들은 동시에 여러 개의 값들을 저장할 수 있는 반면,
number, strin, boolean 등의 원시 타입은 숫자면 숫자, 문자열이면 문자열
딱 하나의 값만 저장할 수 있습니다.
실습 환경 설정
이전 시간에 만들어 둔 section2 패키지를 VsCode 에서 열고,
src 폴더 아래에 새로운 파일 chapter1.ts 를 생성합니다.
이번 시간에 작성하는 모든 코드는 이 파일에 작성합니다.
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, NaN 등의 특수한 숫자들도 포함합니다.
참고로 이때, 변수의 이름 뒤에
콜론(:) 과 함께 변수의 타입을 정의하는 이런 문법을
'타입 주석' 또는 '타입 어노테이션'
이라고 부릅니다.
num1 = 'hello'; // ❌
num1.toUpperCase(); // ❌이때 number 타입으로 정의한 변수에는 number 타입을 제외한 값을 할당할 수 없으며,
number 타입의 값이 사용할 수 없는 toUpperCase 등의 메서드는 사용할 수 없습니다.
string 타입
// string
let str1: string = "hello";
let str2: string = 'hello';
let str3: string = `hello`;
let str4: string = `hello ${str1}`;string 타입은 문자열을 의미하는 타입입니다.
단순 쌍따옴표 문자열 뿐만 아니라
작은 따옴표, 백틱, 템플릿 리터럴로 만든 모든 문자열을 포함합니다.
boolean 타입
// boolean
let bool1 : boolean = true;
let bool2 : boolean = false;boolean 타입은 참과 거짓만을 저장하는 타입입니다.
true 또는 false 만 이 타입에 해당합니다.
null 타입
// null
let null1: null = null;null 타입은 오직 null 값만 포함하는 타입입니다.
undefined 타입
// undefined 타입
let unde1: undefined = undefined;undefined 타입 역시 null 타입과 마찬가지로
오직 하나의 값, undefined 만 포함하는 타입입니다.
null 값을 다른 타입의 변수에 할당하기
자바스크립트에서는 다음과 같이
아직 값이 정해지지 않은 상태에서는 변수에 null 을 임시로 넣어두곤 했습니다.
let numA = null;그러나 만약 타입스크립트에서는 이 numA 가 만약 number 타입의 변수일 경우,
다음과 같이 오류가 발생합니다.
let numA: number = null; // ❌null 은 number 타입에 포함되는 값이 아니기 때문에 오류가 발생하는 것입니다.
그러나 앞서 이야기했듯
null 값을 변수의 임시값으로 활용하고 싶은 상황이 충분히 있을 수 있습니다.
이럴 때에는 다음과 같이 tsconfig.json 의 "strictNullChecks"(엄격한 null 검사) 옵션을 false 로 설정하면 됩니다.
tsconfig.json
{
"compilerOptions": {
...
"strictNullChecks": false,
...
},
"ts-node": {
"esm": true
},
"include": ["src"]
}strictNullChecks 옵션은 타입스크립트에서 null 값을 null 타입 이외의 타입의 변수에 할당하는 것을 금지할지 허락할지 여부를 결정하는 옵션입니다. 기본값은 true 이며 이 옵션이 true 로 켜져있을 경우, 엄격하게 null 값을 검사해 null 타입이 아닌 변수에는 null 값을 할당할 수 없도록 제한합니다. 그치만 위 코드처럼 false 로 설정해 이 옵션을 끌 경우 어떤 타입의 변수든 null 값을 자유롭게 할당할 수 있습니다.
또 이 옵션은 이름에서 알 수 있듯 strict 옵션의 하위 옵션입니다. 따라서 strict 옵션이 true 면 자동으로 true 로 설정되며, 반대로 strict 옵션이 false면 자동으로 false 로 설정됩니다. 만약 위 코드처럼 직접 설정하면 설정된 옵션에 따릅니다.
이 옵션은 안전한 타입스크립트 코드를 작성하는 측면에서는 그닥 큰 도움이 되지는 않으니
지금은 true 로 설정하거나
이미 tsconfig.json 의 strict 옵션에서 true 로 설정되어 있기 때문에 아예 옵션 설정을 지우겠습니다.
tsconfig.json
{
"compilerOptions": {
...
"strictNullChecks": true, // 또는 삭제하세요
...
},
"ts-node": {
"esm": true
},
"include": ["src"]
}리터럴 타입
타입스크립트에는 string, number 처럼
범용적으로 많은 값을 포함하는 타입 뿐만 아니라
딱 하나의 값만 포함하는 타입도 존재합니다.
따라서 다음과 같이 변수의 타입을 숫자 10으로 설정하는 것 또한 가능합니다.
let numA: 10 = 10;변수 numA 의 타입을 숫자 10으로 설정했습니다.
이렇게 설정하면,
이제 numA 에는 10 이외의 값을 저장할 수 없게 됩니다.
이렇듯 하나의 값만 포함하도록 값 자체로 만들어진 타입을 타입스크립트에서는
'리터럴 타입' 이라고 부릅니다.
참고로 여기서 리터럴은 우리말로 '값' 이라는 뜻입니다.
숫자 값 뿐만 아니라 문자열이나 불리언 타입의 값도 모두 리터럴 타입으로 만들 수 있습니다.
let strA: "hello" = "hello";
let boolA: true = true;
let boolB: false = false;