[Typescript] 원시, 리터럴, 배열, 튜플, 객체

dolfin·2023년 6월 28일

TypeScript

목록 보기
5/7
post-thumbnail

원시타입

이란 한개의 값만 저장할 수 있는 타입이다.
number, string, boolean, null, undefinde 등의 타입을 말한다.

const a : number = 1
const b : string = "hello"
const c : boolean = true
const d : null = null
const e : undefined = undefined

타입 주석(anotation) : 변수 뒤에 : 타입 을 붙여준 형태. 변수 타입을 정의한다.

이처럼 변수 뒤에 타입 주석을 달아주면 해당 타입만을 값으로 받을 수 있고,
또한 해당 타입의 메서드만 사용이 가능하다.

예를 들면 위의 예시에서 a는 number 타입 이었기때문에 string 메서드인 .toUpperCase()를 사용할 경우 에러가 난다.

리터럴 타입

딱 이 값만 써야돼 할때 쓰는 타입 ㅎㅎ

const contact : "email" = "email"

이렇게 지정했을 경우 contact 변수에는 "email" 만 넣을 수 있다.

배열 타입

const numArr : number[] = [1,2,3]
const strArr : string[] = ["1","2","3"]
const boolArr : boolean[] = [true,false]

갠적으로 요소를 어디다쓰는지가 맨날 헷갈렸는데 ㅎ;
요소[] 순으로 작성해야한다.. 까먹지말쟈

코드를 작성하다보면 배열안에 배열이 있는 경우도 있는데 이땐 어ㄷ쩌죠?

const mulArr : number[][] = [
[1,2,3],
[2,3,4],
]

number로 이루어진 [] 을 [] 안에 넣는다.. 라고 작성하면된다.

튜플

위 처럼 배열 타입을 지정하다보면 타입은 지정이 가능하지만, 길이는 지정이 불가능하다.
무한대로 배열안에 요소들을 넣기가 가능하다. 이때 사용하는 것이 튜플이다.

const tuple1 : [number, number] = [1,2]
const tuple2 : [number, string, boolean] = [1, "hello", true]

튜플을 사용할 경우 타입과 길이 그리고 위치 까지 맞춰서 값을 넣어줘야한다 (중요)

갠적으로 튜플이랑 그냥 배열이랑 타입 쓰는게 넘 헷갈렸는데.. 이제 알겠다.

튜플 예시 ))

const users : [string, number][] = [
["jenny", 20],
["lisa", 19]  
]

주의사항

튜플은 컴파일을 해보면 알겠지만 결국 배열이다. 그래서 배열 메서드인 Push, pop으로 고정된 길이를 무시하고 추가, 삭제가 가능하다. 에러도 안남. 그래서 튜플 사용시 배열 메서드 사용에 유의해야한다.

객체 타입

const users = {
 id : 1,
 name : "jenny"  
}

위와 같은 객체가 있을때 타입 지정 어떻게 해야할까?
: object 라고 쓰면 되는거 아냐? 응 아냐..

const users : {
id: number,
name : string
} = {
 id : 1,
 name : "jenny"  
}

객체는 조금 독특하게 객체리터럴방식을 사용해서 타입을 지정한다.
근데 이때 만약 id 값은 있는데 name은 아직 값이 없다면 어쩌지?

const users : {
id: number,
name ?: string
} = {
 id : 1,
}

name 뒤에 ? 를 입력해주면 optional 프로퍼티로 변경되어 undefined | string 으로 값이 변경된다.

또 만약 객체 안의 값을 변경 하지 못하도록 바꾸려면 readonly 키워드를 붙여주면 된다.

const users : {
readonly id: number,
name : string
} = {
 id : 1,
 name : "jenny"  
}

출처 : 한 입 크기로 잘라먹는 타입스크립트

profile
no risk no fun

0개의 댓글