기본 Type

Happhee·2022년 4월 7일
4

📘 TypeScript

목록 보기
2/10

JavaScript의 타입은 원시 값 Boolean, Null, Undefined, Number, String, Symbol의 타입과 객체로 나뉘어진다. 이를 확장한 TypeScript의 기본 타입으로는 어떤 것들이 있고, 함수는 어떻게 선언되어 사용되는지 알아보자.


✨ TypeScript의 Type

  • Boolean
  • Number
  • String
  • Object
  • Array
  • Tuple
  • Enum
  • Any
  • Void
  • Null
  • Undefined
  • Never
    총 12가지의 타입을 지원한다.

Type 지정

TypeScript는 일반 변수, 매개 변수, 객체 속성 등에 : Type의 표현으로 타입을 지정할 수 있다.

string, number, boolean, any

👇 예제 코드이다.

let str: string = "seohee";
let age: number = 24;
let woman: boolean = true;
let anyType: any = -1;
let orType: string | number = "dance";	

: Type자리에 타입스크립트에서 지원하는 타입을 지정하여 넣을 수 있고, 해당 자리에 |를 넣어 여러 개의 타입을 지정하는 것도 가능하다.

만약, 지정된 타입과 다른 타입을 대입하면,,,,❗️❗️❗️

age = "24";

타입 형식이 맞지 않다는 에러코드 'TS(2322)를 확인할 수 있다.

'string' 형식은 'number' 형식에 할당할 수 없습니다.ts(2322)

추가적으로 Object를 지정하는 방법을 살펴보자.

Array

let numberArray: number[] = [1, 2, 3];
let numberGeneric: Array<number> = [1, 2, 3];

괄호 표기법이나 제네릭을 사용하여 배열을 지정할 수 있다.

Tuple

👇 배열의 길이가 고정되고, 각 요소의 타입이 지정되어 있는 배열 형식이다.

let person: [string, number] = ["seohee", 24];

배열에 인덱스로 접근할 수 있으며,

console.log(person[0]);		// "seohee"
console.log(person[1]);		// 24
console.log(person[2]);		// Error, ts(2493)

범위를 초과한 곳에 접근할 경우 TS(2493)이라는 오류를 발생시킨다.

길이가 '2'인 튜플 형식 '[string, number]'의 인덱스 '2'에 요소가 없습니다.ts(2493)

배열의 메서드 또한 사용할 수 있다.

console.log(person.length);			// 2
console.log(person.concat("2"));	// ["seohee", 24, "2"]
console.log(person[1].concat("1"));	// Error : ts(2339)

단, 정의된 타입에 맞지 않는 메서드를 사용하면 아래와 같은 오류를 발생시킨다.

'number' 형식에 'concat' 속성이 없습니다.ts(2339)

타입스크립트는 항상 지정된 Type을 생각하며 코드를 작성하는 것이 필요하다.

Enum

👇 특정 값들의 집합을 의미한다.

enum Fruits {
  Apple,
  Orange,
  PineApple,
}
let fruit: Fruits = Fruits.Apple;

void

👇 변수에는 undefine만 할당하고, 함수에는 반환 값을 설정할 수 없는 타입이다.

let voidType: void = undefined;
function voidFuntion(): void {
  console.log("void 타입입니다!");
}
console.log(voidType);			// undefined
console.log(voidFuntion());		// "void타입입니다!"

never

👇 함수의 끝에 도달하지 않는 타입이다.

function infinityLoop() {
    while (true) { }
    console.log("무한루프")
}
console.log(infinityLoop()); 	// 끝나지 않음

🌈 결론

자바스크립트와 달리 타입스크립트에서는 총 12가지의 타입을 지정할 수 있으며, 토이 프로젝트를 진행할 때는 개발 상황에 맞게 적절한 타입을 지정하도록 노력해야겠다.


📚 학습할 때, 참고한 자료 📚

profile
즐기면서 정확하게 나아가는 웹프론트엔드 개발자 https://happhee-dev.tistory.com/ 로 이전하였습니다

0개의 댓글