Modern JavaScript TypeScript

 

---

 

Typescript superset

 

1.  TypeScript 배경

• JavaScript 태생적 한계 : Prototype-based Object Oriented Language, Scope/This, 동적타입언어
• TypeScript는 Transpiler를 사용하지 않아도(Babel) ES6기능을 자바스크립트 엔진(브라우저/Node.js)에서 사용 가능

 

---

2. TypeScript 장점

• 정적타입 : 명시적인 설정은 코드 가독성을 높여 디버깅이 쉬워짐

//Parameter에 타입을 정의
function sum(a: number, b: number) {
  return a + b;
}

sum('x', 'y');
// error TS2345: Argument of type '"x"' is not assignable to parameter of type 'number'.

 

 

• 도구의 지원 : IDE(통합개발환경)을 포함한 다양한 도구의 지원을 받음, IDE에 타입정보를 제공하므로 IntelliSense, Code Assist, Type Check, Refectoring을 수준높게 활용
• 객체지향 프로그래밍 지원 : Interface, Generic 등 객체지향 프로그래밍 지원으로 프로젝트를 쉽게 구성하도록 지원 (Java/C#)
• ES6 / ES Next 지원 : 표준화가 유력한 스펙을 선제적으로 도입하므로, 새로운 스펙의 유용한 기능을 안전하게 도입하기에 유리

 

 

---

3. 개발환경 구축 

• Node.js 설치
• Transpiling : TypeScript 컴파일러를 통해 자바스크립트로 파일 변환 (.ts)

//1. typescript 설치
$ npm install -g typescript

//2. 설치버전확인
$ tsc -v

//3. transpiling : tsc 명령어 뒤에 transpiling 대상 파일명 지정 (.ts 생략가능)
$ tsc person

//4. 자바스크립트 ES6버전 변경 : 자바스크립트 버전은 ‘ES3’(default),‘ES5’,‘ES2019’,‘ESNEXT’
$ tsc person -t ES2015

//5. transpling person.js 실행
$ node person

// Class 예시
class Person {
    constructor(name) {
        this.name = name;
    }
    sayHello() {
        return "Hello, " + this.name;
    }
}
const person = new Person('Lee');
console.log(person.sayHello());

//6. tsconfig.json : tsc 옵션 설정파일 생성 (옵션지정 자동화)
$ tsc --init

//7. tsconfig.json 적용
$ tsc

//8. Transpiling 대상 파일 내용 변경시 감지하여 자동으로 Transpiling
$ tsc --watch
21:23:30 - Compilation complete. Watching for file changes.