Types

공통으로 사용되는 타입은 /src/core/types 폴더에 ts파일을 작성한다. types에 작성한 interface, type은 프로그램에서 import하지 않아도된다.

INFO

interface, type을 export하고 import 하면 실행시 브라우저에서 오류가 난다. Uncaught SyntaxError: The requested module '/src/core/types/VmGrid.ts?t=1640759631954' does not provide an export named 'VmFlexColumn'
ts가 js로 변환되면 interface나 type은 사라지기 때문에 실행할때는 오류가 발생한다.

object 형태의 복잡한 타입은 interface로 선언한다.

특정한 값을 제한하거나 기존의 interface를 바로 사용하기 곤란한 경우 새로운 type으로 선언한다. ex) Mask나 OptionFirst, MenuTp

CodeName

popup, checkbox, radio, select 등에서 공통코드 아이템을 표현하는 타입
공통코드를 조회하면 서버에서는 code, name을 포함하는 결과를 반환하고, 클라이언트에서는 이를 CodeNameItem으로 받아서 처리한다.

interface CodeNameItem {
  code: string
  name?: string
  [index: string]: string | null | undefined
}

Const

사용여부는 "0" 또는 "1"만 가능해서 상수타입으로 선언하고 여부컬럼의 타입으로 지정한다.

Global

브라우저의 window에는 없지만, wijmo는 window에 등록되서 사용되는데 Window & typeof globalThis' 형식에 'wijmo' 속성이 없습니다 경고가 발생한다. window에서 사용하려는 변수는 declare interface Window {에 작성하면 경고가 사라진다.

Grid

그리드는 class와 interface로 나눠진다.

class

VmFlexGrid : wijmo의 FlexGrid를 상속하고 커스텀 기능이 추가됬음. 프로그램에서 그리드 변수의 타입으로 지정한다.
- template에서 VmGrid의 @initialized에 설정한 함수에서 VmFlexGrid를 할당한다.

<template>
  <VmGrid  @initialized="flexInitialized"/>
</template>

<script>
let flex: VmFlexGrid

function flexInitialized(s: VmFlexGrid) {
  flex = s
}
</script>

VmFlexColumn : wijmo의 Column을 상속하여 VmColumn class를 만들었는데, vscode에서 모든 속성을 구현하라고 에러가 나서 모든 속성을 optional로 변경환 타입. VmGrid의 columns props에 배열로 사용한다.
- VmGrid 작성시 columns props에 배열로 등록하거나, script에서 작성하고 변수를 지정한다.
- script에서 작성하면 타입 체킹이 더 잘 된다.

// template에서 직접 작성
<VmGrid :columns="[{}, {}]" />

// template이 복잡하면 변수로 분리할것을 추천함.
// script에서 작성하면 vscode의 코드제안 기능이 지원된다.
<VmGrid :columns="flexColumns" />
<script>
const flexColumns: VmFlexColumn[] = [
  {},
  {},
]
</script>

VmCollectionViewItem : wijmo의 CollectionView에서 하나의 아이템을 나타내는 타입.
- 서버와 주고받는 그리드의 데이터는 내부 관리를 위해 조회시의 순서, 저장시의 순서, 저장시의 타입을 관리한다.
- 각 프로그램에서 그리드의 아이템 타입은 VmCollectionViewItem을 상속 한다.
- _는 개발자가 사용하는 용도가 아니 내부처리를 위한 변수라는 의미.

export class VmCollectionViewItem {
  _index_?: number // = -1 // 조회했을때의 원래 순서
  _si_?: number // 저장할때 순서
  _tr_?: TrackType // 저장할때 타입
  // [index: string]: any

  constructor() {
    this._index_ = -1
  }
}

Example

export class FlexItem extends VmCollectionViewItem {
}
async function addRow() {
  flex.addRow(new FlexItem())
}

interface, type

TrackType
- CollectionView의 item을 서버에 저장할때 추가, 수정, 삭제 상태를 위한 타입
- _tr_의 타입
- 프로그램 로직중에서 추가, 수정, 삭제를 알고자 할때 참조한다.

type TrackType = 'A' | 'E' | 'R'

VmDataMap
- 그리드의 컬럼정의시 콤보박스 입력 컬럼이면 vmDataMap 속성을 지정할한다.

interface VmDataMap {
  tableId?: string // 쿼리 id
  code?: string // 공통코드의 코드
  optionFirst?: OptionFirst
  parent?: string // 상하위 관계일때 상위  binding
  child?: string // 상하위 관계일때 하위 binding
  shortCut?: string // 단축키
}

Mask

/src/setup/setupInputmaskExtends.ts에서 마스크를 정의한다.
/src/core/types/Mask.ts에 마스크를 추가한다.
VmSearch나 VmFlexColumn 사용시 Ctrl+Space를 눌러서 가능한 값을 제안 받을 수 있다.

메뉴정보가 필요할때 useMenu를 사용하는데, 메뉴에 대한 타입정보

type MenuTp = 'P' | 'M'
interface Menu extends TreeNode<Menu> {
  componentName?: string
  componentExists?: boolean

  // real menu data
  menuId: string
  menuNm?: string
  prMenuId?: string

  programId?: string
  programNm?: string
  programUrl?: string
  menuNmPath?: string
  menuTp?: MenuTp

  relPgmExistsYn?: string
  remarkTxt?: string
  sortSeq?: string
  systemCd?: string
  moduleCd?: string
  exclusiveTp?: string
  noticeCnt?: number

  selectYn?: string
  insertYn?: string
  updateYn?: string
  deleteYn?: string
  excelYn?: string
  printYn?: string

  btn01Yn?: string
  btn02Yn?: string
  btn03Yn?: string
  btn04Yn?: string
  btn05Yn?: string

  pSelectYn?: string
  pInsertYn?: string
  pUpdateYn?: string
  pDeleteYn?: string
  pPrintYn?: string
  pExcelYn?: string

  pBtn01Txt?: string
  pBtn01Yn?: string
  pBtn02Txt?: string
  pBtn02Yn?: string
  pBtn03Txt?: string
  pBtn03Yn?: string
  pBtn04Txt?: string
  pBtn04Yn?: string
  pBtn05Txt?: string
  pBtn05Yn?: string
}

모달은 VmModal이 defineExpose에서 노출하는 타입을 따른다.

defineExpose<{
  open: () => Promise<any>
  close: (result?: any) => void
}>({
  open,
  close
})

팝업 type은 팝업 프로그램의 설정정보, 호출시의 파라미터 그리고 닫힐때의 결과가 있다.

팝업 설정 정보
팝업 프로그램의 최상단에 설정한다.

팝업 설정. 팝업의 이름과 조회할 url, code와 name에 매칭되는 프로퍼티를 설정한다.
팝업 프로그램마다 해당 파일에 선언하고 defineExpose로 노출시킨다.
공통 팝업으로 사용될 경우에는 url, code, name은 필수로 작성한다.

interface PopupSetting {
  popupName?: string  // 팝업 이름. 프로그램 시작시 설정하므로 직접 작성 필요없음.VmPopup에 사용
  path?: string       // 팝업 파일의 경로. 
  title?: string      // 팝업 제목
  url?: string        // 팝업 자동 조회할 url
  code?: string       // 팝업 결과중에 코드에 매핑할 key
  name?: string       // 팝업 결과중에 명칭에 매핑할 key
  width?: string      // 팝업의 너비
  height?: string     // 팝업의 높이
  codeWidth?: string  // 코드의 너비
  nameWidth?: string  // 명칭의 너비
  // maxHeight?: string
}

팝업 호출 파라미터
팝업 호출시 전달할 값을 설정한다.

interface PopupParam {
  popupName: string
  code?: string
  name?: string
  corpCd?: string
  [index: string]: string | number | null | undefined
}

팝업 결과
팝업에서 선택한 결과 아이템

interface PopupItem {
  corpCd?: string
  code?: string
  name?: string
  [index: string]: any
}

팝업이 닫히면서 결과를 반환할때의 타입.
item은 선택한 object 데이터이고,
공통처리(VmPopup 등)를 위해 code와 name을 추출하여 반환한다.

interface PopupResult {
  popupResultCount?: number
  code?: string | null
  name?: string | null
  item?: PopupItem | null
  event?: Event
}

OptionFirst

VmSelect와 그릳의 VmDataMap에서 빈값을 나타내는 아이템에 표시될 명칭

type OptionFirst = 'ALL' | 'CHOOSE'

Tabs

TreeNode

Upload

CmmFile

파일 업로등와 관련해서 첨부파일을 나타낸다.
CMM_FILE 테이블의 컬럼

type VmCollectionViewItem = import('../components/grid/VmCollectionView').VmCollectionViewItem
interface CmmFile extends VmCollectionViewItem {
  fileNo?: string
  corpCd?: string
  fileDiv?: string
  fileSeq?: number
  drivPath?: string
  filePath?: string
  fileNm?: string
  descTxt1?: string
  descTxt2?: string
  relKey1?: string
  relKey2?: string
  relKey3?: string
  relKey4?: string
  relKey5?: string
  insertDatetime?: string
  tempFileKey?: string
  type?: string
  size?: number
}

UploadSaveData.

업로드로 저장할때 업로드 데이터를 나타낸다.
추가한 파일과 삭제된 파일을 관리한다.

interface UploadSaveData {
  addFileData: CmmFile[]
  removeFileData: CmmFile[]
  files: File[]
}

User

useAuth hook에서 return하는 사용자 정보

const { user } = useAuth()
console.log(user.value.userId)

interface User {
  corpCd: string
  userId: string
  userNm: string
  corpEnm?: string | null
  corpNm?: string | null
  deptCd?: string | null
  deptNm?: string | null
  empNm?: string | null
  empNo?: string | null
  bizplcCd?: string | null
  bizplcNm?: string | null
  ccCd?: string | null
  ccNm?: string | null
  userTpNm?: string | null
  initTp?: string | null
  initUrl?: string | null
  userTp?: string | null
  tempPasswordState?: string
  [index: string]: any
}

Types #

CodeName #

Const #

Global #

Grid #

class #

interface, type #

Mask #

Menu #

Modal & Popup #

Modal #

Popup #

OptionFirst #

Tabs #

TreeNode #

Upload #

User #