Vue.js in Type Script에서 유형 정의를 어디에 써야 하는지

이 문장에 관하여

제목에서 보듯이 몇 가지 변화가 있다고 생각하기 때문에 자신의 생각을 정리하기 위해 문건을 썼다.

모드

API에서 얻은 백엔드와 공동으로 사용하는 데이터 모델의 유형

전단에서만 사용하는 유형 (관련 함수가 있는 역 모델)

어셈블리에서만 사용됩니다

모/자 구성 요소 간에 공유됩니다

예제

TODO 관리의 경우

1. API에서 가져온 백엔드와 함께 사용되는 데이터 모델 유형

types/task.d.ts에 쓰세요.
구성 요소 또는 라이브러리에서 API를 호출할 때 반환되는 객체의 유형입니다.
저는 JSON을 Object로 만들었기 때문에 방법이 없습니다.
any 처리에 비해,interface 처리가 비교적 좋은 상황에서 사용합니다.

export interface TaskData {
  id?: number;
  name?: string;
  state?: string; // enum でも
  priority?: string; // enum でも
}

사용 방법은 다음과 같습니다.

const response = await axios.get(url);
const task: TaskData = response.data;

2. 프런트엔드에서만 사용되는 유형(관련 함수가 있는 도메인 모델)

modules/task.공책에 쓰다.
API에서 반환되는 데이터도 도메인 모델의 유형이지만 이는 데이터 모델일 뿐입니다.대상을 대상으로 처리하려면 좀 번거롭다. (그래서 나는 개인적으로 함수형처럼 하는 것이 적당하다고 생각하지만 대상을 대상으로 하면 클래스를 사용하고 싶다.)
모듈은classes,domain,models일 수 있지만 여기에 역모델과 관련된 모듈을 넣을 수 있습니다.

import { TaskData } from '@/types/task';

export default class Task {
  private data: TaskData;
  constructor(data: TaskData) {
    this.data = data;
  }
  get data(): TaskData {
    return this.data;
  }
  public close(): void {
    this.data.status = 'closed';
  }
}

아마도 아래의 함수형 구조를 채택할 수 있을 것이다.

import { TaskData } from '@/types/task';
export const closeTask = (task: TaskData): void => task.status = 'closed';

예는 단일한 속성을 업데이트하는 것이기 때문에 그것이지만 더 복잡한 것이라면 함수화의 의미가 있기 때문에 상상해 보세요.
사용 방법은 다음과 같습니다.

import Task from '@/modules/task';
// or
import { closeTask } from '@/modules/task';

export default Vue.extend({
  props: {
    task: {
      type: Object as Task,
      required: true,
    },
  },
  // 略
  methods: {
    // ボタンなどの「タスクを完了する」アクション用のイベントハンドラ
    onCloseTask(): void {
      this.task.close();
      // or
      closeTask(this.task);
    },
  },
}

3. 구성 요소에서만 사용하는 유형

어셈블리에 쓰기.
특정 Vue 어셈블리에서만 사용되는 유형은 어셈블리에 선언됩니다.
예를 들어 작업 요약 페이지에 축소 범위 구성 요소가 있을 때, "모두""완료""미완성"이 세 가지 축소 범위가 있을 때 금형을 사용한다

enum FilteringTaskStatus {
  All = 'all',
  Done = 'done',
  Undone = 'undone',
}

const filterTaskStatus = (task: Task, value: FilteringTaskStatus): boolean => {
  if (value === FilteringTaskStatus.All) {
    return true;
  }
  if (value === FilteringTaskStatus.Done) {
    return task.done();
  }
  if (value === FilteringTaskStatus.Undone) {
    return !task.done();
  }
  return false;
};

type FilterValue = FilteringTaskStatus; // 型が増えたら Union にする

interface TaskFilter {
  value: FilterValue;
  filter: (task: Task, value: FilterValue) => boolean;
}

interface TaskFilters {
  // ] のあとの : が隣接していると行ごと消えるので間に半角スペースを入れています
  [key: string] : TaskFilter;
}

사용 방법

export default Vue.extend({
  data() {
    return {
      filters: TaskFilters = {
        'status': {
          value: FilteringTaskStatus.All,
          filter: filterTaskStatus,
        },
      },
    }
  },
  computed: {
    filteredTasks(): Task[] {
      return this.tasks.filter((task: Task): boolean => {
        for (let key in this.filters) {
          const f = this.filters[key].filter;
          const v = this.filters[key].value;
          if (!f(task, v)) {
            return false;
          }
        }
        return true;
      });
    },
  },
}

4. 상위 어셈블리 간에 공유되는 유형

서브어셈블리에 기록됩니다.
propsdown/eventsup 방식으로 부자간에 데이터를 교환할 때emit측과handle측에서 합성하는 것이 좋습니다. (대상을 되돌릴 때)
다시 할 수 있는 예는 생각나지 않지만, 하위 구성 요소에 작업 제작 모드가 있는 작업 요약 페이지 구성 요소가 있다면, "계속 만들기"콤보 상자를 선택하면 모드를 닫지 않고 다음 작업을 만들 수 있습니다. 이런 UI를 사용할 때생성된 작업 객체를 부울 값과 함께 보냅니다.
서브어셈블리

export interface TaskCreateResult {
  task: Task;
  isContinued: boolean;
}

export default Vue.extend({
 // (略)
  emitCreate(value: TaskCreateResult): void {
    this.$emit('create', value);
  }
});

상위 어셈블리

import TaskCreateModal, { TaskCreatedResult } from '@/components/TaskCreateModal';

export default Vue.extend({
  methods: {
    onOkClick(result: TaskCreatedResult) {
      if (!result.isContinued) {
        this.visibleCreateModal = false;
      }
    },
  },
});

끝내다

그리고 이런 경우에는 여기에 유형 정의를 놓으면 돼요. 이런 경우가 있으면 댓글란에 알려주세요