타이프 라이터 2 TSX 보존 및 noimplicitany 오류 TS2602은 : 글로벌 형 'JSX.Element는'나는 함께 타이프 라이터 2 TSX를 사용하고

Question

존재하지 않는 설정 및 활성화 "noImplicitAny"로 (반응하지) 유지 :

"noImplicitAny": true, 
"jsx": "preserve" 

문제는, 나는 간단한 TSX 파일 구축을 위해 노력이 오류가 계속 :

'use strict'; 

import m from './m'; 

export default { 
    view() { 
    return (
     <h1>Hello Mithril!</h1> 
    ); 
    } 
}; 

0 : 여기에

error TS2602: JSX element implicitly has type 'any' because the global type 'JSX.Element' does not exist. 

나의 TSX 파일의 예

저는 비 반응 스택 (Mithril)으로 작업하는 TSX를 얻으려고합니다. 미리 감사드립니다! 원래의 질문에

Answer 1

답 : (해결하는 방법을 TS2602 오류)

이 매우 간단합니다, explained here 등 : 오류로

말 : "글로벌 형 'JSX 때문이다.

declare namespace JSX { 
    interface Element { } 
    interface IntrinsicElements { div: any; } 
} 

0 : 요소 '

는 당신이 그 유형을 정의 할 수 있습니다 "존재하지 않는

나는, 당신은 IntrinsicElements의 모든 하위 요소에 대한 정의가 필요합니다 (더 완전한 typings에 대한 소스로 this file을 사용할 수 있습니다 DefinitelyTyped

에서 반응-jsx.d.ts 파일을 얻는 것이 좋습니다 등 즉 div, p, a)

더 TSX와 미스릴과 방법 :

당신이하면 타이핑 문제를 해결하면, 당신은 거기에없는 것을 알게 될 것입니다. "jsx": "preserve" 설정을 사용하는 경우 HTML 코드는 번역없이 생성 된 js 파일에 직접 작성됩니다. 이것은 물론 웹 브라우저 (HTML 파일이 아닌 자바 스크립트 파일이기 때문에)로로드 할 수 없습니다.

나는 그것이 작동되도록하는 방법은 두 가지가 있다고 생각합니다 :

마음에 오는

첫 번째 솔루션은 "jsx":"react"을 사용하여 다음과 같이 미스릴에 대한 호출을 전달합니다 작은 래퍼 작성하는 것입니다 :

class React { 
    public static createElement(selector: string, attributes: object, ...children: Mithril.Child[]): Mithril.Child { 
    return m(selector, attributes, children); 
    } 
} 

을

추가 도구가 필요치 않기 때문에 현재이 솔루션을 사용하고 있습니다.

다른 용액 "jsx":"preserve" 유지하고 유효한 js 파일합니다 (tsx 파일 타이프에 의해 생성되는)에 jsx 파일 번역 바벨 as described in mithril documentation을 사용하는 것이다.

마지막으로, 나는 작동하도록 만들었지 만 typescript/npm 모듈 시스템으로 인해 JSX 유형이 미스릴 유형을 확장하게되었습니다 (따라서 함수가 미스릴을 반환 할 수 있도록). 호환 유형) 등나는 미스릴 타이핑을 수정해야했고 (npm @types/mithril), 내 자신의 모듈 몇 개를 추가해야했다.

누군가가이 문제를 우아하고 간단하게 해결했는지 알고 싶습니다.

Answer 2

평판이 부족하기 때문에 위의 답변에 대해 언급하지 않으므로이 답변을 내 답변에 포함시킵니다.

우선 프로젝트의 맨 위에 this gist을 포함시키고 mithril-jsx.d.ts와 같은 이름을 지정하면 typescript가이를 유형 정의로보고 컴파일하지 않습니다. 링크 된 요약은 단순히 JSX.element을 m.Vnode<any, any>으로 선언하고 JSX.IntrinsicElements 아래의 모든 HTML 요소를 any으로 나열합니다. 거대한 거래는 아니지만 시간을 절약합니다.

둘째, 그리고 이유는 난이 게시하도록하겠습니다 : 당신은 이 꿀꺽 필요하지 할 또는 다른 도구가 미스릴-사용하는 .js 사람을 .tsx 파일을 컴파일 할 수 있습니다. http://www.typescriptlang.org/docs/handbook/compiler-options.html