TypeScript의 Playground 사용이 쉬워졌습니다.

입문

TypeScript로 간단한 행동을 확인하려면 작업 중인 항목에 코드를 쓰는 것이 좀 번거롭습니다. 이럴 때 브라우저에서 TypeScript를 실행할 수 있는 서비스를 사용하여 테스트를 진행합니다.
이 중 가장 후보가 될 수 있는 TypeScript 공식 플레이그라운드 서비스는 당시 사용하기 어려워 코드 샌드박스 등으로 대체됐다.
그런데 최근 갑자기 플레이그라운드를 사용해 봤는데 서비스가 리셋되어 사용하기 쉬워져서 간단한 해설로 공유하고 싶어요.
Typescript Playground
http://www.typescriptlang.org/play/

결론

먼저 어떻게 변화하는지 말하자면 "집행 환경이 새로운 페이지에서 현재의 페이지로 바뀌었다."
나는 이것이 장단점이라고 생각하지만, 단지 TypeScript의 행동을 확인하고 싶다면, 압도적인 장점이 한 수 위일 것이다.
오래된 플레이그라운드를 모르면 산뜻하게 느껴질 수 있으니 간단히 설명해 주세요.

이전 Playground

Playground의 Example에는'Classic JavaScript'를 생성하는 것과 같은 오래된 설명이 섞여 있다.

function Greeter(greeting) {
  this.greeting = greeting;
}

Greeter.prototype.greet = function() {
  return "Hello, " + this.greeting;
};

// Oops, we're passing an object when we want a string. This will print
// "Hello, [object Object]" instead of "Hello, world" without error.
let greeter = new Greeter({ message: "world" });

let button = document.createElement("button");
button.textContent = "Say Hello";
button.onclick = function() {
  alert(greeter.greet());
};

document.body.appendChild(button);

이것은 단추를 생성하여 body 탭에 추가하는 과정이지만, 현재 Playground에서는 실행해도 외관상 아무런 일도 일어나지 않습니다.
기존 Playground에서 실행新規のクリーンなhtmlページを生成 => 新規ページ上で上記が実行하면 결과를 볼 수 있기 때문에 성립된 견본이다.
참고로 devtools로 보시면 현재 페이지에서 생성된 것을 확인할 수 있습니다.

새로운 페이지를 만들 수 있기 때문에 html 처리를 자유롭게 쓸 수 있습니다. 좋은 점이 있지만 TypeScript만 시도하고 싶은 저에게는 특별히 다른 페이지로 날아가는 것이 번거롭습니다.
그리고 콘솔.매번 로그 검사新規ページを開く => devtoolsを開く의 절차에 따라야 하기 때문에 시도와 오류가 힘들었던 기억이 납니다.

새 Playground

결론에서 보듯이 새로운 플레이그라운드는'현재 페이지'에서 실행되기 때문에 현재 페이지의 컨트롤러에서 동작을 간단하게 확인할 수 있습니다.

아주 편리합니다!
아니면 처음부터 이걸 원했다고...

마지막

기능을 줄여 가용성을 높인 예일 수도 있다.
저는 개인적으로 사용하기 쉬워서 앞으로 순수한 플레이그라운드에서 다양한 테스트를 해보고 싶어요.