[TypeScript] type 키워드 & readonly

2022. 5. 10. 17:14·TypeScript/기초
반응형

Type Aliases

타입스크립트로 코드를 작성하다보면 

let 동물 :string | number | undefined;

길고 복잡하게 타입을 나열하는 경우가 많아진다. 

긴 타입 정의가 보기 싫거나, 나중에 또 사용하는 타입인 경우에는 따로 변수에 담아서 사용할 수 있다. 

 

타입을 변수처럼 만드는 것을 type 키워드를 통해서 가능하다. 

type 키워드를 사용하는 것을 type alias 라고 한다. 

 

type Animal = string | number | undefined;

let 동물 :Animal;

type 변수명 = 타입 종류 

타입을 변수처럼 만드는 alias 문법이다. 일반적으로 타입 변수를 만들때는 대문자로 시작한다. 

 

type 키워드는 특징이 있는데, 바로 재정의가 불가능하다. 

type Name = string;
// type Name = number;  에러

 

Object 타입 

type Person = {
    name : string,
    age : number,
}

let man : Person = {
    name : "seo",
    age : 300
}

object 타입도 따로 저장이 가능하다. 

 

속성을 선택사항으로 만들기

type Square = {
	color? : string,
    width : number,
}

let box : Square = {
	width : 1000
}

특정 object 자료는 color와 width 속성 모두 필요하지만, 

color 속성은 선택사항이라면 ? 연산자를 추가해주면 된다. 

 

여러 타입을 합치기 ( extend ) 

type Name = string;
type Age = number;
type NewOne = Name | Age;

OR 연산자를 사용해서 Union 타입을 만들 수 있다. 

NewOne 타입은 string | number를 가지고 있는 타입이다. 

 

type PositionX = { x: number };
type PositionY = { y: number };

type Position = PositionX & PositionY

let position: Position = { x : 1, y : 2 }

object에 지정한 타입을 하나로 합칠 수 있다. 

& 기호를 쓴다면 object 안에 있는 두 속성을 하나로 합쳐준다. 

 

readonly로 잠그기 

const 이름 = {
  name : '엠버'
}
이름.name = '유라';

const 변수의 object는 내부에서 마음대로 변경하는 것이 가능하다. 

const 변수는 재할당만 막아주지, object의 속성까지 바꾸는 것은 관여하지 않기 때문이다. 

 

object 속성이 바뀌지 않게 막고 싶을 때 타입스크립트 문법을 사용한다. 

type Name = {
  readonly name : string,
}

let 휴먼 :Name = {
  name : '엠버'
}

// 휴먼.name = '유라'  에러 발생

readonly 키워드는 속성 왼쪽에 붙여서 특정 속성의 변경이 불가능하게 잠궈주는 역할을 한다. 

반응형
저작자표시 비영리 변경금지 (새창열림)

'TypeScript > 기초' 카테고리의 다른 글

[TypeScript] 함수와 method에 type alias 지정하기  (1) 2022.05.26
[TypeScript] Literal Type  (2) 2022.05.25
[TypeScript] 타입 확정하기  (1) 2022.05.09
[TypeScript] 함수에 타입 지정하기  (1) 2022.05.08
[TypeScript] 추가 타입  (5) 2022.04.21
'TypeScript/기초' 카테고리의 다른 글
  • [TypeScript] 함수와 method에 type alias 지정하기
  • [TypeScript] Literal Type
  • [TypeScript] 타입 확정하기
  • [TypeScript] 함수에 타입 지정하기
잉여개발자
잉여개발자
풀스택 개발자를 목표로 잉여롭게 개발 공부도 하면서 다양한 취미 생활도 즐기고 있는 잉여 개발자입니다.
  • 잉여개발자
    잉여로운 개발일지
    잉여개발자
    • 분류 전체보기 (789)
      • 개발정보 (36)
      • 개발환경 (7)
      • 개발생활 (19)
      • React (141)
        • 이론 (23)
        • 기능 (12)
        • 실험실 (88)
        • 버그 (6)
        • 패스트캠퍼스 (9)
        • Npm (3)
      • React Native (28)
        • 공통 (6)
        • TypeScript (3)
        • JavaScript (18)
        • 버그 (1)
      • Next.js (30)
        • 이론 (13)
        • 실험실 (13)
        • 버그 (3)
      • Web (35)
      • 알고리즘 (202)
        • 풀이 힌트 (39)
      • JavaScript (47)
      • TypeScript (29)
        • 기초 (27)
        • 실험실 (2)
      • Node.js (13)
        • 이론 (0)
        • 기능 (3)
        • 실험실 (9)
        • 버그 (1)
      • 도커 (4)
      • CCNA (22)
        • 이론 (4)
        • 문제 (18)
      • 취미생활 (167)
        • 잉여로운 칵테일 (2)
        • 잉여의 식물키우기 (130)
        • 잉여로운 여행기 (11)
        • 잉여의 제2외국어 (21)
        • 잉여로운 책장 (2)
      • Java (1)
        • Java의 정석 (1)
      • 꿀팁 공유 (3)
  • 태그

    바질
    알고리즘
    타입스크립트
    Node.js
    ReactNative
    타일러영어
    네트워크
    react
    식물
    ChatGPT
    CCNA
    덤프
    프로그래머스
    네이버 부스트캠프
    typescript
    next.js
    리얼학습일기
    webpack
    리액트
    Babel
    CSS
    리얼클래스
    자바스크립트
    다이소
    바질 키우기
    영어회화
    javascript
    redux
    영어독학
    Docker
  • hELLO· Designed By정상우.v4.10.1
잉여개발자
[TypeScript] type 키워드 & readonly
상단으로

티스토리툴바