Javascript

[스크랩] Typescript 간략 설명

heybrro 2020. 1. 9. 22:42

원본 링크

https://skout90.github.io/2017/08/12/Typescript/1.%20typescript%EB%9E%80/

 

01. Typescript란

타입스크립트는 자바스크립트를 확장한 언어. 자바스크립트 ECMA(European Computer Manufactureres Association) 표준을 따르고 있기 때문에 ECMA 표준에 대해 알 필요가 있음. ECMA 스크립트의 역사자바스크립트는 ECMA의 표준을 따름. ES1부터 ES7스크립트 표준까지 진행돼옴. ES1(ECMA-262 Ed. 1)

skout90.github.io

 

01. Typescript란

2017.08.12 in Typescript

타입스크립트는 자바스크립트를 확장한 언어. 자바스크립트 ECMA(European Computer Manufactureres Association) 표준을 따르고 있기 때문에 ECMA 표준에 대해 알 필요가 있음.

ECMA 스크립트의 역사

자바스크립트는 ECMA의 표준을 따름. ES1부터 ES7스크립트 표준까지 진행돼옴.

  • ES1(ECMA-262 Ed. 1)

    97년 js와 JScript가 동시에 나오자, ES1이 재정됌.

  • ES2

  • ES3

    브라우저 지원 시작

  • ES4

    불완전한 표준으로, 사용하지 않기로 합의

  • ES5

    • 현재 자바스크립트가 지원할 수 있는 표준
    • JSON/Accessors
    • 2009 년 Node.js 플랫폼이 등장.(JS가 서버 프로그래밍이 가능한 언어로 확장)

  • ES6

    • TypeScript의 기반이 되는, 클래스 문법과 모듈 기능 추가
    • IE9 부터 지원

  • ES7

    • 장식자(decorator)와 Async/Await 특징 추가

 

타입스크립트는 ES7 이하의 표준을 포함.

타입스크립트 특징

타입스크립트는 자바스크립트를 확장한 언어로, JS 언어의 특성을 침범하지 않고 최신 ECMA 표준을 지원.

  • 컴파일 언어, 정적 타입언어

    • JS는 인터프리터 언어지만, TypeScript는 컴파일언어로 코드 수준에서 미리 타입을 체크하여 오류를 체크해냄. 단 전통적인 컴파일 언어와는 다르게, 링킹 과정이 생략되어 있음.

  • 낮은 버전의 ECMA 수용

    • 새로운 표준이 반영되더라도 ES5 브라우저에 대응할 수 있는 타입스크립트 컴파일러를 지원.

    tsconfig.json 파일의 compilerOptions -> target 필드에 ES 버전 설정 가능

  • 타입 기반 언어

    • 타입스크립트 = 자바스크립트 + 타입
    • 컴파일 단계에서 타입 오류를 잡아낼 수 있고, 코드 어시스트 기능도 지원받을 수 있음.
    • 이것은 암묵적 형변환, 호이스팅, 복잡성 문제 해결

  • 변환 가능 언어

    • ECMA 표준을 따른다면 컴파일 도구를 이용해 새로운 언어로 마이그레이션 할 수 있도록 지원

타입과 문자열

  • let 선언자

let 변수명; 또는let 변수명 : 타입;와 같이 사용된다.

1. 현재 블록내에서만 유효범위를 가지는 변수 선언. ES6 표준에서 처음 추가된 특징으로, 호이스팅 문제를 해결.

호이스팅 문제란?

   

{}안에 선언된 emotion은 지역 스코프이지만, 동일한 이름을 가진 전역 스코프의 변수값을 변경해버리는 문제

  1. let은 중복 선언이 불가능. var는 중복선언이 가능.
  2. 아래 선언한 변수를 위에서 사용할 수 있음.
  • 예제 소스
   

배열 타입

  • 대괄호 타입
   
  • 제네릭 타입
   
  • 다차원 배열
   

유니언 타입

타입을 제한하는 기능. 타입 | 타입 | 타입

  • 변수 선언
   
  • 매개변수
   

문자열 표현 및 디스트럭처링

문자열을 저장할때 `` 을 사용하여 html 태그textarea`에 입력하는 것처럼 개행문자를 편하게 입력시킬 수 있음.

디스트럭처링 기능을 이용하여, 배열이나 객체를 효율적으로 할당 할 수 있음.

  • 소스코드(ES6)
   

화살표 함수

ES6 표준에 포함된 익명함수를 좀 더 간략하게 표현.

   

게터 함수와 세터 함수

get 함수와, set 함수를 만들어 코드를 삽입할 수 있다.

{set 속성이름(매개변수 선언) { ... }}

{get 속성이름() { ... }}

  • 일반적인 JS 코드
   

set 과정에 추가 코드를 넣을 수 없다.

  • 리터럴 형태 게터함수와 세터 함수
   

리터럴형태에서는 파라미터 타입을 설정할 수 없다.

  • 클래스 형태 게터함수와 세터함수
   

클래스

  • 클래스 선언
   
  • public 접근자 이용, 생성자 매개변수 전역변수 만들기
   

클래스 상속

타입스크립트에서는 상속 기능을 제공

   

인터페이스

구현 클래스를 강제함으로써 클래스 형태에 일관성을 유지할 수 있음.

   

추상 클래스

구현과 강제를 동시에 수행하는 클래스, 추상 메서드는 abstract 키워드를 붙여서 형식만 정의, 구현 메서드는 abstract를 생략한 채로 정의

   
   

Reference

저작자표시 (새창열림)