Typescript 최초 시작

  1. npm을 통해서 typescript설치 (tsd도 같이 설치 : TypeScript Definition Manager)

    c:\Test>npm install -g typescript tsd
    
  2. greeter.ts라는 typescript source file생성

    function greeter(person : string){
        return "Hello, " + person;
    }
    var user = 123;
    document.body.innerHTML = greeter(user);
    
  3. 확장자 ts를 tsc를 이용하여 compile

    c:\test>tsc greeter.ts
    
  4. 최종 js 파일로 결과 출력

npm init을 통한 package 초기화 수행

$npm init
  • 자동으로 package.json 파일 생성 그 이후

    $npm install –save typescript

package.json 샘플

{
  "name": "typescript_test",
  "version": "1.0.0",
  "description": "test",
  "main": "index.html",
  "scripts": {
    "build": "echo build",
    "start": "echo test",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/scanhand/TypeScript_Test.git"
  },
  "author": "scanhand",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/scanhand/TypeScript_Test/issues"
  },
  "homepage": "https://github.com/scanhand/TypeScript_Test#readme",
  "dependencies": {
    "raphael": "^2.2.7",
    "tsd": "^0.6.5",
    "typescript": "^2.3.3"
  }
}

위와같이 –save를 설정시 package.json 파일에 자동 저장됨

typescript 초기화

$ tsc --init

수행시 자동으로 tsconfig.json 파일 생성됨

    {
      "compilerOptions": {
        /* Basic Options */                       
        "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
        "module": "commonjs",                     /* Specify module code generation: 'commonjs', 'amd', 'system', 'umd' or 'es2015'. */    
        "allowJs": true,                       /* Allow javascript files to be compiled. */    
        "sourceMap": true,                     /* Generates corresponding '.map' file. */    
        "outDir": "build",                        /* Redirect output structure to the directory. */          
        /* Strict Type-Checking Options */        
        "strict": true                            /* Enable all strict type-checking options. */

      },
      "files" : [
        "test_raphael.ts"
      ]
    }