반응형
타입스크립트는 html파일 내에서 직접 사용 불가
-> 터미널에서 변환 후 첨부
tsc -w-> ts를 js로 컴파일
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h4 id="title">안녕하세요</h4>
<a href="naver.com" class="link">링크</a>
<button id="button">버튼</button>
<!-- <script src="변환된 자바스크립트파일.js"></script> -->
<script src="index.js"></script>
</body>
</html>
tsconfig.json
{
"compilerOptions": {
"target": "ES5"
,"module": "commonjs"
,"strictNullChecks": true
// ,"strict": true
//strict 모든 옵션
}
}
index.ts
//<h4 id="title">안녕하세요</h4>
let 제목 = document.querySelector('#title');
//제목.innerHTML = '반가워요';
//자바스크립트 문법 - union type
//: 타입이 명확하지 않기 때문에 (null 가능)
//if(제목!=null){
if(제목 instanceof Element){
제목.innerHTML ='반가워요';
}
//타입스크립트 문법 -narrowing
//(1, 2)
//: 널체크, instanceof는 우측 클래스의 자식여부를 반환
//(3)as : typeAssertion 타입강제화 (유의해서 사용)
제목 = document.querySelector('#title') as Element;
제목.innerHTML ='반가워요';
//(4) ?: innerHTML 있을때만 (optional chaining)
제목 = document.querySelector('#title');
if(제목?.innerHTML){
제목.innerHTML ='반가워요'
}
//(5) 널체크 지우기
//<a href="naver.com" class="link">링크</a>
let 링크 = document.querySelector('.link');
//링크.href = 'https://kaao.com';
//널가능
if(링크 instanceof HTMLAnchorElement){
링크.href ='https://kakao.com';
}
//a태그는 Element로 자식을 확인 불가능
//HTMLAnchorElement
//타입스크립트의 타입 : Element
//태그별 타입 : HTMLAnchorElement, HTMLHeadingElement, HTMLButtonElement 등등
//이벤트리스너
let 버튼 = document.querySelector('#button');
버튼?.addEventListener('click', function(){
})
//해당 변수가 이벤트리스너 가능할때만, 그외엔 undefined반응형
'JavaScript > TypeScript' 카테고리의 다른 글
| 타입스크립트 클래스 (0) | 2024.02.05 |
|---|---|
| 타입스크립트 리터럴, 유니온/교차타입 (0) | 2024.02.02 |
| 타입스크립트 함수 (0) | 2024.02.01 |
| 타입스크립트 인터페이스 (구현과 상속) (0) | 2024.02.01 |
| 타입스크립트 기본타입 (0) | 2024.01.31 |