해당 글의 목적은타입 스크립트(Typescript)란무엇이며, 왜 써야 하는지에 대해 이해를돕기 위해서 작성한 글입니다.
1) 기술 동향
하단의 사진은 ‘Stack Overflow’ 커뮤니티에서 조사한 자료로 2020년과 2021년에 가장 인기 있는 언어에 대해서 조사한 자료입니다. 해당 그래프를 확인해보면, 2020년에 타입 스크립트는 25.4%라는 많은 관심을 받는 언어에서 근래 2021년에 와서는 30.19%라는 더 많은 관심을 받는 언어로 선택 되었습니다.이는 Node.js, java를 압도할 만큼의 관심을 갖는 언어가 되었습니다.
💡 타입스크립트는 ‘Javascript’의 언어에서 파생되어서 나온 언어입니다. 그렇기에 ‘Typescript’를 이해하기 위해서는 ‘Javascript’ 언어에 대한 이해는필수적입니다.
💡 타입 스크립트는 Microsoft에서 개발하고 유지/관리되는 Apache 라이센스가 부여된 오픈 소스입니다. 타입 스크립트(Typescript)는 자바스크립트의 슈퍼셋(Superset)이며, 자바스크립트에 ‘타입'을 부여한 언어입니다.
[더 알아보기] 💡슈퍼셋(Superset)이란? - 슈퍼셋은 상위 집합을 의미합니다. 다시 말해서 모든 자바스크립트 프로그램은 이미 타입 스크립트 프로그램이며, 반대로 타입 스크립트는 별도의 문법을 가지고 있기 때문에 유효한 자바스크립트 프로그램이 아닙니다.
💡타입이란? - 기본형 타입(단일 타입)으로는 7가지(string, number, boolean, null, undefined, symbol, bigint)와 유니온 타입(다중 타입, =교집합)과 인터섹션 타입(다중 타입, =합집합), 옵셔널 타입 등과 같은 타입을 변수, 파라미터, 함수에 부여한 것을 의미합니다.
3) 타입 스크립트는 어떻게 동작하는가?
타입 스크립트의 주요한 동작은 ‘컴파일' 단계에서 사전에 타입 오류를 ‘타입 체커(TypeChecker)'를 통해서 체크하여 ‘런타임' 동작에 발생하는 오류에 대해 사전에 찾아냅니다. 그리고 타입 스크립트 언어는 최종적으로 ‘자바스크립트 언어’로 변환되어서 런타임 환경에서 동작합니다. 단, 컴파일 단계에서 타입 스크립트로 ‘타입 체커'로 해당 문제점을 찾더라도 ‘런타임' 단계에서 오류 없이 지나갈 수 있습니다. (자바스크립트 내에서 문법 오류가 아니라고 판단하여 런타임 환경에서 수행될 수 있습니다)
[타입 스크립트동작 과정] 1. 개발자가 '타입 스크립트 코드'로 작성을 한다 2. 작성한 타입 스크립트 코드는 '타입 스크립트 컴파일러(tsc)'를 통해 파싱 하여'타입 스크립트 AST 코드'로 변환된다. 3. '타입 검사기(Typechecker)'를 통하여 파싱 된 '타입 스크립트 AST 코드'의 타입을 체크한다. 4. 타입스크립트 AST의 코드를 '자바스크립트 코드'로 변환한다. - 해당 과정까지는 '타입 스크립트 컴파일러(tsc)'에 의해 수행이 됩니다.
5. 자바스크립트 코드를 '자바스크립트 AST 코드'로 파싱 한다. 6. 자바스크립트 AST를 '바이트 코드'로 변환된다. 7. 런타임(runtime)이라는 실행환경에서 바이트 코드를 실행한다. - 해당 과정까지는 '자바스크립트 런타임(js 엔진, node.js)'에 의해 수행이 됩니다.
[더 알아보기] 💡 AST(Abstract Syntax tree): 추상화 문법 트리 프로그래밍 언어(고급언어)를 컴파일러를 통해 파싱 하여서 AST의 자료 구조 형태의 코드로 만들어진다. * 참고 : 소스코드를 AST로 만드는 과정을 볼 수 있는 사이트 [ https://ts-ast-viewer.com/# ] 💡 컴파일러(Complier): 프로그래밍 언어(고급언어)를 컴퓨터가 이해할 수 있는 기계어로 변환시키는 과정을 말한다. ex) 소스코드 → 바이너리 코드로 변환 💡 인터프리터(Interpreter): 프로그래밍 언어(고급언어)를 컴파일 변환 없이 바로 사용하는 언어를 말한다. ex) 자바스크립트 💡 트랜스 파일러(Transplier): 한 언어로 작성된 소스코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것을 말한다 ex) 바벨 (ES6+ 코드를 ES5로 트랜스 파일 한다), Typescript(Type+Javascript -> javascript)
4) 타입 스크립트 언어를 사용해야 하는 이유
1. 개발자들의 ‘만족감’을 느끼는 언어 중 하나이다.
해당 그래프는 ‘JamStack’이라는 커뮤니티에서 2021년‘Satisfaction’(만족도)와 ‘Usage’(사용도)를 개발자의 참여에 따라서 측정을 한 그래프입니다. 이에 ‘사용도’가 가장 높은 언어는 ‘Javascript’가 차지하였고, ‘만족도’가 가장 높은 언어는 ‘Typescript가 차지하였습니다. Typescript는 '사용도’라는 측정 점수에는 Javascript에 비해 낮은 점수를 차지하였지만, 만족도에서는 상당히 높은 점수를 차지하였다는 것이 주목할 사항입니다.
[출처] Jamstack 커뮤니티 Survey
불러오는 중입니다...
2. 타입 스크립트는 ‘정적인 타입(Static Type)’ 언어이다.
자바스크립트는 어떤 타입을 반환하는지에 대해 명시하지 않는 ‘동적타입’이다. 이에 반해 타입 스크립트는 컴파일 단계에서 타입을 체크하며, ‘정적 타입’으로 변수나 함수에 대해서 명시적으로 타입을 지정하여 발생하는 오류에 대해서 사전에 줄여 준다. 또한 ‘도움말’ 및 ‘자동완성’ 기능을 지정만 한다면 항시 이용할 수 있다.
2.1.동적 타입과정적 타입
해당 변수가 어떤 형태의 구조인지 미리 지정해두기 때문에 코드의 가독성이 높아지며, 추후 유지보수에서도 타입 추론이 가능하기에 유지보수에 용이하다.(* 단, 정적 타입은 빠른 개발에 있어서는 동적 타입보다 속도가 느리지만, 상대적으로 안정성은 상당히 높다.)
[예시]Javascript(동적 타입)vsTypescript(정적 타입) 해당 예시에서는 ‘Javascript’를 사용할 때 해당 타입을 동적으로 인식하여 String / number로 각각 다른 값을 도출해 내고 있다. ‘Typescript’를 사용할 때 해당 타입을 정적으로 지정하여 number로 지정해둔다면 String이 들어올 경우 컴파일 단계에서 에러로 나타내고 있다.
// 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'); // Error
sum(10, 20); // 30
2.2. ‘도움말’ 및 ‘자동완성’ 기능
해당 기능들을 언제든 사용이 가능하기에 역시 타입 추론 및 오타방지에 용이하다.
[예시] ‘도움말’ 및 자동완성 기능 사용 왼쪽은 Javascript만을 사용해서 개발을 한 경우이고, 오른쪽은 Typescript의 Type 구조체를 만들어서 사용한 예시입니다. 오른쪽과 같이 Type이라는 구조체를 미리 만들어 두면, ‘도움말’과 ‘자동완성’ 기능을 사용할 수 있다. 이는차후에 발생할 오류에 대해서 방지해준다
💡해당 부분에 오류가 발생하지 않는다.
3. 타입 스크립트는 ‘컴파일’ 단계에서 사전 오류를 방지한다.
타입 스크립트는 ‘컴파일’ 단계에서 소스 내에서 발생할 오류에 대해서 미리 캐치를 하여서 추후 운영에서 발생할 수 있는 오류를 방지할 수 있다.
타입 스크립트의 수행과정
타입스크립트 코드 -> 컴파일 → ('타입체커'로 타입 체크 -> 자바스크립트 변환) → 런타임 동작
[예시] 하단의 사진은 이전 프로젝트에서 발생한 오류에 대해 Jennifer reporting을 한 화면입니다. 해당 오류에서는 ‘t’라는 Object 내에서 userSq라는 값을 불러올 때 발생하는 에러였습니다. 여기서 문제가 되었던 부분은 Object내에 userSq라는 값이 구성이 되어 있지 않았는데 불러와서 발생하는 오류였고, 컴파일 단계에서는 추적이 불가능하여서 ‘런타임’ 단계에 가서 오류로 발생한 에러였습니다.
이에 대해서 ‘t'의 Object 타입을 ‘Typescript’의 ‘Type’이나 'interface’의 정적 타입으로 지정을 했다면 발생하지 않았을 에러라고 판단이 됩니다.
4. 객체지향 프로그래밍을 지원한다
타입 스크립트는 ES6에서 새롭게 사용된 문법을 포함하고 있으며 클래스, 인터페이스, 상속, 모듈 등과 같은 객체 지향 프로그래밍 패턴을 제공하여 객체 지향 언어와 같이 구성이 가능합니다.
[더 알아보기] Typescript의 객체지향이란? 서로 관련 있는 데이터와 함수를 객체(하나의 역할을 수행하는 메서드와 변수의 묶음)로 정의해서 서로 상호작용할 수 있도록 프로그래밍해나가는 것을 말한다. 각각의 객체는 메시지를 주고받고, 데이터를 처리할 수 있다.
4.1.타입 스크립트클래스
class Foo {
public x: string;
protected y: string;
private z: string;
constructor(x: string, y: string, z: string) {
// public, protected, private 접근 제한자 모두 클래스 내부에서 참조 가능하다.
this.x = x;
this.y = y;
this.z = z;
}
}
4.2. 타입스크립트 인터페이스
// 인터페이스의 정의
interface Todo {
id: number;
content: string;
completed: boolean;
}
4.3. 타입스크립트 모듈
export function on(
el : Element|Document,
type : string,
handler : (e:Event)=>void,
is_capture : boolean = false
):void {
el.addEventListener(type, handler, is_capture);
}
export function off(
el : Element|Document,
type : string,
handler : (e:Event)=>void,
is_capture : boolean = false
):void {
el.removeEventListener(type, handler, is_capture);
}
// 모듈을 만들어서 불러오기가 가능하다
import { on, off } from './Dom/events';
'Typescript'를 사용하게 되면 빠르게 개발을 하는데에 있어서 구조를 구성해야 하기 때문에 시간이 오래 걸릴 수 있고, 추가적인 문법을 이해해야 하는데 시간이 소요됩니다. 그리고 개발 취향이 있기에 'Typescript'가 정답이다라고 판단을 할 수는 없지만 'Javacript'의 가장 큰 단점으로 꼽히는 문제로 타입의 불안정성에 대해서 보장해주는 점과 추후 발생할 수 있는 오류에 대해서 줄여준다는 점에서 높게 평가된다고 생각합니다. 각각의 상황을 판단하여서 도입을 하면 좋을 것 같습니다.
