타입스크립트 시작하기
왜 타입스크립트 일까??
기존 자바스크립트를 자주 사용해본 사람들은 사용하면서 오묘한 느낌을 받았을 것이다
요즘 동적타이핑을 지원하는 언어는 매우 많기 때문에 기본적인 int 자료형 이나 string자료형을 사용 할 때는 괜찮다 하지만 내가 정의한 객체에서 내 맘대로 obj.anythingDefined = 100; 이런식으로 어디선가 속성을 정의하고, 다른 함수에서 그 속성을 따로 명시하지도 않고 사용할때 매우 이상한 느낌을 받는다.
이걸 이해하고 실행 시켜준다고?? 가끔 나도 내 코드를 보다가 속성들이 너무 두서없이 정의되어 있어서 헷갈린다
타입스크립트
타입스크립트는 자바스크립트의 단점을 보완하기 위해 만들어진 정적 타입 언어(Static type language) 이다
자바스크립트에서 확장된 언어이기 때문에 기존 자바스크립트의 기능들을 전부 사용할 수 있고, 브라우저에서 실행하기 위해서 컴파일 이라는 변환 과정을 거쳐야 한다
타입스크립트 컴파일러 (TSC)
보통 컴파일러는 어휘분석(Lexical Analysis, Tokenizer) → 구문분석(Syntax Analysis, Parser) → 의미분석 및 타입체크(Semantic Analysis) → 코드 생성 및 최적화 (Code Generation and Optimization) 의 순서로 소스코드를 실팽 프로그램으로 변환한다
타입스크립트 컴파일러도 이와 비슷한데 한가지 다른점이 보통의 컴파일러는 코드 생성을 할때 기계어즉 바이트 코드로 변환하는데 타입스크립트 컴파일러는 타입스크립트 소스코드를 자바스크립트 코드로 변환한다
타입스크립트가 컴파일하는 과정 (번역) 타입스크립트 컴파일러가 컴파일하는 방법
관심있으면 한번 봐보자
나는 나중에 한번 봐보는걸로,,꼭 한번 보자 (나중에)
자바스크립트의 문제점
[JS Is Weird](https://jsisweird.com/)이 사이트에서 문제를 풀어보면 자바스크립트의 문제를 단번에 알 수 있다
너무 문법에 있어서 유연하다는것이 자바스크립트의 큰 단점이다.title: 대표적 예시
``` js
console.log(1 + '3'); // 결과 13
console.log(1 < '3'); // 결과 true
```
자바스크립트에서는 숫자와 문자열을 더하는 연산에서 숫자를 문자열로 변환시키고
비교연산에서 문자열을 숫자로 변환시켜서 연산을 진행한다
이러한 점들이 자바스크립트로 코드 작성을 힘들게 만든다타입스크립트의 특징
1. 정적 타입 지정 (Static Typing)
타입스크립트는 정적 타입 언어로 변수, 함수, 매개변수, 반환값 등에 타입을 지정할 수 있다. 타입을 명시함으로써 컴파일 타임에 타입오류를 발견할 수 있어 코드의 안정성과 신뢰성을 높인다
2. 인터페이스 (Interface)
타입스크립트는 인터페이스를 통해 객체의 구조를 정의할 수 있다. 인터페이스를 사용하면 특정 구조를 따르는 객체를 명시적으로 강제할 수 있어서 코드의 명확성이 증가한다.
3. 타입추론 (Type Interface)
타입스크립트는 변수 선언시 타입을 명시하지 않아도, 자동으로 초기값에 따라 타입을 추론한다. 이는 코드의 안정성을 높여준다
얼핏보면 자바스크립트에서도 지원하는거 아닌가? 할 수 있지만 아래의 예시를 보자 자바스크립트는 타입추론이 아니고, 동적타입이기 떄문에 변수에 할당된 값에 따라 타입이 결정되는데 반해 타입스크립트는 초기에 문자열로 추론을 했으면 그 이후로 다른 타입으로 바꿀시 에러가 발생한다
let value = "Hello"; // 타입스크립트가 이 변수를 string으로 추론
value = 42; // 컴파일 에러: 'number' 타입을 'string'에 할당할 수 없음4. 고급 타입 시스템 (Advanced Type System)
타입스크립트는 유니온 타입, 교차 타입, 제네릭 등 고급 타입 시스템을 지원한다. 이를 통해 복잡한 데이터 구조를 보다 명확하게 정의하고 다룰 수 있다.
5. 제네릭 (Generics)
타입스크립트는 제네릭을 사용하여 다양한 타입에 재사용 가능한 컴퍼넌트나 함수 등을 만들 수 있다.
제네릭은 코드의 유연성이나 코드의 재사용성을 크게 높혀준다 (C++의 템플릿 문법과 비슷한 개념)
function identity<T>(arg: T): T {
return arg;
}
let output1 = identity<string>("myString"); // 타입 T는 'string'
let output2 = identity<number>(42); // 타입 T는 'number'
6. 모듈 및 네임스페이스 지원
타입스크립트는 ES6 이상의 모듈 시스템을 지원하고, 네임스페이스를 사용해 코드를 모듈화하고, 충돌을 방지할 수 있다.
자바스크립트는 ES6은지원하지만, 네임스페이스같은 기능은 없다.
7. tsconfig.json을 통해 컴파일 설정
tsconfig.json 파일을 통해 프로젝트의 컴파일 옵션, 포함할 파일, 제외할 파일등 설정을 할 수 있다. 이를 통해 대규모 프로젝트에서 일관된 컴파일 환경을 유지할 수 있다
8. 명시적인 오류 처리
타입스크립트는 타입을 명시하기 때문에 컴파일 타임에 타입관련 오류를 명시적으로 처리한다 이러한 오류는 런타임 전에 검출되므로 런타임 오류를 사전에 방지 할 수 있다.
9. 향상된 IDE의 지원
정적 타입 시스템 덕분에 IDE에서 더욱 향상된 타입검사, 자동완성, 코드 탐색, 리팩토링 등이 강화된다. 이로서 개발자의 편의가 올라간다.
그럼에도 타입스크립트는
학습곡선이 존재하기 떄문에 자바스크립트를 하지 않고 타입스크립트부터 공부하려면 해야할 것들이 많고, 알아야할것들이 많다
또한 초기설정을 하거나 개발이전에 타입들을 미리 정의하고 개발하는 등 개발이전에 불필요한 시간소모가 많고, 타입들이 많아질 시 코드가 오히려 복잡해지고, 가독성이 떨어질 우려가 있다.
이러한 단점들에도 불구하고 대규모 프로젝트에서 코드의 안정성과 유지보수성을 크게 향상시킬 수 있는 도구로 타입스크립트는 널리 사용된다