TypeScript 1일차 / TypeScript 기초를 뿌셔보자 !

오늘은 타입스크립트를 공부한지 1일차가 되는 날이다 ! 

오늘은 타입스크립트에 대한 개념과 여러가지 문법에 대해 공부해보았다. 공부한 것을 토대로 블로깅을 해볼것이다 ! 

 

타입스크립트 ? 
자바스크립트에 정적타입 검사와 클래스 기반 객체 지향 프로그래밍 등의 기능을 추가하여 개발된 언어 

타입스크립트가 왜 필요한가 ? 
자바스크립트는 동적 타입이 결정되어 유연하고 다양한 라이브러리와 프레임워크를 사용할 수 있는 장점이 있지만 타입의 명시성이 부족하다는 단점이 존재함. 
예를 들어 문자열과 숫자를 더하여 문자열이 되는 것 처럼 타입을 명시적으로 지정하지 않아도 동작하는 경우가 많아 예기치 못한 결과를 초래함 
-> 이를 해결하기 위해 타입스크립트가 등장하게 됨 ! 

타입스크립트 Type 

Boolean(불리언) 타입

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

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

Number(숫자) 타입

TypeScript에서 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를 먼저 작성한 뒤, <> 안에 배열의 요소들을 나타내는 타입을 작성합니다. 제네릭은 이후 챕터에서 배우게 됩니다. 배열 타입은 기본적으로 하나의 타입만 작성하게 되어 있으며, 타입을 혼용해서 작성하는 것은 불가능합니다.

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
}

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;