본문 바로가기
개발/TypeScript

[TypeScript] 타입스크립트 환경설정 및 시작 :: 마이자몽

by 마이자몽 🌻♚ 2018. 9. 19.

얼마전, 어느 개발자에게 앞으로 대세가 될수 있을 기술이 뭐가 있을지 물어봤다.

여러 기술들 중에 TypeScript를 해보는 것도 좋을것 같다는 조언을 듣고 공부차원으로 정리해보는 것이 좋을것 같다고 생각이 들었다.


TypeScript란?

일단 TypeScript는 JavaScript의 상위언어 집합이다.

Complie to JavaScript를 해주는 언어이다. 즉, 컴파일하면 JavaScript가 된다.

그냥 JavaScript쓰면 될것이지 뭐하러 이렇게 하냐.... 라는 의문이 들 수도 있는데,... 대규모 어플리케이션을 만들때 JavaScript로 인한 문제가 많이 발생해서 TypeScript가 탄생하게 된것이다. 


대규모 어플리케이션 뿐만 아니라, 새로운 기능의 도입과 호환성 문제를 해결하는데 강력하다.

TypeScript는 type이 있는 JavaScript이다.

특히 Angular가 JavaScript보다는 TypeScript로 개발하는 것을 선호하고 있다.




TypeScript 설치 & 환경설정


TypeScript사용을 위해 NodeJSVSCode를 설치해준다.

에디터는 꼭 VSCode일 필요가 없지만, 같은 MS계열로 호환성이 좋다.



npm으로 typescript패키지 받아준고 적당한 이름의 폴더를하나 만들어준다.

tsc명령으로 tsconfig.ts파일 생성하고 현재 위치에서 VSCode를 실행해준다.

1
2
3
4
5
6
 Jamong@macui-MacBook-Pro  ~/Documents/typeProjects  sudo npm install -g typescript
 Jamong@macui-MacBook-Pro  ~/Documents/typeProjects  mkdir type1
 Jamong@macui-MacBook-Pro  ~/Documents/typeProjects  cd type1
 Jamong@macui-MacBook-Pro  ~/Documents/typeProjects/type1  tsc --init
message TS6071: Successfully created a tsconfig.json file.
 Jamong@macui-MacBook-Pro  ~/Documents/typeProjects/type1  code .
cs





tsconfig.config파일은 컴파일대상의 옵션을 지정할 수 있는 환경파일이다.

반복적인 작업을 줄여줄수 있는데.. 일단 기본으로 납둔다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
{
  "compilerOptions": {
    /* Basic Options */
    "target""es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5''ES2015''ES2016''ES2017','ES2018' or 'ESNEXT'*/
    "module""commonjs",                     /* Specify module code generation: 'none''commonjs''amd''system''umd''es2015'or 'ESNext'*/
    // "lib": [],                             /* Specify library files to be included in the compilation. */
    // "allowJs"true,                       /* Allow javascript files to be compiled. */
    // "checkJs"true,                       /* Report errors in .js files. */
    // "jsx""preserve",                     /* Specify JSX code generation: 'preserve''react-native'or 'react'*/
    // "declaration"true,                   /* Generates corresponding '.d.ts' file*/
    // "declarationMap"true,                /* Generates a sourcemap for each corresponding '.d.ts' file*/
    // "sourceMap"true,                     /* Generates corresponding '.map' file*/
    // "outFile""./",                       /* Concatenate and emit output to single file*/
    // "outDir""./",                        /* Redirect output structure to the directory. */
    // "rootDir""./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "composite"true,                     /* Enable project compilation */
    // "removeComments"true,                /* Do not emit comments to output. */
    // "noEmit"true,                        /* Do not emit outputs. */
    // "importHelpers"true,                 /* Import emit helpers from 'tslib'*/
    // "downlevelIteration"true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'*/
    // "isolatedModules"true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
 
    /* Strict Type-Checking Options */
    "strict"true,                           /* Enable all strict type-checking options. */
    // "noImplicitAny"true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks"true,              /* Enable strict null checks. */
    // "strictFunctionTypes"true,           /* Enable strict checking of function types. */
    // "strictPropertyInitialization"true,  /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis"true,                /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict"true,                  /* Parse in strict mode and emit "use strict" for each source file*/
 
    /* Additional Checks */
    // "noUnusedLocals"true,                /* Report errors on unused locals. */
    // "noUnusedParameters"true,            /* Report errors on unused parameters. */
    // "noImplicitReturns"true,             /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch"true,    /* Report errors for fallthrough cases in switch statement. */
 
    /* Module Resolution Options */
    // "moduleResolution""node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    // "baseUrl""./",                       /* Base directory to resolve non-absolute module names. */
    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'*/
    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [],                       /* List of folders to include type definitions from*/
    // "types": [],                           /* Type declaration files to be included in compilation. */
    // "allowSyntheticDefaultImports"true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop"true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'*/
    // "preserveSymlinks"true,              /* Do not resolve the real path of symlinks. */
 
    /* Source Map Options */
    // "sourceRoot""",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot""",                         /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap"true,               /* Emit a single file with source maps instead of having a separate file*/
    // "inlineSources"true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
 
    /* Experimental Options */
    // "experimentalDecorators"true,        /* Enables experimental support for ES7 decorators. */
    // "emitDecoratorMetadata"true,         /* Enables experimental support for emitting type metadata for decorators. */
  }
}

cs






TypeScript파일을 하나 생성한다.

조금은 생소해 보일 수도 있지만, 객체지향언어인 Java랑 문법이 유사하다.

1
2
3
4
5
6
7
8
9
10
11
12
class Student{
    fullName: string;
    constructor(public firstName: string, public middleName: string, public lastName: string){
        this.fullName = firstName + " " + middleName + " " + lastName;
    }
    getFullName(){
        return this.fullName;
    }
}
 
let jamong = new Student("my","Ja","Mong");
console.log(jamong.getFullName());

cs






터미널에 tsc명령을 입력해준다.

JavaScript파일을 생성해주는 것을 확인할 수 있다.

1
2
3
 Jamong@macui-MacBook-Pro  ~/Documents/typeProjects/type1  tsc helloJamong.ts
 Jamong@macui-MacBook-Pro  ~/Documents/typeProjects/type1  ls
helloJamong.js helloJamong.ts tsconfig.json

cs





Compile to JavaScript 결과 (helloJamong.js)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
"use strict";
var Student = /** @class */ (function () {
    function Student(firstName, middleName, lastName) {
        this.firstName = firstName;
        this.middleName = middleName;
        this.lastName = lastName;
        this.fullName = firstName + " " + middleName + " " + lastName;
    }
    Student.prototype.getFullName = function () {
        return this.fullName;
    };
    return Student;
}());
var jamong = new Student("my""Ja""Mong");
console.log(jamong.getFullName());
 

cs






생성된 JavaScript파일을 터미널에서 결과를 확인해본다.

1
2
 Jamong@macui-MacBook-Pro  ~/Documents/typeProjects/type1  node helloJamong.js
my Ja Mong

cs




필자는 TypeScript 공식 홈페이지를 참조하여 글을 작성했다.

자세한 내용을 확인하고 싶으면 아래 링크를 참조한다.

https://www.typescriptlang.org/index.html

댓글0