타입스크립트

타입스크립트는 마이크로소프트가 개발하고 유지하고 있는 오픈소스 프로그래밍 언어로 2012년 말 처음 발표되었다.

타입스크립트란?

타입스크립트는 자바스크립트의 상위 집합이다.
이말은 즉, 모든 자바스크립트는 타입스크립트이지만 반대로 타입스크립트는 별도의 문법을 가지고 있기 때문에 일반적으로 유효한 자바스크립트 프로그램이 아니다.

타입스크립트를 사용하는 이유?

자바스크립트의 시장점유율과 함께 다양한 라이브러리, 프레임워크가 등장했는데 이러한 라이브러리와 프레임워크 조차 타입스크립트를 기반으로 만드는 기업이 늘어났다.
또한 타입스크립트를 사용하게 되면 자바스크립트에서 발생되는 예상치 못한 에러들을 조기에 식별하고 해결할 수 있어서 유지보수에 뛰어나다.

예를 들어 다음과 같은 상황이 있을 수 있다.

function anythingWork(name, age){
 console.log(`${name}${age}살 입니다.`
}

anythingWork(20, "이강민");
// 20은 이강민살입니다.

만약 타입스크립트를 적용한다면 타입체커가 서로 다른 타입의 매개변수를 조기에 식별하여 오류를 방지할 수 있다.

function anythingWork(name : string, age : number){
 console.log(`${name}${age}살 입니다.`
}

anythingWork(20, "이강민");
//~~number 형식은 string형식에 할당할 수 없습니다. 

위와 같이 타입스크립트는 타입스크립트 컴파일러인 트랜스파일러를 통해 자바스크립트 코드로 변환되어 그 과정에서 타입체커를 통해 타입에러를 걸러낼 수 있다.

때문에 대규모 프로젝트를 개발하는 기업에서는 타입스크립트를 선호한다.

타입스크립트의 동작 원리

  1. 타입스크립트 코드 작성 및 실행
  2. 타입스크립트 컴파일러(tsc, typescript compiler)를 통해 타입스크립트 AST코드로 변환
  3. 타입체커를 통한 타입스크립트 AST코드 체크
  4. TSC를 통한 자바스크립트 코드로 변환
  5. 자바스크립트 엔진을 통한 자바스크립트 AST 코드로 파싱 및 바이트 코드 변환
  6. 런타입 환경에서 바이트 코드 실행
  1. AST(Abstract Syntax tree) : 추상화 문법트리
  • 프로그래밍 언어(고급언어)를 컴파일러를 통해 파싱하여서 AST의 자료 구조형태의 코드로 만들어진다.
    추상화 문법트리란?

2.컴파일러(Complier)이란?

  • 프로그래밍 언어(고급언어)를 컴퓨터가 이해 할 수 있는 기계어로 변환시키는 과정을 말한다.
    ex) 소스코드 → 바이너리 코드으로 변환
  1. 인터프리터(Interpreter)란?
  • 프로그래밍 언어(고급언어)를 컴파일 변환 없이 바로 사용하는 언어를 말한다. 단, 자바스크립트는 엔진을 통해서 AST를 통해 그 바이너리 코드를 인터프린팅 하는 것이다.
    ex) 자바스크립트 .

4.트랜스파일러(Transplier)란?

  • 어떤 프로그래밍 언어로 작성된 소스코드를 또 다른 프로그래밍 언어로 된 소스코드로 바꿔주는 프로그램

타입스크립트 고유 문법

타입주석과 타입 추론

let a:number = 10;
let m = 2;

타입스크립트는 변수를 선언할 때 클론 뒤에 타입을 작성하게끔 되어 있으며 이를 타입 주석이라고 한다.
변수 부분의 타입이 생략도 가능한데 이때 대입 연산자의 오른쪽 갑을 분석하여 타입을 결정하고 이를 타입 추론이라고 한다.

인터페이스

인터페이스는 객체지향언어에서 사용될 때 인터페이스 내부의 필드들의 내용을 강제하기 위해 사용된다.
마찬가지로 타입스크립트도 객체의 변수를 강제 하기위해 사용되며 다음과 같이 사용된다.

interface Person{
  name : string
  age : number
}

let PersonInterface : Person = {name : "kangmin", age : 20}
// 변수명 뒤에 클론을 붙이고 인터페이스 명을 붙이면 해당되는 인터페이스를 상속시키는 것이다.
// 객체를 선언할때 변수의 갯수나 타입이 맞지 않으면 에러를 리턴한다.

튜플

튜플은 물리적으로 배열과 같으나 배열에 저장되는 아이템의 데이터 타입이 모두 다르면 튜플이라고 한다.

let Array : [string, boolean, number] = ["kang", false, 20]; // 튜플
let Fruits: string [] = ["apple", "banana", "kiwi"]; //배열

제네릭 타입

제네릭 타입은 다양한 타입을 한꺼번에 취급 할 수 있게 해준다.

class Container<T>{
  constructor(public value : T){ }
}

let numberContain : Container<number> = new Container<number> (10)

let stringContain : Container<string> = new Container<string>("안녕")

위와 같이 타입이 들어갈 수 있는 <T>를 선언하면 여러 타입을 한꺼번에 취급이 가능하다.

대수 타입 (Abstract data type, ADT)

추상 데이터 타입을 의미하기도 하지면 대수 타입(algebraic data type)이라는 의미로도 사용한다.
추상 데이터 타입이란, 다른 자료형의 값을 가지는 자료형을 의미하고 크게 합집합타입과 교집합 타입이 있다.
합집합은 "|" 기호를, 교집합 타입은 "&"기호를 사용해 다음 코드처럼 여러 타입을 결합해서 만들 수 있다.

type NumberOrString = number | string // 합집합 타입 예 
type AnimalAnd Person = Animal & Person //교집합 타입 예

타입스크립트 컴파일러 설치

노드.js가 설치 되어 있다면 터이널에서 다음과 같이 명령어를 입력하여 타입스크립트를 설치한다.

npm i -g typescript

노드 패키지를 추가하기 위해 다음 명령어를 실행한다.

npm i -D typescript ts-node

또한 기본적인 타입패키지를 설치 하기 위해 추가로 명령어를 실행

npm i -D @types/node

타입스크립트 프로젝트는 기본적으로 tsconfig.json파일이 있어야 한다.

tsc -init

위 명령어로 tsconfig를 새로 만들자.

js 대신 ts를 붙여서 타입스크립트를 사용하면 된다.

profile
AllTimeDevelop

0개의 댓글

관련 채용 정보

Powered by GraphCDN, the GraphQL CDN