TypeScript 기본

강의(winterlood 이정환님의 인프런강의 ‘한 입 크기로 잘라먹는 타입스크립트’) 를 보고 정리한 블로그입니다.

타입스크립트의 원시 타입 (Primitive Types)

타입스크립트(TypeScript)에서 "원시 타입"은 동시에 하나의 값만 저장할 수 있는 기본적인 타입들을 말합니다. 예를 들어, 배열이나 객체 같은 비 원시 타입들은 여러 개의 값을 동시에 저장할 수 있는 반면, 원시 타입은 한 번에 하나의 값만을 저장합니다. 원시 타입은 프로그래밍 언어의 가장 기본적인 데이터 구조로, 자바스크립트와 타입스크립트 모두에서 중요한 역할을 합니다.

타입스크립트의 원시 타입에는 다음과 같은 것들이 있습니다

• number (숫자)
• string (문자열)
• boolean (불리언)
• null
• undefined
• 리터럴 타입

이제 각 원시 타입에 대해 좀 더 자세히 알아보겠습니다.

1. 숫자 타입 (number)

숫자 타입은 정수, 소수, 그리고 특수 숫자 값(Infinity, NaN) 등을 모두 포함합니다. 자바스크립트에서는 모든 숫자가 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 타입으로 정의되어 있으며, 숫자 이외의 값을 할당하려고 하면 타입스크립트 컴파일러는 오류를 발생시킵니다.

num1 = 'hello'; // ❌ 오류 발생: 'number' 타입에 문자열을 할당할 수 없습니다.
num1.toUpperCase(); // ❌ 오류 발생: 'number' 타입에는 'toUpperCase' 메서드가 존재하지 않습니다.

타입 어노테이션 (Type Annotation)

변수 뒤에 콜론(:)과 함께 타입을 명시하는 것을 타입 주석 또는 타입 어노테이션이라고 합니다. 이를 통해 타입을 명시적으로 지정할 수 있습니다.

2. 문자열 타입 (string)

string 타입은 문자열을 나타내며, 모든 문자열 값을 포함합니다. 단일 인용부호('), 이중 인용부호("), 또는 백틱(```)을 사용할 수 있습니다.

// 문자열 타입
let str1: string = "hello";
let str2: string = 'hello';
let str3: string = `hello`;
let str4: string = `hello ${str1}`;

백틱(```)을 사용하면 템플릿 리터럴을 사용할 수 있어 문자열 내에서 변수 값을 쉽게 삽입할 수 있습니다.

3. 불리언 타입 (boolean)

boolean 타입은 참(true)과 거짓(false)이라는 두 가지 값만 가질 수 있습니다.

// 불리언 타입
let bool1: boolean = true;
let bool2: boolean = false;

불리언 타입은 논리적인 상태를 표현하는 데 사용됩니다. 예를 들어, 조건문에서 특정 조건이 참인지 거짓인지 판단할 때 사용합니다.

4. null 타입

null 타입은 오직 null 값만 가질 수 있는 타입입니다. null은 변수에 값이 없다는 것을 명시적으로 표현하는데 사용됩니다.

// null 타입
let null1: null = null;

5. undefined 타입

undefined 타입 역시 하나의 값(undefined)만을 가질 수 있는 타입입니다. 변수에 값이 아직 정의되지 않았음을 나타낼 때 사용됩니다.

// undefined 타입
let unde1: undefined = undefined;

null과 undefined 값의 사용

자바스크립트에서는 값이 정해지지 않았을 때 변수를 null로 초기화하는 경우가 많습니다. 그러나 타입스크립트에서 특정 타입이 명시된 변수에 null 값을 할당하려고 하면 오류가 발생합니다.

let numA: number = null;  // ❌ 오류 발생: 'null'은 'number' 타입에 할당될 수 없습니다.

이 문제를 해결하려면, strictNullChecks 옵션을 조정할 수 있습니다.

• strictNullChecks: 기본적으로 true로 설정되어 있으며, null과 undefined가 올바르게 관리되도록 합니다. 이를 false로 설정하면 모든 타입에 null 값을 할당할 수 있습니다.

{
  "compilerOptions": {
    "strictNullChecks": true // 또는 삭제하세요
  },
  "include": ["src"]
}

엄격한 타입 안정성을 위해서 기본 설정인 true로 설정해 두는 것이 좋습니다.

6. 리터럴 타입 (Literal Type)

리터럴 타입은 특정 값만을 타입으로 가지는 것을 의미합니다. 즉, 변수의 타입을 숫자나 문자열의 특정 값으로 제한할 수 있습니다.

// 숫자 리터럴 타입
let numA: 10 = 10;

// 문자열 리터럴 타입
let strA: "hello" = "hello";

// 불리언 리터럴 타입
let boolA: true = true;
let boolB: false = false;

리터럴 타입은 주로 상수처럼 사용할 때 유용하며, 타입을 고정시켜 특정 값만을 허용하도록 할 수 있습니다. 이를 통해 타입 안정성을 높일 수 있습니다.

실습 환경 설정

타입스크립트를 배우기 위해 실습 환경을 설정하는 방법을 안내합니다.

1. 프로젝트 생성: 이전에 만든 section2 프로젝트를 Visual Studio Code에서 엽니다.
2. 새 파일 생성: src 폴더 아래에 chapter1.ts 파일을 생성합니다. 이 파일에 모든 코드를 작성합니다.
3. export 필요성: tsconfig.json에서 isolateModules 옵션이 true로 설정되어 있는 경우, 모듈 시스템을 유지하기 위해 최소 하나 이상의 export 키워드가 필요합니다.

// 예시 코드: chapter1.ts
export let example: number = 42;

결론

타입스크립트의 원시 타입은 타입 안전성을 높이고 코드의 명확성을 향상시키는 데 큰 도움이 됩니다. 이들은 자바스크립트에서 기본적으로 사용되는 타입이지만, 타입스크립트를 사용하면 타입 오류를 컴파일 단계에서 미리 확인할 수 있기 때문에 코드의 품질을 높이고 유지보수를 용이하게 할 수 있습니다. 이를 통해 타입스크립트가 대형 프로젝트에서 많이 사용되는 이유를 이해할 수 있습니다.

리터럴 타입과 strictNullChecks와 같은 설정을 활용하면 더욱 안정적이고 명확한 코드를 작성할 수 있습니다. 이러한 특징을 잘 활용해 타입스크립트를 효과적으로 사용해 보세요.