TypeScript를 시작하는 방법

TypeScript는 다음을 사용하는 언어 그룹 중 하나입니다. 자바 스크립트 실행 환경으로서의 런타임 : TypeScript 코드를 포함하는 .ts 파일은 일반 JavaScript로 컴파일 된 다음 브라우저에서 실행할 수 있습니다.

Jeremy Ashkenas는 처음에이 개념을 그의 CoffeeScript 언어로 유명하게 만들었지 만 안타깝게도 C # 또는 Visual Basic에 익숙한 개발자에게는 비교적 간결한 구문을 배우기가 어려웠습니다.



Microsoft는 Web 2.0 기술로 확장함에 따라 Jeremy Ashkenas로부터 영감을 받기로 결정했습니다. Visual Studio의 기능으로 인해 개발자는 다양한 언어 확장의 이점을 누리면서 간단히 해킹 할 수 있습니다.



TypeScript는 정적 타이핑에만 국한되지 않습니다. 또한 웹에서 객체 지향 프로그래밍 패러다임을 시뮬레이션 할 수있는 다양한 고급 기능이 함께 제공됩니다. 이 짧은 가이드는 주요 기능 중 일부를 안내합니다. 언어가 마음에 들면 더 많은 정보를 즉석에서 배울 수 있습니다.

01. Visual Studio 설치

Visual Studio 2017에는 새 설치 관리자가 함께 제공됩니다. 필요한 기능은 더 쉽게 배포 할 수 있도록 페이로드로 분할됩니다.



Visual Studio 2017에는 새 설치 관리자가 함께 제공됩니다. 필요한 기능은 더 쉽게 배포 할 수 있도록 페이로드로 분할됩니다.

TypeScript는 Linux 또는 macOS에서도 사용할 수 있지만 Microsoft의 공식 IDE를 고수 할 것입니다. Visual Studio 2017의 무료 커뮤니티 에디션을 다운로드하십시오. Microsoft, 여기 , 배포 중에 ASP.NET 페이로드를 표시해야합니다.

그림을위한 해부학을 배우는 방법

02. SDK 추가

TypeScript의 빠른 릴리스 케이던스로 인해 Visual Studio는 SDK 모듈로 확장해야합니다. 여기 Microsoft 사이트 . 표준 Windows 응용 프로그램 인 것처럼 설치 프로그램을 실행하기 만하면됩니다.

03. 실제 TypeScript 다운로드

추가 번거 로움이 없다면 Microsoft가 아닐 것입니다. SDK가 Visual Studio 설치를 업그레이드하는 동안 실제 TSC 컴파일러는 명령 줄에 추가되지 않습니다. 이 문제는 명령 줄에서 Node.js의 npm 패키지 관리자를 사용하면 가장 잘 해결됩니다.



PS C : Users tamha Downloads> npm install -g typescript

C : Users tamha AppData Roaming npm tsc-> C : Users tamha AppData Roaming npm node_modules typescript bin tsc

C : Users tamha AppData Roaming npm tsserver-> C : Users tamha AppData Roaming npm node_modules typescript bin tsserver

C : 사용자 tamha AppData 로밍 npm

`-typescript@2.4.2

04. 프로젝트 탈주

Visual Studio는 솔루션 중심 프로세스에서 작동 할 것으로 기대합니다. 흥미 롭기는하지만 이는 우리의 요구에 적합하지 않습니다. 대신 worker.ts라는 파일을 만들어 파일 시스템의 편리한 위치에 배치합니다. Visual Studio로 끌어서 열고 상단의 도구 모음 안에 놓습니다. 다음으로 다음 코드를 포함하도록 내용을 수정합니다.

function sayOi() { alert('Oi!'); } sayOi();

05. 진입 점 생성

소개에서 언급했듯이 .ts 파일은 그 자체로 많은 일을 할 수 없습니다. 따라서 동일한 폴더에 있어야하는 index.html이라는 파일을 생성합니다. 다음으로이 단계와 함께 표시된 스켈레톤 코드를 추가합니다. 컴파일러의 출력을로드하고 다른 JavaScript 비트 인 것처럼 실행합니다.

06. 컴파일 및 실행

다음 단계는 .ts 파일의 수동 재 컴파일을 포함합니다. PowerShell을 열고 tsc 명령 다음에 입력 파일 이름을 입력합니다. 기본적으로 출력 파일은 기본 파일 이름을 공유하지만 .ts 대신 .js 확장자를 갖습니다. 마지막으로 선택한 브라우저에서 index.html 파일을 열어 메시지 상자의 모양을 확인합니다.

PS C:Users amhaDownloads> tsc .worker.ts

07. 타이핑 받기

이 참조 테이블을 사용하여 기본 정적 유형을 찾으십시오.

이 참조 테이블을 사용하여 기본 정적 유형을 찾으십시오.

지금까지 TypeScript는 더 복잡한 JavaScript 환경으로 작동하는 것 이상을 수행했습니다. 다음 단계는 정적 유형 지정에 대한 지원을 활성화하는 것입니다. 컴파일러가 매개 변수의 정적 분석을 수행하여 유효하지 않은 값을 제외 할 수 있도록합니다. 이를 위해서는 일련의 유형이 필요합니다. 기본 유형은 위의 표에 나열되어 있으며 클래스는 나중에 설명합니다.

08. 사용해보기

일반 JavaScript에서이 오류는 해당 줄이 호출 될 때만 발견됩니다.

종이에 금박을 붙이는 방법
일반 JavaScript에서이 오류는 해당 줄이 호출 될 때만 발견됩니다.

TypeScript 변수 유형 할당은 변수 이름 뒤에있는 'a :'를 통해 이루어집니다. 숫자를 취하도록 Oi 함수를 수정하고 대신 문자열을 전달하겠습니다. 마지막으로 TSC 컴파일러를 다시 한 번 호출하여 위의 스크린 샷에 표시된 오류 메시지를 확인합니다. Visual Studio는 문제의 줄을 강조 표시합니다.

function sayOi(whatToSay: number) { alert(whatToSay); } sayOi('Hello');

09. 프로토 타입 피하기

JavaScript는 프로토 타이핑 (.NET 및 C / C ++ 세계에서 흔하지 않은 코드 스타일)을 통해 객체 지향을 구현합니다. TypeScript는이 단계에 수반되는 스 니펫에 표시된 프로세스 인 클래스 생성을 허용하여이 문제를 해결합니다.

class Imagine { public myResult: number; public myA: number; public myB: number; constructor(_a: number, _b: number) { this.myResult = _a + _b; this.myA = _a; } }

10. 대중에게 감사한다

public 속성을 설정하여 생성 된 보유 값은 자동으로 채워집니다.

다음 중 디지털 아트 제작에 가장 적합한 소프트웨어는 무엇입니까?
public 속성을 설정하여 생성 된 보유 값은 자동으로 채워집니다.

일반적으로 public 속성은 프로그램의 요소가 외부에서 액세스 가능하도록 선언하는 데 사용됩니다. 생성자 매개 변수로 사용되는 경우 대신 TypeScript 컴파일러에 동일한 이름을 가진 로컬 필드를 만들도록 지시합니다.

class Imagine { public myResult: number; //public myA: number; constructor(public myA: number, public _b: number) { this.myResult = myA + _b; this.myA = myA; } }

11. 방법 및 사례

myResult 및 myA에 저장된 값에 액세스하여 화면에 출력하는 메서드를 제공하여 예제 클래스를 확장 해 보겠습니다. 마지막으로 새 매개 변수는 클래스의 인스턴스를 만드는 데 사용되며 메서드를 호출하는 데 사용됩니다.

class Imagine { public myResult: number; . . . public saySomething(): void { alert(this.myResult); } } let myImagine: Imagine = new Imagine(2, 2); myImagine.saySomething();

12. 마법의 기능 사용

TypeScript의 언어 디자인은 개발자의 노력을 최대한 절약하기위한 것입니다. 멋진 기능 중 하나는 표시된 바로 가기를 사용하여 생성 된 매개 변수의 자동 채우기입니다.

class Imagine { public myResult: number; constructor(public myA: number, public myB: number) { this.myResult = myA + myB; } public saySomething(): void { alert(this.myA + “ “ + this.myB); } }

13. 상속 수행

우리의 작은 예제 프로그램은 TypeScript가 객체 상속의 핵심 원칙을 충족한다는 것을 증명합니다.

우리의 작은 예제 프로그램은 TypeScript가 객체 상속의 핵심 원칙을 충족한다는 것을 증명합니다.

객체 지향 프로그래밍의 핵심 원칙 중 하나는 클래스를 기반으로하는 클래스입니다. 그런 다음 파생 클래스는 기본 클래스의 내용을 재정 의하여 유연하게 조정 가능한 클래스 계층 구조를 만들 수 있습니다.

class Future extends Imagine { public saySomething(): void { console.log(this.myA); } }

14. 덮어 쓰기 분석

위의 코드 조각은 Future라는 하위 요소를 사용하여 Imagine 클래스를 확장했습니다. Future는 Imagine과는 좀 더 발전된 saySomething 메서드가 브라우저의 명령 줄에 메시지를 내 보낸다는 점에서 다릅니다.

let myImagine: Imagine = new Future(2, 2); myImagine.saySomething(); let myFuture: Future = new Future(9, 9); myFuture.saySomething();

15. 덮어 쓰기, redux 분석

이를 통해 실제 코드를 테스트 할 수 있습니다. 실행되면 브라우저 콘솔에는 Future의 두 가지 호출이 포함됩니다. 고급 클래스는 Imagine 개체로 호출 될 때도 속성을 유지합니다.

16. 제한된 액세스

public 한정자를 사용하여 멤버 변수를 노출하는 것은 인기가 없습니다. 결국 사용자가 변수의 내용으로 수행하는 작업을 대부분 제어 할 수 없게됩니다. TypeScript 접근자를 사용하면 기존 OOP와 유사한 방식으로이 문제를 해결할 수 있습니다. 읽기 전용 멤버도 지원되지만이 기능을 사용하려면 ECMAScript5 지원 활성화가 필요합니다.

public _myCache: string; get fullCache(): string { return this._myCache; } set fullCache(newX: string) { if (newX == 'hello') { this._myCache = newX; } else { console.log('Wrong data!'); } }

17. 추상적으로 만들기

복잡한 상속 계층을 생성하는 능력은 개발자가 추상 클래스에서 자신의 운을 시험하도록 동기를 부여합니다. TypeScript는 또한 이와 관련하여 다루었습니다.이 단계에 수반되는 예제는 추상 및 실제 멤버가있는 클래스를 만듭니다. 추상 클래스를 인스턴스화하려고하면 컴파일러 오류가 직접 발생합니다.

abstract class Imagine { public myResult: number; abstract sayName(): void; constructor(public myA: number, public myB: number) { this.myResult = myA + myB; } public saySomething(): void { alert(this.myA + ' ' + this.myB); } } class Future extends Imagine { . . . public sayName() { console.log('Hello'); } }

18. 인터페이스 만들기

객체 구조가 더 복잡 해짐에 따라 개발자는 종종 하나의 클래스가 여러 비트의 논리를 구현하는 상황에 직면하게됩니다. 이 경우 인터페이스는 좋은 해결 방법을 제공합니다.이 예제는 예상되는 사항을 보여줍니다.

interface DataInterface { field: number; workerMethod(): void; }

19. 구현

위 클래스의 경우와 같이 인터페이스를 사용할 수 없으면 아무 소용이 없습니다. 다행히도이를 구현하는 것은 특별히 어렵지 않습니다. 인터페이스 작성자는 생성의 일부를 선택 사항으로 선언 할 수 있습니다.

class Worker implements DataInterface { field: number; workerMethod(): void { throw new Error('Method not implemented.'); } }

20. 제네릭 클래스 사용

TypeScript 컴파일러는 엄격한 변수 유효성 검사를 시행합니다. 스토리지 클래스에서 작업 할 때 제네릭을 사용하면 최종 사용자가 처리 할 유형을 결정할 수 있습니다. 또한 TypeScript는 문서에서 가져온 (tautological) 스 니펫에 표시된 것처럼 함수와 같은 다른 일반 요소도 허용합니다.

//Generic function function identity(arg: number): number { return arg; } //Generic class class GenericNumber { zeroValue: T; add: (x: T, y: T) => T; }

21. 열거의 문제

상태 머신 및 유사한 요소는 변수를 몇 가지 잘 정의 된 상태를 저장하도록 제한하는 방법을 통해 큰 이점을 얻습니다. 이는 Enum 데이터 유형을 사용하여 수행 할 수 있습니다.

enum ParserState { Idle = 1, Read0, Read1 } class Imagine { public myState: ParserState; constructor(public myA: number, public myB: number) { this.myState = ParserState.Idle;

22. 더 알아보기

단일 기사에서 TypeScript만큼 복잡한 언어를 다루는 것은 거의 불가능합니다. 를보세요 TypeScript 사이트의 예 언어 바인딩에 대해 자세히 알아보십시오.

이 기사는 원래 266 호에 게시되었습니다. 웹 디자이너 , 창의적인 웹 디자인 매거진 – 전문가 자습서, 최신 트렌드 및 무료 리소스를 제공합니다. 여기서 266 호 구매 또는 여기에서 Web Designer 구독 .

크리스마스 특별 혜택 : Web Designer 구독시 최대 49 % 할인 크리스마스에 당신이나 친구를 위해. 제한된 제안이므로 빨리 이동하십시오 ...

검은 금요일 비디오 카드 거래 2019

관련 기사: