TypeScript-환경 설정

옵션 온라인 시도

이론 작업을 할 때 동시에 사용 가능한 모든 예제를 온라인으로 실행할 수 있도록 이미 TypeScript 프로그래밍을 온라인으로 설정했습니다. 이렇게하면 읽고있는 내용에 대한 자신감을 얻고 다양한 옵션으로 결과를 확인할 수 있습니다. 모든 예제를 자유롭게 수정하고 온라인에서 실행하십시오.

CodingGround 에서 제공되는 온라인 컴파일러 옵션을 사용하여 다음 예제를 시도해보십시오.

var message:string = "Hello World" 
console.log(message)

컴파일시 다음 JavaScript 코드가 생성됩니다.

//Generated by typescript 1.8.10
var message = "Hello World";
console.log(message);

이 자습서에 제공된 대부분의 예제에 대해 Try it오른쪽 상단의 웹 사이트 코드 섹션에있는 옵션을 선택하면 온라인 컴파일러로 이동합니다. 그러니 그것을 활용하고 학습을 즐기십시오.

이 장에서는 Windows 플랫폼에 TypeScript를 설치하는 방법에 대해 설명합니다. 또한 Brackets IDE를 설치하는 방법도 설명합니다.

TypeScript ─ 온라인으로 시도해보십시오.

www.typescriptlang.org/Playground에서 TypeScript를 사용하여 온라인으로 스크립트를 테스트 할 수 있습니다 . 온라인 편집기는 컴파일러가 내 보낸 해당 JavaScript를 보여줍니다.

다음을 사용하여 다음 예제를 시도해 볼 수 있습니다. Playground.

var num:number = 12 
console.log(num)

컴파일시 다음 JavaScript 코드가 생성됩니다.

//Generated by typescript 1.8.10
var num = 12;
console.log(num);

위 프로그램의 출력은 다음과 같습니다.

12

지역 환경 설정

Typescript는 오픈 소스 기술입니다. 모든 브라우저, 호스트 및 모든 OS에서 실행할 수 있습니다. Typescript 프로그램을 작성하고 테스트하려면 다음 도구가 필요합니다.

텍스트 편집기

텍스트 편집기는 소스 코드를 작성하는 데 도움이됩니다. 몇 가지 편집기의 예로는 Windows Notepad, Notepad ++, Emacs, vim 또는 vi 등이 있습니다. 사용되는 편집기는 운영 체제에 따라 다를 수 있습니다.

소스 파일은 일반적으로 확장자로 이름이 지정됩니다. .ts

TypeScript 컴파일러

TypeScript 컴파일러는 그 자체로 .tsJavaScript (.js) 파일로 컴파일 된 파일입니다. TSC (TypeScript Compiler)는 소스 대 소스 컴파일러 (트랜스 컴파일러 / 트랜스 파일러)입니다.

TSC는 JavaScript 버전의 .ts파일이 전달되었습니다. 즉, TSC는 입력으로 제공된 Typescript 파일에서 동등한 JavaScript 소스 코드를 생성합니다. 이 과정을 트랜스 파일이라고합니다.

그러나 컴파일러는 전달 된 원시 JavaScript 파일을 거부합니다. 컴파일러는.ts 또는 .d.ts 파일.

Node.js 설치

Node.js는 서버 측 JavaScript를위한 오픈 소스 크로스 플랫폼 런타임 환경입니다. 브라우저 지원없이 JavaScript를 실행하려면 Node.js가 필요합니다. Google V8 JavaScript 엔진을 사용하여 코드를 실행합니다. Node.js 소스 코드 또는 플랫폼 용으로 미리 빌드 된 설치 프로그램을 다운로드 할 수 있습니다. 노드는 여기에서 사용할 수 있습니다-https://nodejs.org/en/download

Windows에 설치

아래 단계에 따라 Windows 환경에서 Node.js를 설치하십시오.

Step 1 − Node.js 용 .msi 설치 프로그램을 다운로드하고 실행합니다.

Step 2 − 성공적으로 설치되었는지 확인하려면 다음 명령을 입력하십시오. node –v 터미널 창에서.

Step 3 − TypeScript를 설치하려면 터미널 창에 다음 명령을 입력하십시오.

npm install -g typescript

Mac OS X에 설치

Mac OS X에 node.js를 설치하려면 미리 컴파일 된 바이너리 패키지를 다운로드하여 멋지고 쉽게 설치할 수 있습니다. 에 머리http://nodejs.org/ 최신 패키지를 다운로드하려면 설치 버튼을 클릭하십시오.

다음에서 패키지를 설치합니다. .dmg 설치 마법사에 따라 노드와 npm. npm은 node.js 용 추가 패키지 설치를 용이하게하는 Node Package Manager입니다.

Linux에 설치

Node.js 및 NPM을 설치하려면 먼저 여러 종속성을 설치해야합니다.

  • RubyGCC. Ruby 1.8.6 이상과 GCC 4.2 이상이 필요합니다.

  • Homebrew. Homebrew는 원래 Mac 용으로 설계된 패키지 관리자이지만 Linuxbrew로 Linux에 이식되었습니다. Homebrew에 대한 자세한 내용은http://brew.sh/ 및 Linuxbrew http://brew.sh/linuxbrew

이러한 종속성이 설치되면 터미널에서 다음 명령을 사용하여 Node.js를 설치할 수 있습니다.

brew install node.

IDE 지원

Typescript는 Visual Studio, Sublime Text 2, WebStorm / PHPStorm, Eclipse, Brackets 등과 같은 수많은 개발 환경에서 빌드 할 수 있습니다. 여기서는 Visual Studio Code 및 Brackets IDE에 대해 설명합니다. 여기에 사용 된 개발 환경은 Visual Studio Code (Windows 플랫폼)입니다.

Visual Studio 코드

이것은 Visual Studio의 오픈 소스 IDE입니다. Mac OS X, Linux 및 Windows 플랫폼에서 사용할 수 있습니다. VScode는-https://code.visualstudio.com/

Windows에 설치

Step 1− Windows 용 Visual Studio Code 를 다운로드 합니다.

Step 2− VSCodeSetup.exe

를 두 번 클릭 하여 설치 프로세스를 시작합니다. 1 분이면됩니다.

Step 3 − IDE의 스크린 샷은 아래와 같습니다.

Step 4− 파일을 마우스 오른쪽 버튼으로 클릭 → 명령 프롬프트에서 열기를 통해 파일 경로로 직접 이동할 수 있습니다. 마찬가지로 탐색기에 표시 옵션은 파일 탐색기에 파일을 표시합니다.

Mac OS X에 설치

Visual Studio Code의 Mac OS X 특정 설치 가이드는 다음에서 찾을 수 있습니다.

https://code.visualstudio.com/Docs/editor/setup

Linux에 설치

Visual Studio Code에 대한 Linux 특정 설치 가이드는 다음에서 찾을 수 있습니다.

https://code.visualstudio.com/Docs/editor/setup

브래킷

Brackets는 Adobe Systems에서 만든 웹 개발 용 무료 오픈 소스 편집기입니다. Linux, Windows 및 Mac OS X에서 사용할 수 있습니다. 브래킷은http://brackets.io/

대괄호 용 TypeScript 확장

대괄호는 Extension Manager를 통해 추가 기능을 추가하기위한 확장을 지원합니다. 다음 단계는 동일한 것을 사용하여 TypeScript 확장을 설치하는 방법을 설명합니다.

  • 설치

    후 편집기 오른쪽 에있는 확장 관리자 아이콘 을 클릭합니다 . 검색 창에 타이프 스크립트를 입력합니다.

  • Brackets TSLint 및 Brackets TypeScript 플러그인을 설치합니다.

확장 브라켓 쉘을 하나 더 추가하여 브라켓 자체 내에서 DOS 프롬프트 / 쉘을 실행할 수 있습니다.

설치시 편집기 오른쪽에 shell 아이콘이

있습니다. 아이콘을 클릭하면 아래와 같은 쉘 창이 나타납니다.

Note− Typescript는 Visual Studio 2012 및 2013 환경 (https://www.typescriptlang.org/#Download) 용 플러그인으로도 제공되며, VS 2015 이상에는 기본적으로 Typescript 플러그인이 포함되어 있습니다.

이제 모든 설정이 완료되었습니다!