전자 응용 프로그램에서 TypeScript 객체를 Window에 전달하십시오.

Question

아래와 같이 화면에 인쇄하는 간단한 typescript 클래스가있는 경우 어떻게 프런트 엔드에서 더 간단한 방법으로 액세스 할 수 있습니까?

speak.ts

export class Speak { 
    public write() { 
     console.log("Hello"); 
    } 
} 

은 당신이 사용할 수 있습니다 알고

index.html을 require 문이 나를 위해 변수에 할당 할 수있다

<script> 
    var x = require('./speak'); 
    x.Speak.prototype.write(); // Prints "Hello" 
</script> 

이 클래스에 액세스하려면 자체적으로 require('./speak');을 사용하여 액세스 할 수 없으며이를 글로벌 범위로 가져 오려고합니다.

모든 명령 앞에 "x.Speak.prototype"을 붙이면 약간 자세한 정보가 표시되며 여러 클래스와 인터페이스가 도입 될 때 쉽게 더 길어질 수 있습니다.

나는이 일을 올바르게하고있는 것처럼 느낍니다. 프런트 엔드에서 작동하는 TypeScript 클래스에서 데이터/함수를 가져 오려면 어떻게해야합니까? Uncaught ReferenceError: Speak is not defined

Answer 1

가 포함 된 두 가지가 있습니다 : 내 index.html 파일

<script> 
    var speak = new Speak(); 
    speak.write("some other stuff"); 
</script> 

아래 뭔가를하려고하면

UPDATE는

오류가 발생합니다.

1. ES6 - commonJs 구문을 소모하면서> CommonJS는 상호 운용성
2. 클래스 구문 첫 번째 점에 대한

, 당신은 ES6 모듈을 선언한다. 당신이 CJS의 모듈 오브젝트에 개최 여분의 X 필요한 이유입니다

:

var X = require('./speak'); 
var speak = new X.Speak(); 

// or accessing the `Speak` class directly: 
var Speak = require('./speak').Speak; 
var speak = new Speak(); 

당신이 ES6에서 동일한 코드를 소비하는 경우, 그것은 다음과 같습니다 물론

import { Speak } from './speak' 
const s = new Speak(); 

// or 
import * as X from './speak' 
const s = new X.Speak(); 

, ESM (ES6 모듈 시스템)은 모든 브라우저에서 사용할 수 없으므로 TypeScript 코드를 ES5로 줄이고 일부 loader 메커니즘을 사용하여 requireJS와 같은 모듈을로드해야합니다.

두 번째 요점은 클래스 작성입니다.그래서 당신은 일반적으로 Speak의 인스턴스를 생성하고 사용합니다 (코드 다음은 첫 번째 점과 혼동을 피하기 위해, 모듈의 코드를 소비하는 가정) :

var speak = new Speak(); 
speak.write(); 

것은 당신이 인스턴스를 필요로하지 않는 경우 정적 메서드 또는 그냥 함수를 사용할 수 있습니다 :

export class Speak { 
    static write() { ... } 
} 

// usage: 
Speak.write(); 

// function 
export function write() { ... } 

// usage: 
write();