TypeScript 샘플 중 하나 시도

입문

마이크로소프트가 자바스크립트에서 익혀서 만든 것은 TypeScript입니다. Class를 정의할 수 있고 C#과 자바처럼 유형을 지정할 수 있습니다. 이 점은 자바스크립트와 달리 자바스크립트에서 벗어났을 뿐입니다. 물론 다른 수단이 있지만 tsc 명령을 두드리면~ts 파일에서~js 파일 같은 맛있는 곳을 만들지 않고 뭘 하면 돼요.우리는 마이크로소프트가 제공한 모든 샘플을 시험해 본 비망록을 발표할 것이다.

전제 조건

Visual Studio Code 설치됨

Node.js/npm 설치됨

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

OS는 Windows7/10

으로 가정합니다.

샘플amd

브라우저에 현재 날짜와 시간을 내보내는 예입니다.

파일 구성

파일 이름
설명
app.css
스타일 시트
app.js
app.ts 컴파일에서 만든 JavaScript
app.js.map
app.ts에서 만든 맵 파일 컴파일하기
app.ts
greeter를 실행하는 형식 스크립트
default.html
브라우저 출력용 html
greeter.js
greeter.ts 컴파일에서 만든 JavaScript
greeter.js.map
greeter.ts에서 만든 맵 파일 컴파일하기
greeter.ts
브라우저에 날짜와 시간을 출력하는 유형 스크립트
README.md
이 예제의 설명과 사용 방법
tsconfig.json
유형 스크립트 컴파일 프로필

클래스 및 프로세스 맵

실행

cd ./amd
tsc --sourcemap --module amd app.ts
start default.html

결과

득점

default.html 인코딩 13줄의require.js에 이 샘플의 앱이 있습니다.js를 변수로 전달하고 실행합니다.
amd여기에 관하여.
default.발췌하다

 <!--
        require.js will use the value of the 'data-main' attribute in the following
        script tag to load 'app.js' after require.js itself loads.
    -->
<script data-main="app" type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.1/require.min.js"></script>

공책

TypeScrpit 클래스의 기본 구조를 기록합니다.
constructor는 클래스의 실례를 만들 때 호출되어 속성을 초기화합니다.

ts->js 변환

전원greeter.ts와 후원greeter.js를 비교해 보세요.
TypeScript의 단순성은 매우 뛰어납니다.Lenovo C#의 인코딩은 매력적입니다.

※ 왼쪽 greeter.ts, 오른쪽 greeter.js

총결산

TypeScript가 무엇이냐는 질문에 전설적인 프로그래머앤더스 헤스버그가 개발한 자바스크립트슈퍼 슈트와 변압기 컴파일러라고 대답하십시오.
이상