코드의 품질과 유지 보수성이 향상되고 실수를 줄일 수 있다.

타입

• 변수에 저장되는 타입

타입에 따른 오류

• 오류는 실행 시간에 발생한다
• 미리 방지 가능

안정성 코드 품질

• 코드가 예상한대로 동작함을 보장할 수 있다.

원활한 협업

• 가독성
• 유지보수 용이

타입스크립트는 정적 타입 시스템을 도입함으로써 여러가지 오류를 방지하고 이점을 제공한다.

기본 타입 훑어보기

boolean

• true, false

function isValidPassword(password: string): boolean {
  return password.length >= 8;
}

const password = "q1w2e3r4!";
const valid = isValidPassword(password);

if (valid) {
  console.log("유효한 패스워드입니다!");
} else {
  console.log("유효하지 않은 패스워드입니다!");
}

2가지의 상태(켜짐/꺼짐, 유효함/유효하지 않음)를 표현하고 싶은 경우는 boolean을 사용
3가지 이상의 상태를 표현하고 싶은 경우 → enum이나 string을 사용

number

• 수치 연산에 사용되는 타입은 모두 넘버

string

• 텍스트 데이터
• 큰, 작은 따옴표, 백쿼트로 표현 가능

배열

• 기본타입에 []가 붙은 형태

튜플

• 서로 다른 타입의 원소를 순서에 맞게 가질 수 있는 특수한 형태의 배열

const person: [string, number, boolean] = ['Spartan', 25, false];
const person2: [string, number, boolean] = [25, 'Spartan', false]; // 오류!

enum

enum은 명확하게 관련된 상수 값들을 그룹화하고자 할 때 사용하는 게 좋다.
그러나 값의 수가 많지 않고, 값들 사이의 관계가 뚜렷하지 않으면 사용하지 않는 게 낫다.

• 열거형 데이터 타입
• enum 안에 있는 각 요소는 값이 설정되어 있지 않으면 기본적으로 숫자 0으로 시작
• enum 안에 있는 요소에는 number 혹은 string타입의 값만을 할당할 수 있다.

enum UserRole {
  ADMIN = "ADMIN",
  EDITOR = "EDITOR",
  USER = "USER",
}

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

function checkPermission(userRole: UserRole, userLevel: UserLevel): void {
  if (userLevel === UserLevel.NOT_OPERATOR) {
    console.log('당신은 일반 사용자 레벨이에요');
  } else {
    console.log('당신은 운영자 레벨이군요');
  } 

  if (userRole === UserRole.ADMIN) {
    console.log("당신은 어드민이군요");
  } else if (userRole === UserRole.EDITOR) {
    console.log("당신은 에디터에요");
  } else {
    console.log("당신은 사용자군요");
  }
}

const userRole: UserRole = UserRole.EDITOR;
const userLevel: UserLevel = UserLevel.NOT_OPERATOR;
checkPermission(userRole, userLevel);

추가 자료

const, readonly, let

let

• 변수

const

• 상수

  const 키워드는 재할당을 금지할 뿐 "불변"을 의미하지 않는다. (객체) (강의에서는 값을 변경할 수 없다고 함.)

readonly

• 타입스크립트에서 등장한 키워드
• 객체의 속성을 불변으로 만드는데 사용되는 키워드

class Person { // 클래스는 다른 강의에서 자세히 설명해드릴게요!
  readonly name: string;
  readonly age: number;

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

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

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

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

불변성의 중요성 : 코드의 안정성을 높이고 버그를 줄일 수 있다

any, unknown, union

어쩔 수 없이 가변적인 타입의 데이터를 저장하고 싶다면 any를 쓰기보다는 unknown을 사용!!
그리고, 가변적인 타입을 일일이 정의할 수 있다면 union 사용이 가장 낫다.

any

• 모든 타입의 슈퍼 타입
• 최상위 타입
• 어떠한 타입이 들어올지 도저히 판단이 안될때

let anything: any;
anything = 5; // 최초에는 숫자를 넣었지만
anything = 'Hello'; // 문자열도 들어가고요
anything = { id: 1, name: 'John' }; // JSON도 들어가네요

unknown

• 타입스크립트에서 any를 쓰는 것은 모순(가독성, 협업, 유지보수 측면 등등)

타입 단언

let unknownValue: unknown = '나는 문자열이지롱!';
console.log(unknownValue); // 나는 문자열이지롱!

let stringValue: string;
stringValue = unknownValue; // 에러 발생! unknownValue가 string임이 보장이 안되기 때문!
stringValue = unknownValue as string;
console.log(stringValue); // 나는 문자열이지롱!

angle-bracket 문법

let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;

. 하지만 TypeScript를 JSX와 함께 사용할 때는, as-스타일의 단언만 허용

typeof(타입 체크)

let unknownValue: unknown = '나는 문자열이지롱!';
let stringValue: string;

if (typeof unknownValue === 'string') {
  stringValue = unknownValue;
  console.log('unknownValue는 문자열이네요~');
} else {
  console.log('unknownValue는 문자열이 아니었습니다~');
}

union

unknown의 한계

• unknown 타입이 그나마 재할당을 할 때 타입 체크가 되어서 안전함을 보장
• 하지만, unknown 타입도 결국 재할당이 일어나지 않으면 타입 안전성이 보장이 되지 않음

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);