GaramX

사용자 도구

사이트 도구

현재 위치: home » typescript » jsx
추적: • type_compatibility • decorator • two-way-binding • generic • angular • variable • wm_concat • testing • first • destructuring
typescript:jsx

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판이전 판
다음 판		이전 판
typescript:jsx [2019/07/30 10:22] – [값-기반 요소 (Value-based elements)] taekgutypescript:jsx [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
줄 216: 줄 216:
  
 내장 요소의 경우 JSX.IntrinsicElements 프로퍼티의 타입입니다. 내장 요소의 경우 JSX.IntrinsicElements 프로퍼티의 타입입니다.
 +<code javascript>
 declare namespace JSX { declare namespace JSX {
   interface IntrinsicElements {   interface IntrinsicElements {
줄 225: 줄 225:
 // 'foo'에 대한 요소 속성 타입은 '{bar?: boolean}'입니다. // 'foo'에 대한 요소 속성 타입은 '{bar?: boolean}'입니다.
 <foo bar />; <foo bar />;
 +</code>
 +
 값 기반 요소의 경우 조금 더 복잡합니다. 값 기반 요소의 경우 조금 더 복잡합니다.
 이전에 결정된 요소 인스턴스 타입의 프로퍼티 타입에 따라 결정됩니다. 이전에 결정된 요소 인스턴스 타입의 프로퍼티 타입에 따라 결정됩니다.
줄 231: 줄 233:
 그런 다음 해당 프로퍼티의 이름이 사용됩니다. 그런 다음 해당 프로퍼티의 이름이 사용됩니다.
  
 +<code javascript>
 declare namespace JSX { declare namespace JSX {
   interface ElementAttributesProperty {   interface ElementAttributesProperty {
줄 246: 줄 249:
 // 'MyComponent'의 요소 속성 타입은 '{foo?: string}'입니다 // 'MyComponent'의 요소 속성 타입은 '{foo?: string}'입니다
 <MyComponent foo="bar" /> <MyComponent foo="bar" />
 +</code>
 요소 속성 타입은 JSX에서 속성을 타입을 확인하는 데 사용됩니다. 요소 속성 타입은 JSX에서 속성을 타입을 확인하는 데 사용됩니다.
 선택적 프로퍼티와 필수 프로퍼티가 지원됩니다. 선택적 프로퍼티와 필수 프로퍼티가 지원됩니다.
  
 +<code javascript>
 declare namespace JSX { declare namespace JSX {
   interface IntrinsicElements {   interface IntrinsicElements {
줄 261: 줄 266:
 <foo requiredProp="bar" unknownProp />; // 오류, unknownProp이 존재하지 않습니다. <foo requiredProp="bar" unknownProp />; // 오류, unknownProp이 존재하지 않습니다.
 <foo requiredProp="bar" some-unknown-prop />; // 좋아요, 'some-unknown-prop' 은 유효한 식별자가 아니기 때문입니다. <foo requiredProp="bar" some-unknown-prop />; // 좋아요, 'some-unknown-prop' 은 유효한 식별자가 아니기 때문입니다.
-참고: 속성 이름이 유효한 JS 식별자 (예 :data- *속성)가 아닌 경우 요소 속성 타입에서 속성 이름을 찾을 수 없으면 오류로 간주되지 않습니다.+</code> 
 +>참고: 속성 이름이 유효한 JS 식별자 (예 :data- *속성)가 아닌 경우 요소 속성 타입에서 속성 이름을 찾을 수 없으면 오류로 간주되지 않습니다.
  
-전개 연산자도 작동합니다:+또한 JSX.IntrinsicAttributes 인터페이스는 JSX 프레임 워크에서 사용되는 추가 속성을 지정하는 데 사용할 수 있습니다.이 속성은 일반적으로 구성 요소의 소품이나 인수 (예 : React의 키)에서 사용되지 않습니다. 특히, 일반 JSX.IntrinsicClassAttributes <T> 유형은 클래스 구성 요소 (함수 구성 요소 제외)에 대해 동일한 종류의 추가 속성을 지정하는 데 사용될 수도 있습니다. 이 유형에서 제네릭 매개 변수는 클래스 인스턴스 유형에 해당합니다. React에서는 Ref <T> 유형의 ref 속성을 허용하는 데 사용됩니다. 일반적으로 JSX 프레임 워크의 사용자가 모든 태그에 일부 속성을 제공해야하는 경우가 아니라면이 인터페이스의 모든 속성을 선택적으로 지정해야합니다.
  
 +전개 연산자도 작동합니다:
 +<code javascript>
 var props = { requiredProp: "bar" }; var props = { requiredProp: "bar" };
 <foo {...props} />; // 좋아요 <foo {...props} />; // 좋아요
줄 270: 줄 278:
 var badProps = {}; var badProps = {};
 <foo {...badProps} />; // 오류 <foo {...badProps} />; // 오류
-하위 타입 검사 (Children Type Checking)+</code> 
 + 
 +===== 하위 타입 검사 (Children Type Checking) ===== 
 2.3 버전에서 하위 타입 검사를 도입했습니다. 2.3 버전에서 하위 타입 검사를 도입했습니다.
 하위(children)는 요소 타입 검사에서 결정된 요소 속성 타입의 프로퍼티 입니다. 하위(children)는 요소 타입 검사에서 결정된 요소 속성 타입의 프로퍼티 입니다.
줄 276: 줄 287:
 JSX.ElementChildrenAttribute는 단일 프로퍼티로 선언해야합니다. JSX.ElementChildrenAttribute는 단일 프로퍼티로 선언해야합니다.
  
 +<code javascript>
 declare namespace JSX { declare namespace JSX {
   interface ElementChildrenAttribute {   interface ElementChildrenAttribute {
줄 281: 줄 293:
   }   }
 } }
 +</code>
 하위의 타입을 명시적으로 지정하지 않는다면 React typings의 기본 타입을 사용합니다. 하위의 타입을 명시적으로 지정하지 않는다면 React typings의 기본 타입을 사용합니다.
  
 +<code jsx>
 <div> <div>
   <h1>Hello</h1>   <h1>Hello</h1>
줄 297: 줄 311:
   {"This is just a JS expression..." + 1000}   {"This is just a JS expression..." + 1000}
 </CustomComp> </CustomComp>
 +</code>
 +
 다른 속성과 마찬가지로 하위 타입을 지정할 수 있습니다. 다른 속성과 마찬가지로 하위 타입을 지정할 수 있습니다.
 이렇게 하면 React typings에서 기본 타입을 덮어쓰게 됩니다. 이렇게 하면 React typings에서 기본 타입을 덮어쓰게 됩니다.
  
 +<code javascript>
 interface PropsType { interface PropsType {
   children: JSX.Element   children: JSX.Element
줄 331: 줄 348:
   World   World
 </Component> </Component>
-JSX 결과 타입 (The JSX result type)+</code> 
 + 
 +===== JSX 결과 타입 (The JSX result type) ===== 
 기본적으로 JSX 표현식의 결과 타입은 any로 분류됩니다. 기본적으로 JSX 표현식의 결과 타입은 any로 분류됩니다.
 JSX.Element 인터페이스를 지정하여 사용자 정의 타입을 사용할 수 있습니다. JSX.Element 인터페이스를 지정하여 사용자 정의 타입을 사용할 수 있습니다.
줄 337: 줄 357:
 이것은 블랙박스 입니다. 이것은 블랙박스 입니다.
  
-표현식 포함하기 (Embedding Expressions) +===== 표현식 포함하기 (Embedding Expressions) =====
-JSX는 중괄호 ({ })로 표현식을 감싸고 태그 사이에 표현식을 삽입할 수 있게합니다.+
  
 +JSX는 중괄호 ({ })로 표현식을 감싸고 태그 사이에 표현식을 삽입할 수 있게합니다.
 +<code javascript>
 var a = <div> var a = <div>
   {["foo", "bar"].map(i => <span>{i / 2}</span>)}   {["foo", "bar"].map(i => <span>{i / 2}</span>)}
 </div> </div>
 +</code>
 위의 코드는 문자열을 숫자로 나눌 수 없으므로 오류가 발생합니다. 위의 코드는 문자열을 숫자로 나눌 수 없으므로 오류가 발생합니다.
  
 출력은 preserve 옵션을 사용할 때 다음과 같습니다: 출력은 preserve 옵션을 사용할 때 다음과 같습니다:
 +<code javascript>
 var a = <div> var a = <div>
   {["foo", "bar"].map(function (i) { return <span>{i / 2}</span>; })}   {["foo", "bar"].map(function (i) { return <span>{i / 2}</span>; })}
 </div> </div>
-리액트 통합 (React integration)+</code> 
 + 
 +===== 리액트 통합 (React integration) ===== 
 React와 함께 JSX를 사용하려면 React typings을 사용해야 합니다. React와 함께 JSX를 사용하려면 React typings을 사용해야 합니다.
 이러한 typings은 React와 함께 사용하기에 적합하도록 JSX 네임스페이스를 적절하게 정의합니다. 이러한 typings은 React와 함께 사용하기에 적합하도록 JSX 네임스페이스를 적절하게 정의합니다.
  
 +<code javascript>
 /// <reference path="react.d.ts" /> /// <reference path="react.d.ts" />
  
줄 368: 줄 394:
 <MyComponent foo="bar" />; // 좋아요 <MyComponent foo="bar" />; // 좋아요
 <MyComponent foo={0} />; // 오류 <MyComponent foo={0} />; // 오류
 +</code>
 +
 +===== Factory Functions =====
 +jsx : react 컴파일러 옵션에서 사용되는 정확한 팩토리 함수는 구성 가능합니다. jsxFactory 명령 행 옵션이나 인라인 @jsx 주석 pragma를 사용하여 파일 단위로 설정할 수 있습니다. 예를 들어, jsxFactory를 createElement로 설정하면 <div />는 React.createElement ( "div") 대신 createElement ( "div")로 방출됩니다.
 +
 +주석 pragma 버전은 다음과 같이 사용할 수 있습니다 (TypeScript 2.8).
 +
 +<code javascript>
 +import preact = require("preact");
 +/* @jsx preact.h */
 +const x = <div />;
 +</code>
 +
 +emits as:
 +
 +<code javascript>
 +const preact = require("preact");
 +const x = preact.h("div", null);
 +</code>
 +선택한 팩토리는 JSX 네임 스페이스가 전역 검사로 돌아 가기 전에 (유형 검사 정보 용으로) 조회 된 위치에도 영향을 미칩니다. 팩토리가 React.createElement (기본값)로 정의 된 경우 컴파일러는 전역 JSX를 확인하기 전에 React.JSX를 확인합니다. 팩토리가 h로 정의되면 글로벌 JSX 이전에 h.JSX를 확인합니다.
typescript/jsx.1564482120.txt.gz · 마지막으로 수정됨: 2025/04/15 10:05 (바깥 편집)

문서 도구