ionic 하이브리드 앱 개발 - #1 TypeScript 시작하기

TypeScript 설치

TypeScript 도구를 얻는 방법에는 크게 두 가지가 있습니다.
  • npm을 통해 (Node.js 패키지 관리자)
  • TypeScript의 Visual Studio 플러그인 설치
Visual Studio 2017 및 Visual Studio 2015 Update 3에는 기본적으로 TypeScript가 포함되어 있으며, Visual Studio와 함께 TypeScript를 설치하지 않았다면 별도록 다운로드 할 수 있습니다.
https://www.typescriptlang.org/#download-links
npm 사용자는 터미널에 아래와 같이 입렵하여 설치할 수 있습니다.
> npm install -g typescript

TypeScript 파일 만들기

편집기에서 greeter.ts에 다음 JavaScript 코드를 입력하십시오.

function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

컴파일 .ts

자바스크립트 소스코드를 .js가 아닌 .ts 확장자로 저장합니다. 기존 자바 스크립트 앱에서 바로 복사 / 붙여 넣기를 할 수 있습니다.
명령 줄에서 TypeScript 컴파일러를 실행합니다.

tsc greeter.ts
결과는 입력 한 JavaScript와 동일한 greeter.js 파일이 생성됩니다.  이제 생성된 .js파일은 웹어플리케이션에서 사용할 수 있습니다.
다음과 같이 'person' 함수 파라메터에  string 타입을 지정합니다.

function greeter(person: string) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

Type annotations

TypeScript의 타입은 변수 명 뒤에 :을 지정한 후 타입 명을 명시할 수 있습니다. 위에서 greeter 함수를 단일 string 매개 변수로 호출 할 예정이며,  greeter 함수 호출할때 배열을 넣어 호출하게 되면,

function greeter(person: string) {
    return "Hello, " + person;
}

let user = [0, 1, 2];

document.body.innerHTML = greeter(user);
다시 컴파일 시도시 에러가 발생합니다.

error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
오류가 있었지만 greeter.js 파일은 생성 되며, 코드에 오류가 있어도 TypeScript를 사용할 수 있습니다. 그러나이  경우 TypeScript는 코드가 예상대로 실행되지 않을 것이라고 경고합니다.

인터페이스(Interfaces)

firstName 및 lastName 필드가있는 객체를 설명하는 Person 이라는 인터페이스를 사용해 보겠습니다. TypeScript에서는 두 가지 유형이 내부 구조가 호환되면 호환됩니다. 이것은 우리가 명시 적으로 implements 절없이 인터페이스가 요구하는 모양을 가짐으로써 인터페이스를 구현할 수 있게 해줍니다.

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Jane", lastName: "User" };

document.body.innerHTML = greeter(user);

클래스(Classes)

마지막으로 클래스를 사용하여 예제를 확장해 보겠습니다. TypeScript는 클래스 기반 객체 지향 프로그래밍과 같은 JavaScript의 새로운 기능을 지원합니다.
여기에서는 생성자와 몇 개의 공개 입력란을 사용하여 Student 클래스를 만듭니다. 클래스와 인터페이스가 잘 작동하여 프로그래머가 올바른 수준의 추상화를 결정할 수 있습니다.
또한 주목할 것은 생성자에 대한 public  인수를 사용하면, 이 이름을 사용하여 클래스의 속성을 자동으로 만들 수 있습니다.

class Student {
    fullName: string;
    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person : Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);
tsc greeter.ts를 다시 실행하면 생성 된 JavaScript가 이전 코드와 동일하다는 것을 알 수 있습니다. TypeScript의 클래스는 JavaScript에서 자주 사용되는 것과 동일한 프로토 타입 기반의 약어입니다.

Typescript 앱 실행하기

greeter.html에 다음을 입력하십시오.

<!DOCTYPE html>
<html>
    <head><title>TypeScript Greeter</title></head>
    <body>
        <script src="greeter.js"></script>
    </body>
</html>
브라우저에서 greeter.html을 열어 첫 번째 간단한 TypeScript 웹 응용 프로그램을 실행하십시오!
실행결과를 좀더 간편하게 확인하기 위해 여기 서는 Typescript playground에서 실행시켜 보도록 하겠습니다.
https://www.typescriptlang.org/play/
image
좌측에 위에 작성된 Typescript 코드를 입력하면 우측에 Javascript로 자동 변화되며 Run버튼을 클릭하면 실행결과를 확인 할수 있습니다.
image







댓글

주간 인기글

남산 케이블카 이야기

Kotlin, Java 그 다음?

[정보] 인스타그램은 당신의 소리를 '듣고' 있을 수도 있습니다

[Angular] 모델, 값이 바뀌었는데 화면 template 이 업데이트 되지 않을 때 조치 팁

[앱 디자인] 디자인 가이드 만들기 - 아이폰