본문 바로가기
Frontend/TypeScript

[TypeScript] Data Type's 메모

by Rayched 2024. 6. 10.

TypeScript의 Data Type

  • C, C++, Java와 같은 강타입 언어처럼, 변수 선언 시 타입을 명시할 수 있다.
  • 물론 JavaScript처럼 별도의 타입 지정 없이 변수만 선언하는 것도 가능하다.
  • 변수 선언 시 타입을 명시하지 않았다면, TypeScript가 자체적으로
  • 변수에 할당된 값의 타입에 따라, 해당 변수의 타입을 추론한다. (타입 추론)
let a = "hello"; //TypeScript가 자체적으로 변수 a가 string 타입 변수라고 추론한다.
a = "Hello World"; //문제 X

a = 10; //Error, 
//변수 a는 String 타입의 변수라고 파악했는데
//number 타입의 값, 10을 할당하려고 시도하면 Error가 발생함.
//변수 타입과 값, 데이터의 타입 불일치로 인해 발생하는 문제이다.

//변수 선언 시 타입 지정해서 선언하는 것도 가능하다.
let b: boolean = false; //b 변수 선언, 해당 변수 타입 boolean 지정, false 값 저장
b = true;
b = "a"; //Error, 변수 b는 boolean 타입 변수이므로 string 값 할당 불가
  • TypeScriptJavaScript 슈퍼셋이기 때문에
  • JavaScript의 7가지 원시 값은 TypeScript의 데이터 타입이 된다.
  • number, string, boolean, bigInt, null, undefined, symbol가 여기에 해당된다.
  • 나머지 array, object, function 등은 객체 타입에 속한다.


/*
const Player = {
    name: "Rayched"
};*/

//예를 들어서 Player1, Player2, Player3,...
//Player로 시작하는 객체들이 'name'이라는 Property는 공통으로 가지고 있고
//그 중 일부는 'age'라는 Property를 가지고 있다고 가정해보자.
//매번 Player 객체를 생성할 때 공통되는 Property인 name을 복붙하긴 귀찮다.

//일종의 상속처럼 Player라는 임의의 타입을 만들어서
//Player1, Player2, Player3 객체에서 공통되는 Property는
//여기에 다 넣어두고 싶다..

//아래와 같은 형식으로 사용자 정의 Object Type 만들 수 있다.

const player : {
    name: string,
    age?: number
} = {
    name: "홍길동",
}

//player 객체를 생성할 때, 이미 정의된 타입이 아닌
//임의의 객체 타입 {name, age} 생성해서 player 객체의 타입으로 지정
//이후 name, age Property에 값을 할당한다. (무조건 해야함.)
//다만 앞에서 말했던 것처럼 age는 일부만 가지고 있어야 한다.
//따라서 타입 지정 부분에서 'age' Property 이름 뒤에 '?'를 추가하면
//해당 Property에 할당될 수 있는 값의 타입이 number|undefined가 되게끔 할 수 있다.

//다만 앞으로 만들어야 하는 Player 객체가 한가득인데
//매번 이런식으로 할 수는 없다.
//아래와 같은 형식으로 사용자 정의 타입을 만들 수 있다.

type Player = {
    name: string,
    age?: number
}

//'Player'라는 임의의 사용자 정의 타입을 만들었다.
//이제 player1, 2, 3를 각각 만들어보자.

const player1 : Player = {
    name: "홍길동"
};

const player2: Player = {
    name: "홍길순",
    age: 25
}

const player3: Player = {
    name: "임꺽정",
    age: 30
}

//player 객체 선언할 때, 타입을 Player로 지정하면
//이름을 필수적으로 정의하고, 나이는 선택적으로 정의할 수 있다.
//객체 지향 문법의 추상 클래스 상속과 비슷한 느낌이다.