[typescript] 타입스크립트 사이트, 설치, 컴파일 설정

타입스크립트!!!!! 시작!!!!!

2012년에 발표 대규모 javascript 애플리케이션 개발

 

microsoft오픈소스 프로그래밍 언어

-자바스크립트의 상위 집합
-자바스크립트를 사용, 모든 기능 포함
-자바스크립트에 포함되지 않는 새로운 기능
-정적인 언어

 

*자바스크립트와 가장 큰 차이!!!!!!

자바스크립트는 동적인 언어이며 프로그램 구동 중에 타입이 다이나믹하게 변경되나 

타입스크립트는 정적인언어이며 프로그램을 작성할 때 타입을 정의함

 

웹브라우져가 해석할수 있는 언어

html, css, javascript

 

 

컴파일(컴퓨터가 이해할 수 있는 언어로 변경)

scss  >>>>> css
typtescript  >>>>>>> javascript

 

 

타입스크립트의 장점

1. 버그를 줄이고 유지보수하기 쉬움, 질좋은 코드 작성에 용이함

2. 강력한 타입으로 대규모 개발에 용이함

3. 자바스크립트 라이브러리와의 편리한 사용

4. 개발 도구에서의 강력한 지원

 

 

프론트엔드 프레임워크와 타입스크립트

 

1. 리액트(react)

리액트와 타입스크립트 호환성은 좋은 편

- 간단한 옵션 추가만으로 타입스크립트를 사용할 수 있도록 지원

 

2. 뷰(Vue)

뷰 2.0 부터 타입스크립트 사용 가능

뷰 3.0 부터 타입스크립트 공식 지원

 

3. 앵귤러(Angular)

버전 2부터 타입스크립트를 기반으로 만들어졌고

타입스크립트 권장하고 있음.

 

 

웹상으로 타입스크립트 확인  사이트 접속하고 밑에 playground 클릭

https://www.typescriptlang.org/

JavaScript With Syntax For Types.

 

 

 

타입스크립트 사용하기!!!!!!!!!

Typescript 파일은 웹 브라우져가 해석 할 수 없음

typescript   >>>>>> javascript 변환

(트렌스파일러로 변환 작업을 함)

 

설치

npm install -g typescript

 

컴파일러 하는 방법 

*터미널을 cmd로 지정 

tsc typescript.ts

 

ex6 형태의 자바스크립트로 변환하기

tsc [파일명][옵션 --target es6]

ex) tsc test.ts --target es6

 

모듈시스템 정의

tsc 파일명 --target es6 --module commonjs

 

터미널 cmd로 변경

 

컴파일러 설정파일 만들기

src ----> ts파일

 

1. tsconfig.json 파일 생성

include: 변환될 파일 지정

complierOptions : 타입스크립트 컴파일러에 대한 옵션

 

타입스크립트 초기화

tsc --init

tsconfig.json 파일 생성

 

노드 초기화

npm init

package.json 파일 생성

 

 

tsconfig.json 파일 수정

{
  //포함되어질 파일
  "include": [
    "src/**/*.ts"
  ],
  //노드패키지는 타입스크립트 컴파일 대상에서 제외시킴
  "exclude": [
    "node_modules"
  ],
  //타입스크립트 컴파일러에 대한 옵션 지정
  "compilerOptions": {
   
    /* 자바스크립트 구문 지정 */
    "target": "ES6",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    /* Modules */
    "module": "commonjs", 
  
    /* 밑에 타입스크립트 파일 위치 */
    "rootDir": "src",                                  /* Specify the root folder within your source files. */
   
    /* 밑에  변환된 자바스크립트파일 담음 */
    "outDir": "dist" ,                                  /* Specify an output folder for all emitted files. */   
    /* 암묵적으로 any타입을 가지는것을 허락하지 않음
    "noImplicitAny": true,
    엄격한 null타입 체크
    "strictNullChecks": true,   이 두개의 코드는 밑에 strict과 같음*/
    /* 코드 엄격한 체크 (number타입 등에 null이나 undefiend를 넣으면 에러 발생시킴/없을 경우 허용됨)*/
    "strict": true,
    //컴파일시 주석 제거하기 지정
    "removeComments": true
  } 
}

 

 

 

ts 파일 >>>>> js 파일로 컴파일 

 

설정 전에는 tsc [파일명][옵션 --target es6] 명령을 줘야지 변환됬는데 

설정 후에는 tsc 명령만 주면 dist폴더안에 ts파일 변환해서 js파일로 넣어줌