adSense 900*70


TypeScript - 정리 JavaScript

TypeScript

  • Javascipt은 타입이 있긴 하지만 compile이 없는 interpreter 언어라서 실행 시점에 타입에러가 발생이 된다. 이런 단점(?)을 개선하기 위해 TypeScript는 type을 선언할 수 있도록 하고, compile시점에 타입에러등을 잡아낼 수 있는 기능을 제공한다.

  • IDE툴 등을 사용할때, 특정 타입의 정의를 보고 싶을때 소스와 연결된 기능을 TypeScript를 사용하게 되면 사용할 수 있다.

Install

On Mac

Install NodeJs first

install home brew
 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
install NodeJs with homebrew
Install
brew install node
version check
node --version
Install TypeScript
Install
npm install -g typescript

-g 옵션은 global하게 설치하여 모든 사용자가 node를 사용할 수 있게 하는 옵션.

만약 권한 문제로 에러가 난다면 아래의 명령어 실행

sudo npm install -g typescript
version check
tsc -version

Sample project and codes

Project

Name and structure


  1. project name: sample-project
  2. project structure (guide line: STYLE GUIDE)

     sample-project (root)
    - app
    - core

Examples

TypeScript Quick start

Hello World
super simple

  1. file name: greeter.ts
  2. codes

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

    var user = "Jane User";
    console.log(greeeter(user));
  3. compile

     tsc greeter.ts
  4. run

     node greeter.js
Type annotations

  1. file name: greeter-type-anno.ts
  2. codes

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

    var user = [0, 1, 2];
    console.log(greeter(user))
  3. compile

     tsc greeter-type-anno.ts

    ERROR

     Argument of type 'number[]' is not assignable to parameter of type 'String'.

    Why?

  4. correct

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

    var user = "I am string";
    console.log(greeter(user))
  5. run

     node greeter-type-anno.js
Interface

what? In javascript, interface?


  1. file name: greeter-interface.ts
  2. codes

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

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

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

    console.log(greeter(user));
Classes

OMG!!!

  1. file-name: greeter-class.ts
  2. codes

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

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

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

    var user = new Student("Jane", "M.", "User")
    console.log(greeter(user)); // compile?? error???
  3. generated js file

     var Student = (function () {
    function Student(firstName, middleName, lastName) {
    this.firstName = firstName;
    this.middleName = middleName;
    this.lastName = lastName;
    this.fullName = firstName + " " + middleName + " " + lastName;
    }
    return Student;
    }());
    function greeter(person) {
    return "Hello, " + person.firstName + " " + person.lastName;
    }
    var user = new Student("Jane", "M.", "User");
    console.log(greeter(user));
  4. error

     Argument of type 'Student' is not assignable to parameter of type 'Person'.
    Property 'lastName' is missing in type 'Student'.

Project config

tsconfig.js

tsconfig.json

프로젝트 폴더 바로 하위에 tsconfig.json을 위치 시키게 되면, Typescript 프로젝트가 된다.
tsconfig.json에 포함되는 내용은 아래와 같다.

  • Root files (e.g. app.ts, index.html etc…)
  • compiler options

tsconfig.json을 이용하는 방법은 아래와 같다.


  • tsc 명령어에 아무런 compile하고자하는 파일을 주지 않을 경우, compile는 tsconfig.json을 찾아 tsconfig.json에 명시된대로 compile을 하게된다.
  • tsc 명령어에 —project option을 주고 프로젝트 경로를 option값으로 주는 경우, 주어진 경로 하위에 위치한 tsconfig.json을 찾아 tsconfig.json에 명시된대로 compile하게 된다.

tsconfig.json examples

tsconfig.json은 JSON format의 객체 형태로 기술된다.

references
compiler options

  • compiler options
  • source map

    • 압축 혹은 난독화되어 배포되는 최종 소스와 원본 소스를 연결 시켜주는 방법
    • Spec

Files

  • files: 상대 및 절대경로의 파일들을 배열 형태로 선언할 수 있다.
  • include (exclude):아래와 같은 파일 패턴 형태를 지원하며, 패턴과 일치되는 모든 파일을 포함(제외)한다.

    • * 모든 파일을 대상으로 한다(파일 경로 구분자도 포함한다.)
    • ? 파일명 중 하나 이상의 character가 일치하는 파일을 대상으로 한다.(파일 경로 구분자도 포함한다.)
    • */ 일치되는 모든 하위 디렉토리를 대상으로 한다. (e.g. “src/\*/*“ )

Searching target files

  • * or .* : Typescript에서 지원되는 확장자로 선언된 파일들만 포함(제외)한다. (e.g. .ts, .tsx, .d.ts) 그리고 alloJs옵션이 true로 설정된다면 .js, .jsx파일도 포함하게 된다.
  • files, include 둘 다 tsconfig.json에 명시 하지 않았다면, compiler는 모든 Typescript 확장자(.ts, .tsx, .d.ts)를 가진 파일들을 모두 포함 시킨다. 단 exclude에 명시된 파일들은 제외된다.
  • files, include 둘 다 사용된 경우, 각각의 옵션에 명시된 파일들을 모두 포함 시킨다.
  • outDir에 명시된 디렉토리는 기본적으로 대상 파일에서 제외되지만, 명시적으로 files에 선언한다면 포함 시킬 수 있다.
  • include에 포함되도록 설정되도록 설정된 파일 중 일부를 exclude로 제외 시킬 수 있다.
  • files에 포함된 파일은 exclude에 선언이 되어 있더라도 제외되지 않는다.
  • excluce옵션은 기본적으로 아래의 디렉토리들을 제외 시킨다.

    • node_modules: nodeJs components
    • bower_components: application libraries
    • jspm_packages: package manager that loads any module format(ES6, AMD, CommonJs and globals), jspm homepage
    • outDir

  • include dependencies automatically: files 혹은 include에 선언된 파일이 다른 파일을 참조할 경우, 참조되는 파일을 자동으로 포함 시킨다. 예를 들어, A.ts가 B.ts을 참조한다면, B.ts가 files 혹은 include에 선언되어 있지 않더라도 compile시 자동으로 찾아 컴파일하게 된다.
@types, typeRoots 그리고 types

Typescript에서 제공하는 기본 타입들(all visible “@types”)은 자동으로 컴파일 시 로딩된다.

examples
using files
{
"compilerOptions" : {
"module": "commonjs",
"noImplicitAny": true, //not allow declarations with Any type, default: false
"removeComments": true, // Remove all comments except copy-right header comments beginning with /*! , default:false
"preserveConstEnums": true, // do not erase const enum declarations in generated code.
"sourceMap": true // source map 사용여부 활성화
},
"files": [
//....
]
}
using include, exclude
{
"compilerOptions": {
"module": "system",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"outFile": "../../built/local/tsc.js",
"sourceMap": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}

덧글

댓글 입력 영역


side adsense

adSense 900*70