본문 바로가기
개발후기

typescript 시작하기, 설치하기, 개발하기, 프로젝트생성, 컴파일, 실행하기, 핸드북

by devscb 2021. 10. 27.
반응형

type script란?

"타입이 존재하는 Javascript 프로그래밍 언어"

 

- 자바스크립트의 수퍼셋으로, ECMA스크립트의 최신 표준 지원

- 정적인 언어로 컴파일 시간에 타입을 검사

- 아파치 라이센스 오픈소스 프로그래밍 언어

 

장점

- 강력한 개발 도구지원

- 강력한 타입제공으로, 대규모 애플리케이션 개발에 용이

- 다양한 자바스크립트 라이브러리와의 호환성 목차 개발환경 구성 (Windiws 10)

 

- Node.js 설치 ( https://nodejs.org/ko/ )

- 비주얼 스튜디오 코드 설치 ( https://code.visualstudio.com/download )

- 프로젝트 생성

 

 

※ 윈도 기반으로 설명합니다.

1. Node.js 설치

 ( https://nodejs.org/ko/ ) 에서 node js를 설치합니다.

최신버전은 버그가 좀 있을 수 있으니, 안정적인 LTS버전을 씁시다.

node.js에서 설치파일을 다운받아 실행해줍시다.

 

2. Visual Studio Code 설치

( https://code.visualstudio.com/download ) 에서 visual studio code를 설치합니다.

visual studio code는 코드 편집기로, 다른 편집기를 사용하셔도 됩니다. (editplus, atom, 기타등등)

자신의 OS에 맞는 설치파일을 다운로드하여 설치해줍시다.

저는 그냥 zip 파일을 다운받아서 압축풀었습니다.

 

3. TypeScript 설치

윈도우 기준, 명령 프롬프트(cmd창)에서 다음 명령어를 입력하여 설치할 수 있습니다.

npm install -g typescript

 

그러면 머라머라 하면서 실행이 완료될겁니다.

 

 

 

4. 파일생성

상단 메뉴바 File > New File을 선택하여 파일을 생성해줍시다.

 

 

 

select a language 를 눌러, typescript를 입력/선택해줍니다.

 

 

 

5. 코드작성

아래와 같이 코드를 작성합니다.

function concat(left:string , right:string):string{

  return left+right;

}


let hello:string = concat("hello", "world");

console.log(hello);

 

상단 메뉴의 File > Save 를 눌러 C:\에 hello.ts 로 저장해줍니다.

 

6. 빌드

커맨드창에서 아래 명령어로 hello.ts파일을 js파일로 컴파일합니다.

tsc hello.ts

 


 

그러면 같은 경로에 hello.js라는 파일이 생성될겁니다.

 

 

혹시 아래와 같은 에러가 발생할경우, 관리자모드로 커맨드창을 실행해주세요!

C:\>tsc hello.ts
error TS5033: Could not write file 'hello.js': EPERM: operation not permitted, open 'hello.js'.
Found 1 error.


 

 

7. 실행  

커맨드창에서 node hello.js 를 입력하여 실행!

 

node hello.js

 

그러면 아래와 같이 helloworld라는 결과가 출력될 것입니다!

 


javascript에 비해 type이 추가되어서 type(타이핑)을 더 많이 하는게 (라임이 ㅎ) 단점인거 같지만,

런타임이 아닌 개발시점에 미리 오류를 잡아낼 수 있어,

오히려 전체 개발기간은 짧아질 수 있습니다!!

typescript를 씁시다!!

 

 

 

 

type script란? typescript 시작하기, 설치하기, 개발하기, 프로젝트생성, 컴파일, 실행하기, 핸드북, tutorial, 튜토리얼

#javascript, #typescript, #타입스크립트, #자바스크립트, #바벨, #비주얼스튜디오,#visualstudio, #tsc, #ECMA, #ECMAscript

 

https://devscb.com/post/53

 

Starting typescript, installation, development, project creation, compilation, execution, handbook

What is type script? “Javascript programming language with types” A superset of JavaScript, supporting the latest standard of ECMAScript. Type checking at compile time in a static language Apache l

devscb.com

 

728x90
반응형

댓글