(SEB_FE) Section4 Unit5 TypeScript의 타입

TypeScript는 JavaScript와 거의 동일한 데이터 타입을 지원한다.

💚Boolean(불리언) 타입

가장 기본적인 데이터 타입으로, JavaScript에서도 마찬가지로 boolean 값이라고 불리는 참(true), 거짓(false) 값을 의미.

let isShow: boolean = true;
let isDone: boolean = false;

💚Number(숫자) 타입

JavaScript와 마찬가지로 TypeScript 또한 정수와 실수의 구분 없이 Number 타입 하나로 표기한다. TypeScript는 이 외에도 추가로 bigint를 지원한다.

let number1: number = 5;
let number2: number = 0.7;

💚String(문자열) 타입

TypeScript는 JavaScript처럼 큰따옴표(")나 작은따옴표(')를 사용하여 문자열 데이터를 표현한다. 또한 백틱(`)을 사용한 문자열인 템플릿 리터럴을 사용하면 여러 줄에 걸쳐 문자열을 작성할 수 있다.

let firstName: string = "coding";
let lastName: string = 'kim';
let longString: string = `Kimcoding is a developer.
He is 20 years old.`

💚Array(배열) 타입

TypeScript는 JavaScript처럼 값들을 배열로 다룰 수 있게 할 수 있으며, 두 가지 방법으로 배열 타입을 선언해 사용할 수 있다.

배열 타입은 기본적으로 하나의 타입만 작성하게 되어 있으며, 타입을 혼용해서 작성하는 것은 불가능하다.

//첫 번째 방법
let items: string[] = ["apple", "banana", "grape"];

//두 번째 방법
let numberList: Array<number> = [4, 7, 100];

• 첫 번째 방법: 배열 요소들을 나타내는 타입 뒤에 배열을 나타내는 []을 쓰는 것

• 두 번째 방법: 제네릭 배열 타입을 사용하는 것

  • Array를 먼저 작성한 뒤, <>안에 배열의 요소들을 나타내는 타입을 작성
  • 제네릭 타입으로 작성 시, <> 안에는 하나의 인자만 들어갈 수 있다.
    let shoes: Array<string, number> = ["Nike", 78, "Asics", 34]; (X)

💚Tuple(튜플) 타입

TypeScript에서 튜플 타입을 사용하면 요소의 타입과 개수가 고정된 배열을 표현할 수 있다.

let user: [string, number, boolean] = ["kimcoding", 20, true];

모든 요소가 전부 같을 필요는 없지만, 배열의 index마다 타입이 정해져 있기 때문에 정확한 index에 접근할 필요가 있다.

console.log(user[2].toString());

이렇게 user[2]에 접근하게 되면, user[2]에 있는 요소는 boolean 타입이기 때문에 타입 에러가 발생하게 되는 것.

JavaScript에서도 튜플 타입을 지원하며, JavaScript에서의 튜플 또한 여러 개의 값을 가진 배열을 나타내는 데에 사용한다. 그러나 JavaScript에서는 튜플 타입을 명시적으로 선언할 수 없기 때문에 개발자가 직접 튜플의 각 요소의 타입을 확인하고 유추해야 하므로 타입 에러가 더 쉽게 발생한다.

TypeScript의 등장 배경 중 하나인 타입 에러를 방지하고자 한 이유 중 하나!

💚Object(객체) 타입

TypeScript에서 객체는 JavaScript와 마찬가지로 원시 타입이 아닌 타입을 나타낸다.

JavaScript에서 Object(객체) 타입은 프로퍼티를 가지는 JavaScript의 값을 말하며 typeof 연산자를 사용했을 때 “object”을 반환하는 모든 타입을 의미한다.

• JavaScript 원시 타입: number, string, boolean, undefined, null, symbol

let obj: object = {};

TypeScript에서 object 타입은 모든 객체를 수용하는 타입으로, 객체의 프로퍼티 타입들이 any로 지정되기 때문에 어떠한 프로퍼티라도 추가할 수 있다.
(그러나 이는 타입 안정성을 보장하지 않기 때문에 편하지만, 추천하는 방법은 아니다.)

따라서 객체의 프로퍼티 타입들을 각기 명시해 주는 것이 훨씬 좋다! 객체는 이런 방식으로 key-value에 구체적인 타입까지도 지정할 수 있다.

let user: {name: string, age: number} = {
	name: "kimcoding",
	age: 20
}

🚨주의!🚨
객체 리터럴은 명시한 프로퍼티만 지정할 수 있다.
즉, 아래 코드에서 명시된 프로퍼티는 name과 age이고, isDeveloper는 명시된 속성이 아니므로 에러가 발생한다.

// 에러 발생! 
let person: {name: string, age: number} = {
    name: "anna",
    age: 15,
    isDeveloper: false
}

💚Any 타입

간혹 애플리케이션을 만들 때, 알지 못하는 타입 을 표현해야 할 때도 있다.
클라이언트에서 유저로부터 받은 데이터 및 서드파티 라이브러리에서 들어오는 값인 경우 개발자가 알지 못하는 타입일 수 있는데, 타입 검사를 하지 않고자 할 때 any 타입을 사용할 수 있다.

let maybe: any = 4;

any 타입을 사용하게 되면, 변수에 값을 재할당하는 경우 타입을 명시한 변수와 달리 타입에 구애받지 않고 값을 재할당할 수 있게 된다.
아래 예시로 살펴보자.

let obj: object = {};

//에러
obj = "hello";

let maybe: any = 4;

//정상적으로 동작
maybe = true;

또한 엄격한 타입 검사를 진행하지 않기 때문에, 실제 할당된 값이 가지지 않는 메서드 및 프로퍼티로 접근해도 에러가 나지 않는다.

• 실제 할당된 값이 가지지 않는 메서드 및 프로퍼티라서 반환 값은 undefined

let maybe: any = 4;

//undefined로 출력
console.log(maybe.length);

또한 any 타입은 타입의 일부만 알고, 전체는 알지 못할 때 유용하다.
예를 들어서 여러 타입이 섞인 배열을 받고자 할 때!

let list: any[] = [1, true, "free"];

/* any로 다루고 있기 때문에 index 1번째 요소가 boolean 타입이지만 
number 타입으로 재할당할 수 있다. */ 
list[1] = 100;