개발지식

타입스크립트란 ?

dogdogdodo 2022. 6. 7. 21:40
반응형

🫠 타입스크립트란 ❓

🌱 자바스크립트에 정적 타입을 부여한 언어입니다. 타입스크립트는 자료형을 명시하는 방식을 지원하고 일반 자바스크립트로 컴파일 됩니다. 대규모의 리펙토링을 할 때 유지보수를 용이하게 할 수 있게 도와주며 자바스크립트를 사용할 때보다 에러는 적어집니다. 자료형이 있는 자바스크립트의 상위 집합이라고 볼 수 있습니다.

 

🫠 상위집합 그게 뭐지 ?

타입스크립트 파일에 일반 자바스크립트를 작성해도 되며 오류가 발생하지 않음을 의미합니다.

🫠 타입스크립트 동작 과정❓

1. 개발자가 타입스크립트로 작성합니다.

2. 작성한 타입스크립트 코드는 타입스크립트 컴파일러를 통해 파싱하여 타입스크립트 AST코드로 변환됩니다.

3. 타입검사기를 통하여 파싱된 타입스크립트 AST코드의 타입을 체크합니다.

4. 타입스크립트 AST코드를 자바스크립트 코드로 변환합니다.

(1-4) 과정은 타입스크립트 컴파일러에 의해 수행 됩니다.

5. 자바스크립트 코드를 자바스크립트 AST코드로 파싱합니다.

6. 자바스크립트 AST는 바이트 코드로 변환됩니다.

7. 런타임이라는 실행환경에서 바이트 코드를 실행합니다.

(5-7)과정은 자바스크립트 런타임에 의해 수행 됩니다.

 

☑️ 타입스크립트를 브라우저에서 실행시키려면 자바스크립트 코드로 변환하여 수행되어야 합니다.

(타입스크립트만으로는 불가능!) 

 

☑️  타입스크립트는 컴파일 단계에서 타입을 검사하여 사전에 오류 발견이 가능합니다.

 

 

🍄 AST(Abstract Syntax tree): 추상화 문법 트리

- 👩‍💻 프로그래밍 언어를 컴파일러를 통해 파싱하여 AST의 자료 구조형태의 코드로 만들어진다.

 

🍄 컴파일러(Complier)이란?
- 👩‍💻 프로그래밍 언어(고급언어)를 컴퓨터가 이해 할 수 있는 기계어로 변환시키는 과정을 말한다.


🍄  인터프리터(Interpreter)란?
- 👩‍💻프로그래밍 언어(고급언어)를 컴파일 변환 없이 바로 사용하는 언어를 말한다.


🍄 트랜스 파일러(Transplier)란?
- 👩‍💻한 언어로 작성된 소스코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는것을 말한다 
ex) 바벨 (ES6+ 코드를 ES5로 트랜스 파일한다), Typescript(Type+Javascript -> javascript)

 

 

🫠 타입스크립트 특징 

 

- 👩‍💻 타입스크립트는 컴파일 언어이자  정적인 타입(Static Type)이다.

자바스크립트에서는 어떤 타입을 반환하는지에 대해 명시하지 않는 동적 타입이였다. 이에 반해 타입스크립트는 컴파일 단계에서 타입을 체크하며, 정적타입으로써 타입에 대해 명시를 하여 발생하는 오류에 대해서 사전에 줄여준다.
  • 코드의 가독성을 높여준다
  • 자바스크립트의 단점인 타입 안정성을 보장해준다.

[예시] 동적 타입(js)과 정적 타입(ts)의 비교 예시 

// javascript (동적타입)
const sum = (a, b) => {
    return a + b;
}
sum('10', '20');  // 1020
// or
sum(10, 20); // 30 

// Typescript(정적타입)
const sum = (a: number, b: number) => {
    return a + b;
}

sum(10, 20); // 30

 

- 👩‍💻 객체지향 프로그래밍을 지원한다.

 타입스크립트는 ES6에서 새롭게 사용된 문법을 포함하고 있으며 클래스, 인터페이스, 상속, 모듈 등과 같은 객체 지향 프로그래밍 패턴을 제공한다.

 

 

- 👩‍💻 자바스크립트의 슈퍼셋이다.

 슈퍼셋은 상위 확장을 말하며, 타입스크립트는 자바스크립트의 모든 기능을 사용 가능하며 이외에 타입스크립트 만의 클래스, 인터페이스등 객체지향 프로그래밍 패턴이 모두 사용 가능한것을 의미한다.

 

 

 

🫠  타입스크립트 기본 자료형

 

  • boolean : true / false
  • number : 10진 16진 2진 8진 리터럴을 지원
  • string : 텍스트 형태의 데이터 저장하는 데 사용
  • Array : 배열 
	function ex(arg:Array<{label:string,value:string}>){
    	//작업 수행
    }
  • object : 객체 , 원시 자료형이 아닌 모든 자료형 값
  • 튜플 : 배열의 원소에 자료형을 정의
  • enum : 숫자 집합에 이름을 부여
  • any : 특정 변수의 값이 무엇이든 될 수 있음
  • void : 자료형이 없음
  • null undefined : 유용하지 않음, null 및 undefined값만 할당 할수 있기 때문
  • never : 절대 발생하지 않는 값, ex) 항상 오류를 발생시키는 함수 / 반환 아예 하지 않을 때
728x90
반응형