타입스크립트 개론

seyeon·2025년 4월 7일
post-thumbnail

section 2

타입스크립트 일대기

타입스크립트는 2012년 마크 출신의 개발자 Anders Hejlsberg(앤더스 하일스버그)에게서 탄생했다.

C#의 창시자가 타입스크립트 만들었기에 similar 함.

타입스크립트 오픈소스임

오픈소스로 공개되어있어서ㅓ 앞으로도 발전 가능성이 매우 높음

타입스크립트 인기

현재 인기가 매우 대단하다. 다른 언어로 대체 불가!

현재 100명의 자바스크립트 개발자들 중에 딱 11명만 타입스크립트를 아직 사용하지 않고 있다고 한다...ㄷㄷ
영어권 뿐만 아니라 국내에서도 인기가 대단하다고 하며, 또 23년도 올해에 프로그래머스가 공개한 개발자 설문 조사 결과에 따르면 가장 배우고 싶은 언어 2등으로 타입스크립트가 선정되었다.

자바스크립트와의 관계

자바스크립트는 타입스크립트와 연관성이 있다.
타입스크립트는 자바스크립트를 더욱 안전하게 사용할 수 있도록 여러가지를 추가한 언어이다.
타입스크립트 = 자바스크립트의 확장판


자바스크립트에서는 변수의 타입을 프로그래머가 직접 정의할 수 있는 방법이 없는 반면,오른쪽 타입스크립트 코드에서는 변수의 이름 뒤에 콜론과 함께 이 변수의 타입을 정의할 수 있다.

이렇게 되면 이제 이 변수에는 숫자값 이외에는 넣을수가 없게 된다.

변수의 타입을 고정한 것이다

왜 타입스크립트가 필요한가?

이전에 자바스크립트 언어는 웹 브라우저에서만 동작하도록 만들어 졌고 또 아주 간단한 사용자 상호작용을 처리하기 위해 만들어졌기에 자바스크립트는 굳이 엄격한 문법을 갖출 필요가 없었다.
하지만 node.js 가 등장..
Node.js 탄생 이후에는 웹 브라우저에서만 실행할 수 있었던 자바스크립트를 이제는 어디서든 실행할 수 있게 되었다. 그러자 개발자들 자바스크립트 이용해 엄청나게 많은 프로그램 만들기 시작했다.

문제발생!!!
자바스크립트가 엄격하지 않고 유연하여 프로그램의 안정성을 낮추는 단점이 되어버림

그러하여..

자바스크립트를 더 안전하게 사용할 수 있도록 타입에 관련된 여러가지 기능을 추가한 오늘날 우리가 배우고 사용하게 될 타입스크립트가 등장한 것이다..


타입시스템?

타입 시스템이란 언어에서 사용할 수 있는 여러 가지 값들을 기준으로 묶어 타입으로 정하고, 코드의 타입을 언제, 어떻게 검사할지 등 타입과 관련된 규칙들을 모아둔 체계..이다

타입시스템 종류

정적 타입 시스템

코드 실행 전에 모든 변수의 타입을 고정적으로 결정하는 타입 시스템이다. C나 Java와 같은 엄격한 문법을 가진 언어들이 사용한다.

동적 타입 시스템

코드 실행 도중에 변수의 타입을 결정하는 타입 시스템이다. 파이썬이나 자바스크립트와 같은 유연한 문법을 가진 언어들이 사용한다.

정적 타입 시스템

C나 Java는 정적 타입 시스템을 사용하며, 변수 선언 시 타입을 명시해야 함.

코드 실행 전에 타입을 검사 -> 타입 오류를 사전에 방지 가능.

그러나 모든 변수에 타입을 명시해야 하므로 코드 작성이 번거롭고, 코드량이 증가하는 단점

동적 타입 시스템

자바스크립트는 동적 타입 시스템을 사용, 코드 실행 도중 변수의 타입을 결정하기 때문에 미리 타입을 설정하지 않아도 됨,
-> 변수 하나에 다양한 타입의 값을 넣을 수 있어 유연하다.
그러나 코드 실행 중 타입 오류가 발생할 수 있으며, 복잡한 프로그램에서는 이러한 오류를 사전에 방지하기 어렵다는 단점 ㅜ

타입스크립트는??

정적 타입 시스템 + 동적 타입 시스템 => 점진적 타입 시스템 사용

-> 코드 실행 전에 타입을 검사하여 안정성을 확보하면서도, 변수 타입을 일일이 명시하지 않아도 된다능

초기값을 기준으로 타입을 자동으로 추론하는 기능을 제공


타입스크립트의 동작 원리


대다수 프로그래밍 언어 동작

컴퓨터가 우리가 작성한 코드를 실행하기 위해 코드를 자기가 해석하기 쉬운 형태로 변환하는데 이 과정을 "컴파일" 이라 칭함

프로그래밍 언어 --> 기계어 === 컴파일

이걸 하는 애를 컴파일러 라고 칭함

자바나 자바스크립트같은 언어를 컴파일하면 바이트 코드라는 형식으로 변환되는데
컴퓨터가 이해할 수 있는 형태의 코드를 바이트코드라고 대체해서 설명!

컴파일러의 과정

컴파일러는 인간이 작성한 코드를 바로 바이트 코드로 변환하는게 아니라 AST(추상 문법 트리)로 먼저 변환함

AST란?
공백이나 주석 탭 등 코드 실행 필요없는 요소 전부 제거 후 트리 형태의 자료구조에 코드 쪼개서 저장해놓은 형태

ㄴ 어렵당..

AST로 변환 후에는 마지막으로 컴파일러가 AST를 바이트코드로 변환하고 컴파일이 종료된다.!

즉 컴파일러는 우리의 코드 -> AST -> 바이트코드
이런 바이트코드를 컴퓨터가 실행

타입스크립트 동작 과정

타입스크립트도 코드를 AST로 변환하는데,

그 후에 바이트코드로 변환하는게 아니라 AST를 보고 코드 상에 타입 오류가 있는지 없는지 검사하는 타입 검사가 실행된다.

타입오류가 있다면 텀파일 중단,

정상적인 코드라면 타입 검사를 성공적으로 통과하고 그 다음에는 AST를 바이트코드가 아니라 ‘자바스크립트 코드’로 변환 -> 컴파일 종료

즉 타입스크립트는 자바스크립트를 보다 안전하게 사용, 코드를 검사하는 용도로 사용


HEllo, TS world!



Node.js 초기화 : npm init
@types/node 라는 패키지를 설치 : npm i @types/node
타입스크립트 패키지 설치 : sudo npm i -g typescript

tsc 로 컴파일
ts-node 파일명 : 타입스크립트 파일 실행


타입스크립트 컴파일러 옵션 설정


기본 설정이 완료된 tsconfig.json 파일 생성: tsc --init

컴파일러 옵션

include 옵션
은 tsc에게 컴파일 할 타입스크립트 파일의 범위와 위치를 알려주는 옵션

target 옵션
은 컴파일 결과 생성되는 자바스크립트 코드의 버전을 설정하는 옵션

module 옵션
은 자바스크립트 코드의 모듈 시스템을 설정하는 module 옵션

+타입스크립트에서는 자바스크립트의 ES 모듈 시스템과 아주 유사하게 내보낼 때에는 export 를 사용하고 불러올 때에는 import를 사용

outDir 옵션
은 컴파일 결과 생성할 자바스크립트 코드의 위치를 결정

strict옵션
은 타입스크립트 컴파일러의 타입 검사 엄격함 수준을 정하는 옵션

타입스크립트의 모든 파일은 기본적으로 전역 파일(모듈)로 취급되는데, ndex.ts와 hello.ts 두개 안에 동일한 이름의 변수를 선언하면 오류가 발생!!!띠용띠용

이럴 때에는 각 파일에 모듈 시스템 키워드(아까 말했던 export, import)를 최소 하나 이상 사용해 해당 파일을 전역 모듈이 아닌 로컬(독립) 모듈로 취급되도록 만들어야 함

이걸 자동화 하는 옵션이 moduleDetection 옵션 ~!

ts-node의 옵션을 설정하면 ts-node로 타입스크립트 모듈을 실행할 수 있음

0개의 댓글