개발/typescript

타입스크립트 기초 문법 - 타입의 종류(1)

모그 2023. 12. 19. 17:19

 

1.원시타입

하나의 값만 저장 가능하다.

  • number,string,boolean
var extra:number = 10
//변수 extra는 숫자타입이다.

var extra:string="테스트"
//변수 extra는 문자타입이다.

var extra:boolean=true
//변수 extra는 boolean타입으로 true 혹은 false 값만 담을 수 있다.

 

  • null과 undefined는 그 자체만 넣을 수 있다.
var extra:null = null;
var extra:undefined=undefined;

 

 

2.리터럴타입

변수에 담긴 값 그 자체가 타입이 된다.

var Test:10 = 10
var Test2:false = false

 

리터럴타입으로 변수를 정의하게 되면 변수에 다른 값은 할당할 수 없게된다.

 

 

3.배열

var numArr:number[] = 123
var Array<number> = [1,2,3] //제네릭
var Array:number[][] = [[1,2] , [1,2,3]] //다차원 배열

 

  • 배열 요소가 다양한 타입을 갖고있다면 유니온 타입을 이용한다.
var testArry:(string | number)[] = ["문자", 123]

 

여기서 string이거나 number의 순서가 바뀌어도 된다.

 

 

4.튜플

  • 배열의 길이와 타입, 순서를 고정하고 싶다면 튜플을 사용한다.
var testArray:[number,string,number] = [12,"문자",2]

 

숫자,문자,숫자 순서의 길이 3인 배열로 고정되었다.

 

주의할 점은 배열 관련된 함수를 사용할 때이다.

var arr:[number,number] = [1,3];
arr.push(12);
console.log(arr) //[1,2,12]

 

즉, 튜플로 길이를 고정해놓았다해도 이처럼 요소가 추가, 삭제될 수 있으니 주의해서 사용해야한다.

 

 

5.객체

  • 객체 타입 기본 정의 방법

객체의 타입을 정의하는 방법은 앞서 언급했던 타입들과 살짝 다르다.

var obj:object = {
	name:"이름",
    	age:10
}

 

여기에서는 오류 발생이 없지만

var obj:object = {
	name:"이름",
    	age:10
}

obj.name

 

 

이렇게 호출하는 순간 오류메시지가 뜬다.

 

  • 객체 리터럴 타입
var obj:{
	name:string;
    	age:number
} = {
	name:"이름",
    	age:10
}

 

객체 리터럴 타입을 이용해 각 프로퍼티의 타입을 구체적으로 설정한다.

결론적으로 객체의 구조를 기준으로 타입이 정의된다고 볼 수 있는데, 타입스크립트에서는 이처럼 객체가 구조적 타입 시스템을 택한다.

 

  • 선택적 프로퍼티
var obj: {
	name:string;
    	age?:number
} = {
	name:"이름이다",
}

 

코드를 짜다 보면 어떤 프로퍼티는 있을 수도 있고 없을 수도 있다..

확실하지 않지만 일단 있다면 number타입으로 집어넣어보고싶다! 라면 위 예제처럼 프로퍼티 key 값 뒤에 ? 를 붙인다.

 

  • 읽기전용 프로퍼티
var obj: {
	readonly name:string
} = {
	name:"이름이다"
}

 

readonly가 붙은 프로퍼티는 이제 읽기전용이되어 다른 값을 할당할 수 없다.

실제로 obj.name = "이름이 아니다" 와 같이 값을 재할당하려하면 오류가 뜬다.

 

  • 타입 별칭

타입을 변수처럼 정의해 중복을 막는다. 코드 길이가 줄어들어 더 깔끔하게 코드짜기 가능~

type User = {
	name:string;
    	age:number;
        position:string
}

let user1: User = {
	name: "이름1",
    	age:17,
    	position:"학생"
}

let user2: User = {
	name: "이름2",
    	age:30,
    	position:"직장인"
}

 

  • 인덱스 시그니처

위의 타입 별칭보다 더 코드를 줄이면서 객체 타입을 유연하게 정의할 수 있다.

정의해야 할 프로퍼티가 너무 많을 때 유용하게 쓸 수 있다.

type User = {
	[key: string] : string
}

 

프로퍼티와 값이 모두 문자열로 정의된다.

 

type User = {
	[key: string] : string
}

type User = {
	[key: string] : string;
	testkey: string
}

type User = {
	[key: string] : string;
	testkey: number;
}
//오류

type User = {
	[key: string] : string;
	testkey: "문자열"
}
//가능

type User = {
	[key: number] : string;
	testkey: string
}
//가능

특별하게 따로 지정하고싶은 key값이 있다면 이렇게 따로 지정 가능하다.

주의할 점은 인덱스 시그니처의 값 타입과 일치하거나 호환되어야한다는 점이다.

인덱스 시그니처는 이론만 봤을 땐 어떤 경우에 사용하는지 감이 오지 않지만 일단 외워두기.

 

저작자표시