본문 바로가기
카테고리 없음

타입스크립트 - 이론정리

유누윤 2023. 4. 12. 17:42

 

01. 동적타입과 정적타입

 

동적타입(Dynamic Typing)

컴파일단계없이 인터프리터와 같은 코드해석기가 코드를 라인단위로 읽으면서 바로 코드를 실행할때

코드내의 변수 타입이 정해지는 방식

 

코드 컴파일 실행없이 바로 실행해야할때

 

정적타입(Static Typing)

코드내의 변수타입이 실행단계 이전에 정해지기 이전에 정해진다

 

타입을 코드에 명시적으로 표현하는 방식(코드가 실행되기 전에 타입을 정의하는 방식)

컴파일러가 컴파일 단계에 코드내의 변수들의 타입들을 분석해서 코드를 실행하기전에 기초적인 결함을 찾을 수 있음

 

컴파일단계는 시간이 좀 오래걸린다.

컴파일과정을 거쳐야하는 단점이 있으나 기본적인 결함이 없는 상태의 결과물을 얻을 수 있다.

 

컴파일러의 코드 리팩토링과 같은 최적화가 되어있어서 작성한 코드의 성능을 올려줌

 

 

- 초기개발하는 스타트업의 경우 그래서 빠르게 mvp모델을 동적타입언어로 개발후,

출시 후 어느정도 안정화가 되면 정적타입언어로 마이그레이션 하는 경우가 많다.

 

02. 자바스크립트의 한계

 

프로그래밍 언어 - 프로그래밍 언어의 역할

결국엔 프로그래밍이란 사람과 컴퓨터간의 커뮤니케이션을 위한 수단이다.

 

프로그래밍언어 - 인터프리트/스크립팅언어 

일련의 작업만을 수행하도록 하는 코드를 빠르게 작성하는데에 집중이 되어있기 때문에 

일반적인 컴파일 언어보다는 제한이 적음(자유도가 높다)

 

중/소규모 프로젝트, 신속이 개발이 필요한 프로젝트, 작업 자동화

 

javascript, python, ruby등

 

프로그래밍언어 - 컴파일언어

스크리트 언어와 반대로 복잡한 로직을 갖는 시스템을 위해 만들어진 언어.

코드 불안정성을 줄이기 위한 어느정도의 규칙을 가지고 있음

 

대규모 프로젝트 또는 안정성을 요구하는 프로젝트에 많이 사용함

 

C, C++, Java, Rust등

 

프로그래밍언어 - 목적에 따라 발전하는 프로그래밍 언어들

프로젝트의 규모, 프로젝트의 도메인(금융, 유통, 날씨등)이나 용도(시스템, 웹, 데이터분석등)

언어마다 어떤 시점에서 보면 부족한 점이 있을 수 밖에 없음

 

자바스크립트 성장기

웹페이지의 상호작용을 위해 개발된 작은 프로그래밍언어(불안정/미숙)

웹페이지에서의 통일된 스펙을 만들기위해 1997년에 ECMAScript가 제정됨

여러 브라우저에서 조금씩 다른 자바스크립트 스펙을 가지고 있었으며, ES5 전까지는 혼돈 그 자체

 

웹 프론트엔드 어플리케이션의 중요성이 생겨남

ES6부터 새로운 문법들을 추가함

매년 스펙을 업데이트 하고 있으며, 개발자들이 적극적으로 새로운 문법 및 기능들을 제안하기 시작하고 

다른언어대비 폭발적인 성장속도를 보여줌

 

자바스크립트의 문제 

대규모 프로젝트에 도입 시 많은 문제들이 발생

 

코드의 직관성

고질적인 동적 타입의 문제(매개변수, 리턴값)

예측할 수 없는 null, undefined등등

많은 문제가 있었다.

 

//1. 코드 직관성 + 동적타입의 문제
function foo(person){
    /*
    person이 어떤타입인지 알 수 없음.
    만약 객체라면 현재 코드에서 안에 있는 property가 무엇인지도 알 수 없음
    */
}

function foo(){
    let a = 1;
    let b = '2';

    console.log(a + b) // 결과값은 12이지만 보통 코드에서 원하는 답이 아니다
}

//2. 예측할 수 없는 null, undefined 문제
function foo(obj){
    console.log(obj.name); // MAX
    console.log(obj.key.name); //reference to undefined property name

    /* 결론적으로 obj에 뭐가 들었는지 한눈에 알 수가 없어 오류가 나오게 됨 */
}

foo({
    id : 1,
    name: "MAX",
})

 

함수를 작성할때 누가 항상 쓴다고 생각하고 작성해야한다.

내 함수를 남이 봤을때 함수이름과 매개변수를 보고 바로 이해하는게 좋다.

 

03. 자바스크립트에도 타입 시스템을 적용하자

왜 타입시스템이 필요한가

일반적인 프로그래밍 과정

코드 추가/수정 → 컴파일 → 커밋(CI) → 코드리뷰 → 빌드(CI) → 배포(CD)

 

뒷단계일수록 버그를 발견했을때의 처리비용이 기하급수적으로 늘어남

코드 수정에서 조금 더 엄격하게 작업을 하면 잠재적인 버그들이 현저히 줄어들 수 있다.

 

정적타입시스템의 장점

버그 발견 시점을 앞당길 수 있음

상대적으로 간결한 문서화

용이한 코드 수정 및 리팩토림

 

Microsoft의 TypeScript

  • C#, java의 영향
  • 2012년 출시
  • 당시 확정되지 않았던 ES6를 기준으로 하여 디자인
  • 자바스크립트의 확대집합(superset), 즉 자바스크립트의 확장판이기 때문에
    자바스크립트로 코드를 작성해도 타입스크립트가 돌아간다.
  • 자바스크립트의 정적 타입 시스템을 도입한 모델
  • tsc(TypeScript Compiler)가 타입스크립트 코드를 읽고 분석 후,
    최적화 된 자바스크립트 코드로 변환해준다. (dogfooding : 자기들이 만든 코드를 자기들이 테스트 해보는것)
    현재 TS → JS로 컴파일 해주는 컴파일러는 여러가지가 있다 (ex : swc, esbuild)

왜 타입스크립트를 써야하나?

  • 대규모 커뮤니티 = 많은 사용자
  • 다수의 타입스크립트 기반 프로젝트 = 잘 갖추어진 생태계
  • 많은 프레임워크 또는 런타임 지원(React, Vue, Angular, Node.js...)
  • 사용자가 많은 IDE에서 적극적으로 지원

04. 타입스크립트 기본 구성

1. tsc(TypeScript Compiler) : 타입스크립트 전용 컴파일러

2. TS파일 + 추가 TSX(TypeScript Extension)

3. ts.config.json : 타입스크립트 컴파일러를 튜닝하기 위한 설정파일

 

 

 

 

 

 

 

 

티스토리툴바