가끔 타입스크립트가 알 수 없는 값의 유형에 대한 정보를 얻을 수 있습니다.예를 들자면 사용자가 id 를 이용해 html파일에서 input 요소를 사용하고자 하자면, 타입스크립트는 그 요소가 일종의 HTMLElement 라는 것을 알고 있을지 모릅니다. 하지만, 사용자는 이 페이지에는 언제나 특정 아이디를 가지고 있는 HTMLInputElement 를 가지고 있을 것을 알고 있을 것 입니다. 이래서 이러한 상황에서는 조금더 특정한 타입을 지정해주기위해 타입 형변환을 이용해 줄 수 있습니다
const input2 = document.getElementById("userInput");
input2.value = "hi";
위의 경우에는 input2 가 null 일수도 있고 HTMLElement 일수도 있으므로 에러가 발생할 것입니다. 그래서 아래와 같이 null 이 아닐 경우와 그리고, 요소가HTMLInputElement 임을 형변환 해주어야합니다
const input = <HTMLInputElement>document.getElementById("userInput")!;
input.value = "hi there";
그래고 위의 코드는 아래와 같이도 작성해 줄 수 있습니다
const input2 = document.getElementById("userInput") as HTMLInputElement;
그런데 아래와 같이 이미 구체적으로 타입이 명시 되어있는 경우에는 타입 형변환이 불가능합니다
const x = "hello" as number;
위의 경우에는 문자열을 숫자로 변환하는 것이기 때문에 만약 이를 의도적으로 하는 경우에는 hello를 한번 unkown 타입으로 형변환 후에 다시 형변환 해주어야합니다.
인덱스 타입은 타입을 동적으로 이용할때 사용하는 방법 중 하나로 코드를 유연하게 작서을 하는데 도움을 줍니다.
예를 들어 사용자가 입력하는 값에 따라 유효성을 검사하고 그에 따른 에러를 뱉어주는 객체를 만들고자할때 아마 아래와같은 인터페이스를 만들어 주어야 할 것 입니다
interface ErrorContainer {
}
그런데 이러한 에러 식별자는 여러 속성을 지녀야하는데 ,정확히 어떤 속성이 어떻게 들어가야할지 명확하지 않을 때가 존재하기도하고, 이를 재사용하고 싶을때도 분명 존재할 것입니다. 즉 미리 타입의 속성과 속성명은 알고 있으나 값의 타입을 알고 있는 경우에 이 인인덱스 속성을 이용하기에 용이합니다.
인덱스 속성의 모양은 아래와 같습니다
interface ErrorContainer {
[prop: string]: string;
}
여기서는 prop 이라 작성해주었지만 key 라는 이름 역시 가능합니다, 그리고 그 불리언을 제외한 타입을 지정해 줄 수 있는데, 이를 통해 이 ErrorContainer 를 사용하는 객체는 반드시 문자열의 속성을 지닌다는 것을 지정해 줄 수 있습니다.그리고 값 역시 문자열임에 명확하다면 위와같이 지정해 줄 수 있습니다.
이를 통해 우리는 속성의 이름과 속성의 개수는 모르지만 결국 ErrorContainer 에 추가되는 모든 속성은 문자열이여야한다는 것을 지정해줄 수 있습니다. 그래서 이를 통해 사전 정의된 속성을 추가해 줄 수 있습니다.
만약 id가 숫자라면 이미 인덱스 타입은 문자열이므로 에러가 발생하게 됩니다