이번 프로젝트에서는 자바스크립트가 아닌, 자바스크립트의 Superset인 타입스크립트를 이용하여 개발을 해보기로 하였다.
프로젝트를 본격적으로 시작하기에 앞서 타입스크립트의 기초적인 개념과 문법 등을 공부하고자 한다.
TypeScript의 개요
TypeScript(타입스크립트)는 2014년 마이크로소프트에 의해 개발된 프로그래밍 언어이다. Javascript을 확장해서 만든 언어이지만 자바스크립트와 다르게 정적인 형태를 갖는 클래스 중심의 객체지향 언어이다.
타입스크립트를 컴파일하면 자바스크립트 코드로 바뀌기 때문에 자바스크립트가 동작하는 환경이라면 어디든 사용할 수 있으며, 자바스크립트의 라이브러리도 사용할 수 있다는 장점이 있다.
또한 타입스크립트의 가장 큰 특징은 정적형태의 언어라는 것이다.
자바스크립트에서는 타입을 선언하지 않아도 알아서 결정이 된다. 타입을 정하지 않으면 만드는게 간단하지만 실행할 때까지 에러가 일어날지 알 수 없다.
반면 타입스크립트는 미리 타입을 정하고 개발을 하기 때문에 사전에 에러를 일어나는지 알 수 있고 이를 통해 대규모 개발시에 퍼포먼스가 좋아질 수 있다.
타입스크립트의 장점
- 자바스크립트보다 짧고 읽기 쉬운 코드를 쓸 수 있다.
- 자바스크립트와 호환성이 매우 좋다.
- 형태를 선언하기 때문에 에러를 미연에 방지할 수 있다.
Basic Syntax
기본적인 타입
타입스크립트가 제공하는 기본적인 타입들은 아래 코드와 같이 정의할 수 있다.
let name: string; // boolean, number, null/undefined
name = "Jo";
name = 0; // 에러특별한 타입
자바스크립트에는 없지만 타입스크립트에서 제공하는 특별한 타입들은 아래 코드와 같이 정의 할 수 있다.
1.any
let testVar: any = 5;
bool = false;
bool = 'everything';
bool = null;2.void
void는 null과 undefined 만을 값으로 가질 수 있으며 아무런 값도 반환하지 않는 함수에서 사용된다.
function foo(): void {'...'}3.never
never는 에러를 thorw하는 함수 같이 존재하지 할 수 없고 어떠한 값도 반환하지 않는 함수에서 사용된다.
function foo(): never {
throw new Error('error');
}4.배열
const array: string[] = [];
array.push("hello");
array.push(10); // 에러5.객체
const person: { name: string, age: number} = {
name: "Jo",
age: 30,
};6.튜플
튜플은 정해진 타입의 배열에 딱 맞게 사용되어야 한다.
const tupleIs: [string, number] = ['Jo', 30];7.함수
함수는 interface라고 하는 키워드를 이용하여 implements 하는 방식으로 사용된다. interfacedhk Implements에 대한 설명은 다음 로그에서 살펴보도록 한다.
interface IHuman {
name: string;
getName: (param: string) => string;
}
class Person implements IHuman {
name: string;
getName (param: string) {
return `${this.name} (${param})`;
}
}8.Union
Union타입은 몇 개의 선택지를 주는 느낌이다. 선택지 내에 있는 타입들은 허용될 수 있다는 의미로 받아들였다.
let nameOrAge: string | number = "Jo";
nameOrAge = 30;
nameOrAge = true; // 에러이상으로 타입스크립트를 사용하는데 있는 가장 기초적인 문법 8개를 살펴봤다. 이 밖에도 굉장히 많지만, 가장 중요한 부분이고 많이 사용되는 부분 위주로 살펴보았다.
다음에는 추가적으로 Generic 등의 심화적인 부분을 공부하고 내용을 보완해 봐야겠다. 🤗
