TypeScript 샘플 7 시도

입문

7 드디어 "Hello world!"디버깅을 진행하다.
브라우저 "Hello world!"의 규격화 거리의 멱 함수.
TypeScript에서 생성된 JavaScript와의 차이점을 확인해 보겠습니다.

전제 조건

Visual Studio Code 설치됨

Node.js/npm 설치됨

git샘플 다운로드에서 모든 디렉터리로 압축 해제

ViewIn Browser 설치(Market Place에서 제공)

OS는 Windows7/10

으로 가정합니다.

샘플링 프로그램

브라우저가 Hello World 문자열을 출력하는 예입니다.
greeter:인사

파일 구성

경로
파일 이름
설명
.
greeter.html
Hello world에서 출력하는 html
.
greeter.js
greeter.ts 컴파일에서 만든 JavaScript 파일
.
greeter.js.map
greeter.ts에서 만든 맵 파일 컴파일하기
.
greeter.ts
Hello wold의 Type Script 파일 내보내기
.
README.md
이 예제의 설명과 사용 방법
.
tconfig.json
유형 스크립트 컴파일 프로필

분류도 흐름도

실행

cd ./greeter
tsc --sourcemap greeter.ts

편집기에 표시greeter.htmlCtrl+F1

결과

득점

greeter.ts

① Greeter 등급

클래스가 실례화되면,constructor는 자동으로 처리됩니다.
string형의 공공 매개 변수를 받아들입니다.
그리고 공공greet 함수를 정의합니다.
이 함수는 constructor에서 받은 매개 변수를 브라우저 출력 문자열로 편집하고 되돌려 줍니다.

②greeter 객체 만들기

“Hello world!”문서 레지스트리에 항목을 추가합니다.

③ 문서 객체로 출력 설정

greeter 대상의greet 함수의 반환값을 documento 대상 구성원 body의 속성 innerHTML로 설정합니다.

greeter.js

① Greeter 등급

/**@class*/에서 class를 정의합니다.greet 함수.프로토타입으로 정의합니다.

② ③ Greeter 클래스/greeter 객체 제작

인코딩은 TypeScript와 동일합니다.
TypeScript의 class 인코딩은 JavaScript보다 훨씬 간단합니다.

공책

TypeScript 시작 샘플입니다.
인코딩의 주의점으로 분호(;)를 주의하십시오.
TypeScript의 class는 세미콜론으로 정의됩니다.
TypeScript의 class 정의의 마지막 멤버는 세미콜론이 필요하지 않습니다.

총결산

이 업종(IT?)약속한 첫 번째 출력은 어느새 Hello world!.
다음 세대의 새로운 언어를 만드는 사람은 반드시 예수의 수난기가 있는 영리한 문장을 출력해야 한다.
이상