환경 구축

내부 브라우저 컴파일 중 TypeScript 을 사용할 수 없기 때문에 webpack 등 캐리어를 사용해야 한다.
신속한 환경 구축을 위해 정부가 준비한 샘플을 바탕으로 한다.
https://github.com/riot/examples/typescript

다운로드

https://github.com/riot/examples
[Clone or download] -> [Download ZIP]

모든 example가 다운로드되기 때문에 typescript를 사용합니다.

설치

cd ./path/to/riot-examples/typescript
npm install

부팅

npm start

브라우저에서 ↓ 을 열어 무작위 수를 생성하는 예시를 표시합니다.
http://localhost:3000/

유형 스크립트에 Riot 구성 요소 쓰기

riot-example/typescript의 코드와 JavaScript의 설명을 비교해 보세요.

random.riot 템플릿 섹션

random/random.riot

<random>
  <h3>{ props.title }</h3>

  <button onclick={ generate }>
    Generate
  </button>

  <h1>
    { state.number }
  </h1>

  <logs logs={ state.logs } onclear={ clearLogs }></logs>

  <script type="ts">
    // ...（省略）
  </script>
</random>

이것은 JavaScript로 쓴 방식과 같다.

random.riot의 Script 섹션

random/random.riot

<random>
  <!-- （省略） -->
  <script type="ts"> // (1)
    import Logs from '../logs/logs.riot'
    import {RandomComponent} from './types' // (2)

    function Random(): RandomComponent { // (3)
      return {
        state: {
          number: null,
          logs: []
        },
        generate(event: MouseEvent): void { // (4)
          this.update({
            number: Math.floor(Math.random() * 10000),
            logs: this.state.logs.concat({
              text: `Generate button clicked. Event type is ${event.type}`
            })
          })
        },
        clearLogs(): void {
          this.update({
            logs: []
          })
        }
      }
    }

    Random.components = {
      Logs
    }

    export default Random
  </script>
</random>

TypeScripttype="ts"를 지정합니다.

다음에 설명된 형식 정의 파일을 가져오는 중입니다.

언뜻 보기에는 완전히 변한 것 같지만 자바스크립트도 공장 함수로 구성 요소를 생성할 수 있기 때문에 같다.
https://riot.js.org/ja/api/#상태 처리

매개변수와 반환 값의 유형을 지정할 수 있습니다.

random.riot와 쌍을 이루는 types.ts

random/types.ts

import {RiotComponentExport} from 'riot'

export interface RandomComponentState { // (1)
  number: number | null;
  logs: { text: string }[];
}

export interface RandomComponentProps { // (1)
  title: string;
}

export interface RandomComponent extends RiotComponentExport<RandomComponentProps, RandomComponentState> { // (2)
  generate(event: MouseEvent): void;
  clearLogs(): void;
  state: RandomComponentState;
}

JavaScript에서 설명할 때 존재하지 않는 형식 정의 파일에서 구성 요소의 인터페이스를 정의했습니다.

props 및 state 필드와 유형을 지정할 수 있습니다.

방법의 정의를 지정할 수 있습니다.

TypeScript 혜택은 어디에서 받을 수 있습니까?

나는 이곳이 가장 중요한 곳이라고 생각해서 많이 시도했다.

number 형식에 정의된 변수에 문자열 추가

function Random(): RandomComponent {
  return {
    state: {
      number: 'riot.js', // <-- ここを変更
      logs: []
    },
    // ...
  }
}

// -------------------------------
// random.riot.ts
// Error 2322 : Type 'string' is not assignable to type 'number | null'.

할당할 수 없는 유형이라 오류가 발생했습니다.

types.ts에만 함수 추가

export interface RandomComponent extends RiotComponentExport<RandomComponentProps, RandomComponentState> {
  generate(event: MouseEvent): void;
  clearLogs(): void;
  hoge(): void; // <-- ここに追加
  state: RandomComponentState;
}

// -------------------------------
// random.riot.ts
// Error 2741 : Property 'hoge' is missing in type '{ state: { number: null; logs: never[]; }; generate(event: MouseEvent): void; clearLogs(): void; }' but required in type 'RandomComponent'.

인터페이스가 정의되었지만 실행되지 않았기 때문에 오류가 발생했습니다.types.ts에 필드를 추가한 결과state도 마찬가지입니다.

random.riot에만 함수 추가

function Random(): RandomComponent {
  return {
    // ...
    clearLogs(): void {
      this.update({
        logs: []
      })
    },
    fuga(): void { // <-- ここに追加
      // 何らかの処理
    }
  }
}

이것은 잘못을 일으키지 않았다.
템플릿 부분에서 호출할 때 형식 정의를 쓸 수 있으며 로컬 함수를 쓰지 않습니다.

.riot 파일에서 코드 보충이 유효합니까

Visual Studio 코드가 잘못되었습니다.
Riot.js는 HTML에서 스크립트를 쓰는 형식이기 때문에 어쩔 수 없습니다.

감상

쓰기 정의 파일의 작업량은 증가하지만 인터페이스의 혜택을 받고 싶은 상황에서 사용하고 싶습니다.