icon안동민 개발노트

기본 타입 (number, string, boolean, array)

 타입스크립트는 자바스크립트의 기본 타입들을 그대로 사용하면서 정적 타입 검사를 추가합니다.

 이를 통해 코드의 안정성과 가독성을 크게 향상시킬 수 있습니다.

Number, String, Boolean 타입

 1. Number 타입

let count: number = 5;
let pi: number = 3.14;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

 2. String 타입

let firstName: string = "John";
let lastName: string = 'Doe';
let fullName: string = `${firstName} ${lastName}`;

 3. Boolean 타입

let isActive: boolean = true;
let isCompleted: boolean = false;

 타입스크립트에서 이들 기본 타입을 사용할 때의 이점

  • 타입 관련 오류를 컴파일 시점에 잡아낼 수 있음
  • 코드 자동 완성과 IntelliSense 지원 향상
  • 코드의 의도를 명확히 표현할 수 있음

배열 타입

 배열 타입 선언의 두 가지 방법

  1. Type[] 문법
let numbers: number[] = [1, 2, 3, 4, 5];
let names: string[] = ["Alice", "Bob", "Charlie"];
  1. Array<Type> 문법
let scores: Array<number> = [80, 90, 100];
let fruits: Array<string> = ["Apple", "Banana", "Cherry"];

 두 방법의 차이

  • Type[]는 더 간결하고 일반적으로 선호됨
  • Array<Type>는 제네릭 타입과 일관성 있게 사용할 때 유용

튜플 타입

 튜플은 고정된 수의 요소와 각 요소의 타입이 지정된 배열입니다.

let person: [string, number] = ["John", 30];
console.log(person[0]); // "John"
console.log(person[1]); // 30

 튜플과 일반 배열의 차이

  • 튜플은 요소의 수와 각 요소의 타입이 고정되어 있음
  • 일반 배열은 동일한 타입의 요소를 가변적인 수만큼 포함할 수 있음

리터럴 타입

 리터럴 타입은 더 구체적인 값을 타입으로 지정할 수 있게 해줍니다.

let status: "active" | "inactive" | "suspended" = "active";
let diceRoll: 1 | 2 | 3 | 4 | 5 | 6 = 4;

 리터럴 타입의 장점

  • 값의 범위를 제한하여 타입 안정성 향상
  • 코드의 의도를 더 명확히 표현할 수 있음

타입 추론

 타입스크립트는 초기값을 바탕으로 변수의 타입을 추론할 수 있습니다.

let inferredNumber = 42; // number로 추론됨
let inferredString = "Hello"; // string으로 추론됨
let inferredBoolean = true; // boolean으로 추론됨

 타입 추론 vs 명시적 타입 선언

  • 타입 추론 : 코드가 간결해지고, 리팩토링이 용이함
  • 명시적 타입 선언 : 코드의 의도를 명확히 표현할 수 있고, 복잡한 타입에 유용함

strictNullChecks 옵션

 strictNullChecks 컴파일러 옵션은 null과 undefined를 모든 타입에 할당할 수 없게 만듭니다.

// strictNullChecks가 활성화된 경우
let name: string = null; // 에러
let age: number = undefined; // 에러
 
// null이나 undefined를 허용하려면 유니온 타입 사용
let nullableName: string | null = null; // 정상

 이 옵션의 영향

  • null과 undefined 관련 오류를 더 엄격하게 잡아낼 수 있음
  • 더 안전한 코드 작성을 유도함

템플릿 리터럴 타입

 템플릿 리터럴 타입을 사용하면 문자열 리터럴 타입을 조합할 수 있습니다.

type Color = "red" | "blue" | "green";
type Quantity = "one" | "two" | "three";
type ColoredQuantity = `${Color}-${Quantity}`;
 
let value: ColoredQuantity = "red-one"; // 정상
let invalidValue: ColoredQuantity = "yellow-four"; // 에러

 이를 활용한 고급 문자열 조작

  • API 엔드포인트 생성
  • CSS 클래스 이름 조합
  • 복잡한 문자열 패턴 정의

기본 타입 사용의 Best Practices

  1. 가능한 한 구체적인 타입 사용하기
// 좋음
let age: number = 30;
// 피하기
let age: any = 30;
  1. 유니온 타입을 활용하여 유연성 확보
let id: string | number = "abc123";
id = 123; // 정상
  1. 타입 별칭 사용하여 재사용성 높이기
type ID = string | number;
let userId: ID = "user123";
let productId: ID = 456;
  1. null과 undefined 처리에 주의하기
function getName(name: string | null): string {
   return name ?? "Anonymous";
}
  1. 배열과 튜플의 적절한 사용
// 배열: 동일한 타입의 여러 요소
let scores: number[] = [80, 90, 100];
// 튜플: 고정된 요소 수와 타입
let person: [string, number] = ["John", 30];

 타입스크립트의 기본 타입 시스템은 자바스크립트 개발자에게 친숙하면서도 강력한 타입 안정성을 제공합니다. Number, String, Boolean 타입은 자바스크립트의 기본 타입과 동일하지만, 타입스크립트에서는 컴파일 시점에 타입 검사를 수행하여 많은 오류를 사전에 방지할 수 있습니다.

 배열 타입 선언에 있어 Type[]와 Array<Type> 두 가지 문법은 기능적으로 동일하지만, 상황에 따라 적절히 선택하여 사용할 수 있습니다. 튜플 타입은 고정된 길이와 타입을 가진 배열을 표현할 때 유용하며, 이를 통해 더 정확한 데이터 구조를 모델링할 수 있습니다.

 리터럴 타입은 특정 값 자체를 타입으로 사용할 수 있게 해주어, 매우 정확한 타입 제한이 가능합니다. 이는 특히 상태나 열거형 값을 다룰 때 유용하게 사용될 수 있습니다.

 타입 추론 기능은 개발자가 모든 변수에 명시적으로 타입을 지정하지 않아도 되게 해주어 코드의 간결성을 유지하면서도 타입 안정성을 제공합니다. 그러나 복잡한 타입이나 명확한 의도 전달이 필요한 경우에는 명시적 타입 선언이 여전히 중요합니다.

 strictNullChecks 옵션은 null과 undefined 처리에 대한 엄격한 검사를 수행하여, 이와 관련된 많은 런타임 오류를 방지할 수 있게 해줍니다. 이는 코드의 안정성을 높이는 데 큰 도움이 됩니다.

 템플릿 리터럴 타입은 문자열 조작에 대한 타입 안정성을 제공하는 강력한 기능입니다. 이를 통해 복잡한 문자열 패턴을 타입 레벨에서 정의하고 검사할 수 있습니다.

 기본 타입을 효과적으로 사용하기 위해서는 구체적인 타입을 사용하고, 유니온 타입을 활용하며, 타입 별칭을 통해 재사용성을 높이는 등의 Best Practices를 따르는 것이 중요합니다. 또한 null과 undefined 처리에 주의를 기울이고, 배열과 튜플을 적절히 사용하는 것도 중요한 고려사항입니다.

 결론적으로, 타입스크립트의 기본 타입 시스템을 잘 이해하고 활용하면 더 안정적이고 유지보수가 용이한 코드를 작성할 수 있습니다. 이는 특히 대규모 프로젝트나 팀 단위의 개발에서 큰 이점을 제공하며, 장기적으로 개발 생산성을 향상시키는 데 기여합니다.

이전으로다음으로