(typescript) object를 처리하는 인덱스자가 String 값을 사용할 수 없는 오류

(20190722) 제목은object에 대한 색인 오류이기 때문에 의미에서 틀렸기 때문에 다음과 같이 제목을 변경했습니다.

변경 전: "(typescript) object 인덱스에서 String 값을 사용할 수 없는 오류를 처리합니다"

변경 후: "(typescript) object를 처리하는 인덱스자가 String 값을 사용할 수 없는 오류"

문제: String 변수를 Object 색인으로 사용할 수 없습니다.

함수 목록과 같은 Object에서 String 전달 방법명으로 함수를 동적으로 호출하고 아래 처리된 곳을 적어서 Typescript의 Error가 되었습니다.
Demo.ts

const dateFormatFunctionList = {
  Y: function(date:Date):String{ return date.getFullYear().toString()},
  y: function(date:Date):String{ return (date.getFullYear().toString()).slice(2) },
}

function getFormattedDate(date:Date, format:String):String{
    //javascriptの動的なメソッド呼び出し
    return dateFormatFunctionList[format](date);
}

getFormattedDate(new Date(), 'Y'); //2019
getFormattedDate(new Date(), 'y'); //19

error.txt

型 'String' はインデックスの型として使用できません。ts(2538)

원인: typescript에서 Object 인덱스는 String을 사용할 수 없습니다.

typescript는 대상의 색인자로서 String을 사용할 때 상기 오류가 발생할 것 같습니다.
(javascript 표준에서 브래킷 표현법이라고 불리는 방법을 통해 키 괄호 ([]) 에 문자열을 전달하는 방법으로 접근할 수 있습니다.그러나 원래 문자열에서 객체에 동적으로 액세스할 때 연상 배열(Map)을 사용할 수 있습니다.
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors

해결 방법 1: 오류를 피하기 위해 소문자string형을 인덱스로 사용합니다.

대상의 인덱스는 기본체 형식String을 전달하는 데 오류가 발생하지만, 모든 소문자string 형식을 인덱스로 전달하더라도 typescript는 오류가 없습니다.
https://fedidat.com/550-typescript-string-index/
따라서 String에서 전달된 값으로 toString()을 진행하여 원어가 아닌 소문자string형으로 변환하여 더 이상 오류가 발생하지 않습니다.(또한 dateFormatFunctionList을any형으로 전환함으로써const의 자동형 추리 부대형을 해제하였다.)
Demo.ts

  function getFormattedDate(date:Date, format:String):String{
      //javascriptの動的なメソッド呼び出し
      return (dateFormatFunctionList as any)[(format.toString())](date);
  }

이렇게 하면 잘못이 없다.

해결 방법 2:'string형 임의의 키를 가진 대상'이라는 인터페이스를 자체 제작한다.

이 문제는 원래'기본적인 대상형에 비해 색인자는 String을 사용할 수 없다'는 문제이기 때문에string형의 임의의 키 대상인interface를 통해 해결할 수 있습니다.
다음과 같이 IndexableInterface를 생성합니다.
IndexableInterface.ts

export default interface IndexableInterface {
  [
   key: string
  ]: any;
}

액세스할 객체에 이 인터페이스를 지정합니다.
Demo.ts

import IndexableInterface from './IndexableInterface'
const dateFormatFunctionList = {
    Y: function(date:Date):String{ return date.getFullYear().toString()},
    y: function(date:Date):String{ return (date.getFullYear().toString()).slice(2) },
}

  function getFormattedDate(date:Date, format:string):String{
      //javascriptの動的なメソッド呼び出し
      return (dateFormatFunctionList as IndexableInterface)[format](date);
  }

  getFormattedDate(new Date(), 'Y'); //2019
  getFormattedDate(new Date(), 'y'); //19

이제 String형의format을 소문자string형으로 자동으로 변환할 수 있습니다. 더 이상 오류가 발생하지 않습니다.

기타: 인덱스 인터페이스의 키에 기본체 문자열 형식을 지정할 수 없습니다

IndexableInterface 키의 경우 기본체 String으로 변환하려고 하면 다음 오류가 발생할 수 없습니다.

error.txt

インデックス シグネチャのパラメーターの型は 'string' または 'number' でなければなりません。ts(1023)

그러니까

typescript에서 대상 인덱스에 사용할 수 있는 서명의 형식은 소문자string형이나number형에 한정됩니다.

의 제한.

전제 조건

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./built/",
    "sourceMap": true,
    "strict": true,
    "noImplicitReturns": true,
    "noImplicitAny": true,
    "module": "es2015",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": "node",
    "target": "es5",
    "lib": [
      "es2016",
      "dom"
    ]
  },
  "include": [
    "src/ts/**/*"
  ]
}

2019/07/31 추기props의 type에 소문자string형을 지정하면 오류가 발생합니다.

'string' only refers to a type, but is being used as a value here.Vetur(2693)

string은 typescript 형식입니다.

vue에 전달되는props는'props명칭을 키로 설정하고 이 설정object를value로 설정하는object'의 형식인 것 같습니다. 형식을 키'type'의 value로 전달하기 때문에string은 typescript의 type일 뿐이므로 설정할 수 없습니다.

문자열은javascript의 형식 대상입니다.

이에 비해 String은 전역 형식의 대상이기 때문에 object의value로 설정할 수 있기 때문에 상기 상황에서 오류가 발생하지 않습니다.이런 상황에서props는'문자열형 데이터로 변환할 수 있는 데이터(문자열 문자 등)'의 유형으로 유형 제한을 할 수 있습니다.
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String
이 사이트도string과 String의 차이를 상세하게 기재하였으니 참고하겠습니다.
https://saku.io/difference-string-types-in-typescript/
그러니까

string은 type(typescript의 유형, 단지 type)

String은 글로벌 유형 객체(javascript의 유형 객체)

그런 것 같습니다.
여기서 마치겠습니다.