Typescript의 타입: 기본 타입

나현·2023년 2월 15일
0
post-thumbnail

급변하는 기술 시장에서 살아남기 위해 Typescript 공부를 시작하였습니다...
과연 저는 살아남을 수 있을까요?!

👀 Typescript의 기본 타입

타입스크립트의 주요 타입(type)은 number, string, boolean, obejct, array 입니다.
(소문자 주의!)
그럼 도대체 자바스크립트와 무엇이 다를까요?

Javascript는 동적 타입이지만, Typescript는 정적 타입입니다.

그렇습니다! Javascript는 number타입의 값이 담긴 변수에 string타입을 할당해도 에러가 발생하지 않지만,
typescript는 명시해줘야 합니다.

이외에도 자바스트립트와 다르게 타입스크립트가 가진 고유 타입들이 있습니다.
이것은 다음 포스트에서 다루도록 하겠습니다!

👀 기본 타입에는 어떤 것이 있나요?

1. 일반적인 사용방법: number, string, boolean...

여기 예제가 있습니다 :

//1.
const multiple=(num1: number, num2: number)=> {
	return num1 * num2;
}
//2.
const number1=10;
const number2=4;
//3. 2번은 굳이? 이렇게도 쓸 수는 있습니다
//let number1: number;
//number1=10;

multiple(number1, number2);

위 예제의 1, 2, 3번 부분에서 알 수 있는 타입스크립트의 특징은
다음과 같이 정리할 수 있습니다!

  • 매개변수에는 : 을 사용해 타입을 명시합니다.
  • 변수 선언과 동시에 할당했다면 굳이 타입을 명시하지 않아도 됩니다.
  • 변수 선언만 할 때는 타입을 명시해주어야 합니다.

2. 객체 타입

객체는 조금 더 복잡합니다. 객체 안의 키 값의 타입도 명시할 수 있습니다.
여기 일반적인 객체 하나가 있습니다.

const fruit = {
   name: 'kiwi',
   number: 1
}

이 객체는 어떻게 명시할까요?
위처럼 :을 사용해 object라고 명시할 수도 있습니다.
{}를 사용해도 됩니다!

const fruit: object = {
   name: 'kiwi',
   number: 1
}
//또는
//const fruit: {} = {
//   name: 'kiwi',
//   number: 1
//}

객체 안의 자료들도 명시해야 하지 않을까요?
그것은 키:값 쌍을 나타내는 객체처럼 키:타입으로 나타낼 수 있습니다.
그런데 객체처럼 ,가 아니라 ;로 끝난다는 것 유의해야 합니다!

const fruit: {
   name: string;
   number: number;
 } = {
  name: 'kiwi',
  number: 1
};

3. 배열 타입

당연히 자바스크립트처럼 배열 타입도 있습니다.
배열은 배열 안의 자료형과 대괄호로 표시합니다.

const fruitBasket: string[];
const fruitBasket: any[];

문자열로만 이뤄진 배열은 앞에 string을, 여러 타입이 섞여있다면 any를 사용합니다.
any에 대해서는 나중에 좀 더 다뤄보겠습니다!

😝 마무리

오늘은 Typescript의 기본 타입-number, string, boolean, object, array에 대해 알아보았습니다.
다음 시간에도 저는 살아남을 수 있을까요?!

profile
프론트엔드 개발자 NH입니다. 시리즈로 보시면 더 쉽게 여러 글들을 볼 수 있습니다!

0개의 댓글