본문 바로가기
학습

typescript 기본타입 종류

by 어뇨 2024. 3. 5.

boolean 
true 또는 false값을 나타냄 

number 
typescript에선 number타입이 정수, 실수 뿐아니라 2,8,16진수등 까지 표현가능
모든 수치 연산에 사용되는 값은 number타입으로 명시를 해줘야함

string 
텍스트 데이터를 나타냄
작은따옴표('), 큰따옴표("), 빽틱(`)

배열은 기본타입에 [] 를 붙인형태 

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

예를들면 배열은 
const test : number[] = [1, 2, 3, 4, 5] 이런식으로 숫자형이라면 숫자만 문자형이라면 문자만들어가야하고 
const test : number[] = [1, 2, 3, 4, "5"] 이런식으로 혼합이 되면 에러가 나지만

튜플은 무슨타입의 원소를 허용할것인지에 대해 정의만 해주면 됨 .

const test : [number, string, boolean] = ["1", 25, false] 이런식으로 사용가능

enum 
열거형 데이터 객체타입 
다양한 상수를 보다 더 이해하시 쉬운 문자열 이름으로 접근하고 사용할수 있게 하는 타입
enum안에는 number 혹은 string만 사용가능함 
enum안에 있는 각 요소는 값이 설정되어있지 않으면 기본적으로 0 부터 시작함
예를들면 
const test  = { 
user,   // 0 
notUser   // 1 
} 
enum은 명확하게 관련된 상수 값들을 그룹화 하고자 할때 사용하는게 좋음

let const 는 기본적으로 자바스크립트때와 사용법이 비슷한데

readonly라는 개념이 typescript에서 새로 추가됨
객체의 속성을 불변으로 만드는데 사용함

readonly를 const 로 치환하면 에러가뜨고 const키워드는 일반변수를 상수화 시킬때 사용하는것

any타입
any타입은 모든타입의 슈퍼타입임
typescript에서 어떤타입의 값이든 저장할수있다는 의미
그러나 any타입은 코드의 안정성과 유지보수성을 저해할수도 있으므로 가급적 사용을 안하는게 나음

unknown타입 
모든 타입의 값을 저장할수있음 
그러나 그 값을 다른타입의 변수에 할당할려면 명시적으로 타입을 확인해야함.
예를들면 
let unknownValue : unknown  = "문자열" // unknown타입을 지정
console.log(unknownValue) // "문자열"이 출력

let stringValue : string // string타입으로 지정
stringValue = unknownValue // 에러 unknownValue가 string임이 보장이 안됐음
stringValue = unknownValue as string // as string을 사용해서 string임을 보장
console.log(stringValue) // "문자열"이 출력 

union 타입 
unknown타입도 재할당이 일어나지 않으면 타입안정성이 보장되지않음
이럴때를 위해 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);

*중요한 거
TypeScript를 쓰면서 여러 타입을 하나의 변수로 해결하겠다는 생각은 가급적 지양



'학습' 카테고리의 다른 글

Typescript 유틸리티타입  (0) 2024.03.11
typescript 기초 복습  (0) 2024.03.06
TypeScript 기초  (0) 2024.03.05
리액트쿼리  (0) 2024.02.28
jsonserver 여는법, Axios  (0) 2024.02.26