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

type script란?

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

자바스크립트의 수퍼셋으로, ECMA스크립트의 최신 표준 지원
정적인 언어로 컴파일 시간에 타입을 검사
아파치 라이센스 오픈소스 프로그래밍 언어

장점

강력한 개발 도구지원
강력한 타입제공으로, 대규모 애플리케이션 개발에 용이
다양한 자바스크립트 라이브러리와의 호환성 목차 개발환경 구성 (Windiws 10)
Node.js 설치 (https://nodejs.org/ko/)
비주얼 스튜디오 코드 설치 (https://code.visualstudio.com/download)
프로젝트 생성

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

Node.js 설치

https://nodejs.org/ko/ 에서 node js를 설치합니다.
최신버전은 버그가 좀 있을 수 있으니, 안정적인 LTS버전을 씁시다.
node.js에서 설치파일을 다운받아 실행해줍시다.

Visual Studio Code 설치

https://code.visualstudio.com/download 에서 visual studio code를 설치합니다.
visual studio code는 코드 편집기로, 다른 편집기를 사용하셔도 됩니다. (editplus, atom, 기타등등)
자신의 OS에 맞는 설치파일을 다운로드하여 설치해줍시다.
저는 그냥 zip 파일을 다운받아서 압축풀었습니다.

TypeScript 설치

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

1	npm install -g typescript

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

파일생성

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

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

코드작성

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

function concat(left:string , right:string):string{ 
    return left+right; 
} 
let hello: string = concat("hello", "world");
console.log(hello);

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

빌드

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

1	tsc hello.ts

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

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

1
2
3

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

실행

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

1	node hello.js

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

javascript에 비해 type이 추가되어서 type(타이핑)을 더 많이 하는게 단점인거 같지만,
런타임이 아닌 개발시점에 미리 오류를 잡아낼 수 있어,
오히려 전체 개발기간은 짧아질 수 있습니다!!
typescript를 씁시다!!

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