Dom
querySelector
getElementById
addEventListener
등은 JavaScript를 통해 HTML 및 CSS와 상호 작용하는 메서드
TypeScript와 이러한 메서드의 상호 작용 방식
컴파일러 옵션 설정
lib 옵션
대부분의 경우 건드리지 않고 기본값만 사용하지만 옵션을 수정하고 일부를 추가해서
TypeScript에 해당 타입에 접근해야 될때가 있다
기본적으로 TypeScirpt는 DOM의 모든 타입 정의를 자동으로 인지한다
DOM의 모든 타입 정의를 자동으로 인지함.
document 및 요소에 대한 메서드와 이벤트 타입 정의.
별도로 설치하거나 하지 않아도 TypeScript에는 모든 인터페이스와 타입이 정의되어 있음.
그런데 백엔드나 노드에서 작업을 할 경우에 이러한 타입이 필요하지 않게 되면
중지시킬 수 있다.
또는 TypeScript가 모르는 다른 타입을 추가할 수도 있다
tsconfig.json에 있는
lib 프로퍼티를 사용한다.
lib는 라이브러리의 약자이다.
tsconfig.json 파일에서 compilerOptions 밑에 있는
"lib": []기본값은 비활성화되어 있다.
비활성화되어 있을 때는 기본값을 사용하며 DOM이 포함되어 있다.
tsconfig 공식문서를 보면
https://www.typescriptlang.org/tsconfig
Lib까지 스크롤을 내려보면 TypeScript는 빌트인 JS API의 타입 정의 기본값을 포함한다
예를 들어 Math객체, document 브라우저 환경에 위치한 항목에 대한 타입 정의.
이것이 기본값.
위의 “lib”을 활성화 시키면, 괄호 안에 아무것도 없기 때문에.
index.ts 파일에서 document.getElementById 를 쓰면 document가 뭐냐고 에러가 난다.
document를 찾지 못해서 모르는것. 따라서 any 타입으로 추측하게 된다.
이때 괄호안에 “DOM”을 넣어주면 수동으로 추가할 수 있다.
타입 정의 파일은 마지막이 .d.ts로 끝난다
replaceAll 메서드는 es2021에서 추가된 메서드다.
lib안에 DOM만 있는 상태에서는 사용할 수 없다. 쓰면 친절하게도 es2021 이상으로 바꾸라고 뜸.
target을 es5에서 es2021로 수정해도 된다.
아니면 lib에서 “ES2021”을 추가하면 es5이지만 ES2021도 알아먹도록 할 수 있다.
이방법이 더 좋을때가 있음.
ES2021의 문자열 부분만 추가할수도 있다.
ES2021.String 이런식으로. 공식문서에 나열되어있음.
Non-Null 단언 연산자
const btn = document.getElementById("btn");btn 변수의 타입이 무엇일까?
document.getElementById는 HTMLElement나 null을 반환하는데
HTMLElement 타입 즉 제네릭 HTML요소이다
타입스크립트는 getElementById가 반환하는게 제네릭 HTML요소인 것만 인지한다
해당 요소를 찾지 못하면 null을 반환한다
타입스크립트는 런타임이 아닌 사전에 작동한다
존재하는지 알 수 없는 값으로 작업할때 TypeScript에서 오류가 생긴다.
const btn = document.getElementById("btn");
btn.addEventListener("click", function() {alert("click!")
// -> 오류가 뜬다
btn?.addEventListener("click", function() {alert("click!")
// -> 해결책1. btn이 존재할때만 실행됨. 타입스크립트가 아닌 자바스크립트 기능.
const btn = document.getElementById("btn")!;
// -> 해결책2. 선언할때 뒤에 느낌표 !를 붙이면 절대 null일리 없다는 단언을 하게됨.
값이 확실하게 존재하고, null이 아닐 때만 사용한다.
절대 불확실한 런타임에서 작업할때 사용하면 안된다.
타입스크립트의 핵심적인 부분을 무시하고 있기 때문.
null이 아니니 걱정하지 말라고 하는 기능.
그러나 타입스크립트의 핵심이 바로 null이 있는지 확인하고 알려주는 것이다.
그러니 확실하지 않으면 사용하지 말것.
Type Assertion
타입 단언
TypeScript에다가 이 값을 다른 타입으로 취급하라고 단언하는 것.
const myPic = document.querySelector("profile-image");
// 타입스크립트는 HTMLElement라고 추론한다.
const myPic = document.querySelector("profile-image") as HTMLImageElement;
// 타입스크립트에게 이것이 HTMLElement라고 확실히 한다.as 키워드를 타입 앞에 쓴다.
let mystery: unknown = "Hello World!!!";
const numCharas = mystery.length; // 에러가 뜬다. unknown 타입에는 length메소드를 쓸 수 없다.
const numCharas = (mystery as string).length; // 에러가 사라짐.let mystery2: unknown = 4;
const Charas = (mystery2 as string).length;
//이래도 런타임 전에는 에러가 안뜸. 실행하면 물론 에러가 난다.DOM으로 타입 단언
인풋 박스와 버튼이 있을때
const btn = document.getElementById("btn")!;
const input = document.getElementById("todoinput")! as HTMLInputElement;
btn.addEventListener("click", function() {
alert(input.value);
input.value = "";
});2행에 as 부터가 없으면 input.value에서 오류가 난다. 제네릭 HTML요소에는 value가 없기 때문.
따라서 HTMLInputElement라고 단언을 해줘야 input.value에 엑세스할 수 있다.
