[TIL] TypeScript 파고들기(2): 타입

hanbyul.choi·2023년 7월 26일
0

[TIL]

목록 보기
27/39

기본타입

1) boolean

  • 두가지 상태를 담고 싶은 변수에 사용한다.
  • 3가지 이상은 enum이나 string으로 사용한다.
  • boolean 타입은 참(true) 또는 거짓(false) 값이다.

2) number

  • 보통 일반적인 프로그래밍 언어에서 정수는 short, int, long, 실수는 float, double을 사용한다.
  • 하지만, TypeScript에서는 number 타입이 정수, 실수 뿐 아니라 2, 8, 16진수까지 표현할 수 있어 하나로 충분하다.
  • 모든 수치 연산에 사용되는 값은 number 타입으로 명시를 해야한다.

3) string

  • string 타입은 텍스트 데이터를 나타낸다.
  • 작은 따옴표(’), 큰 따옴표(”), 백쿼트(`) 를 사용
  • string 타입은 텍스트를 조작하거나 출력할 때 사용할 수 있다.

4) 배열

  • 배열은 기본타입에 []가 붙은 형태의 타입
function calculateSum(numbers: number[]): number {
  let sum: number = 0;
  for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
  }
  return sum;
}

5) 튜플(tuple)

  • 튜플은 서로 다른 타입의 원소를 순서에 맞게 가질 수 있는 특수한 형태의 배열이다.
  • 배열은 number[], string[] 처럼 같은 타입의 원소만 가질 수 있었지만 튜플은 어떤 타입의 원소를 허용할 것인지 정의만 해주면 허용된 타입의 데이터를 저장할 수 있다.
const person: [string, number, boolean] = ['Spartan', 25, false];
const person2: [string, number, boolean] = [25, 'Spartan', false]; // 오류!
  • 그러나 순서는 보장이 되어야 하고, 들어오는 데이터의 개수도 맞춰야한다.

6) enum(열거형 데이터 타입)

  • enum은 명확하게 관련된 상수 값들을 그룹화하고자 할 때 사용한다.
  • 다양한 상수를 이름으로 접근하고 사용한다.
  • enum 안에 있는 각 요소는 값이 설정되어 있지 않으면 기본적으로 숫자 0으로 시작한다.
  • enum 안에 있는 요소에는 number 혹은 string타입의 값만을 할당할 수 있다.
enum UserRole {
  ADMIN = "ADMIN",
  EDITOR = "EDITOR",
  USER = "USER",
}

enum UserLevel {
  NOT_OPERATOR, // 0
  OPERATOR // 1
}
enum UserLevel {
  NOT_OPERATOR = 1, // 1
  OPERATOR // 2
}

readonly

  • readonly는 TypeScript에서 등장한 키워드로 TypeScript에서 객체의 속성을 불변으로 만드는 데 사용되는 키워드에요!
  • 즉, 클래스의 속성이나 인터페이스의 속성을 변경할 수 없게 만들 수 있다.
class Person { 
  readonly name: string;
  readonly age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

const person = new Person('JHON', 30);

console.log(person.name);  // 출력: 'JHON'
console.log(person.age);   // 출력: 30

person.name = 'Jane';  // 에러: 'name'은 readonly 속성이므로 다시 할당할 수 없음
person.age = 25;       // 에러: 'age'은 readonly 속성이므로 다시 할당할 수 없음

any, unknown, union

1) any

  • TypeScript에서 any 타입은 어떤 타입의 값이든 저장할 수 있다
  • JavaScript의 object 타입과 같은 최상위 타입이라고 생각하면 된다.
  • any 타입은 코드의 안정성과 유지 보수성을 저해할 수 있다.

2) unknown

  • unknown 타입은 any 타입과 비슷한 역할을 하지만 더 안전한 방식으로 동작한다.
  • unknown 타입의 변수에도 모든 타입의 값을 저장할 수 있다.
  • 하지만, 그 값을 다른 타입의 변수에 할당하려면 명시적으로 타입을 확인해야 한다.
let unknownValue: unknown = '타입스크립트';
console.log(unknownValue); // 타입스크립트

let stringValue: string;
stringValue = unknownValue; // 에러 발생! unknownValue가 string임이 보장이 안됨
stringValue = unknownValue as string;
console.log(stringValue); // 타입스크립트
  • stringValue = unknownValue as string; 코드를 Type Assertion(타입 단언)이라고 한다.
  • typeof 키워드를 이용하여 타입 체크를 미리한 후 unknown 타입의 변수를 string 타입의 변수에 할당할 수 있다.

4) union

  • unknown 타입이 그나마 재할당을 할 때 타입 체크가 되어서 안전함을 보장하지만, unknown 타입도 결국 재할당이 일어나지 않으면 타입 안전성이 보장이 되지 않는다
  • 이럴 때를 위해 union 타입이라는 것이 사용되는데 union여러 타입 중 하나를 가질 수 있는 변수를 선언할 때 사용된다.
  • union은 | 연산자를 사용하여 여러 타입을 결합하여 표현한다.
type StringOrNumber = string | number; // 원한다면 | boolean 이런식으로 타입 추가가 가능

function processValue(value: StringOrNumber) {
  if (typeof value === 'string') {
    // value는 여기서 string 타입으로 간주
    console.log('String value:', value);
  } else if (typeof value === 'number') {
    // value는 여기서 number 타입으로 간주
    console.log('Number value:', value);
  }
}

processValue('Hello');
processValue(42);

  • 그러나 어쩔 수 없이 가변적인 타입의 데이터를 저장하고 싶다면 any를 쓰기보다는 unknown을 사용하는 것이 좋다.
  • 그리고, 가변적인 타입을 일일이 정의할 수 있다면 union 사용이 가장 낫다.
  • TypeScript를 쓰면서 여러 타입을 하나의 변수로 해결하겠다는 생각은 가급적 지양해야한다.
    (코드의 안정성을 높이고 유지 보수성을 개선을 위해서....)

0개의 댓글