ionic 하이브리드 앱 개발 - #3 TypeSCript 기초

TypeScript는 일반 JavaScriipt로 컴파일 되는 아니 정확히 말해서 변환되는 타입 혹은 유형을 가지는 상위 자바스크립트 언어입니다. TypeScript는 특징적으로 정적 타이핑, 클래스, 인터페이스, 제너릭 등을 제공하며 ES6 및 ES7의 거의 모든 기능을 지원합니다. 명시적으로 TypeScript 자체적으로 ES표준을 지원하는 것이 아니라 컴파일 과정을 거치 JavaScript코드 가 ES 표준을 지원한다는 것을 유의해야 합니다.

TypeScipt 파일은 .ts 확장자로 저장됩니다. 타입이 지정된 JavaScript는 좀더 명확하게 코드를 이해할수 있으며, IDE를 통해 개발 시, Intelisense(자동완성) 기능을 사용할 수 있습니다

 

타입정의

기본타입은 boolean, number, string, Array 를 가질수 있습니다.

name: string = 'david';
age: number = 20;
isAlive: boolena = true;
hobbies: string[];
anyType: any;
noType= 50;
noType = 'Random String'

 

클래스

Java는 Object Oriented Programing 이지만, JavaScript는 Objective Programing 이라고 할수 있습니다. 클래스처럼 동작하기 위해 Prototype을 기반으로 상속을 구현한다고 할 수 있습니다. ES6에는 다음과 같은 클래스 구조로 표현할 수 있습니다.

class Person {
  name: string;
  
  constructor( personName: string ){
    this.name = personName;
  }

  getName() {
    return "the name is a " + this.name
  }
}

david: Person = new Person('david');

위에 예제는 Person 클래스를 정의했고 클래스를 초기화하기 위해 constructor라는 생성자를 사용하여 클래스를 초기화할 수 있습니다. 클래스에 대한 객체를 생성하기 위해 new 키워드를 사용합니다.

 

인터페이스

특정규칙을 따르는 유형을 정의하고 공통적으로 필요한 경우에 사용합니다. 인터페이스는 엔티티의 유형 및 함수의 타입을 지정할 경우에 구조적 타이핑을 제공합니다.

Interface ICar {
  engine: string;
  color: string;
  price: number;
}

class CarInfo implements ICar{
  engine: string;
  color: string;
  price: number;

  constructor(){
  
  }
}

 

 

모듈 및 imports

TypeSciprt는 ES6/ES7의 모든 기능 사용이 가능하며, 따라 외부 모듈패키지 관련하여 export 및 import 구문 사용이 가능합니다.

/** logic.ts */
export function process(){
  x = 20;
  y = x* 30;
}


/** exec.ts */
import { process } from './logic'

process();