타입스크립트 필수 문법 정리

인터페이스

interface

---

readonly 읽기전용 키워드

? 선택적 프로퍼티/메서드 키워드

---

 

열거형

enum

• 리터럴 타입, | 를 사용

---

Any 

어느 타입이든 가능하게 설정

 

유니언 타입

| 를 사용하여 여러 타입들을 동시에 지정

---

타입 검사

typeof

 

커스텀 타입 만들기

type

---

 

매개변수의 기본값 지정 (= 기본값)

 

접근 제한자

1. private
2. public
3. protected

 

클래스의 constructor

클래스로부터 객체를 만들 때 호출되어 객체의 초기화 담당

 

private로 정의된 프로퍼티를 다루기 위한 Getter/Setter

get 프로퍼티() { return }

set 프로퍼티(value) { }

 

---

 

타입스크립트와 HTML

자바스크립트 -> document.querySelector() 로 DOM 에 접근 가능

타입스크립트에선?

타입스크립트는 타입이 애매한 것을 지양하므로 여러 타입(유니언 타입...)일 때 타입을 하나로 narrowing 해준다. (null 처리해주는 것)

 

1. null 을 직접 조건연산자로 확인해주기

let title = document.querySelector('#title'); // Element or null

if(title != null) {
	title.innerHTML = '하이!';
}

 

2. instanceof 연산자로 확인해주기

변수명 instanceof 클래스 -> 변수가 클래스거나 클래스에 속한 인스턴스인지 확인해서 boolean 리턴

let title = document.querySelector('#title'); // Element or null

if(title instanceof Element) {
	title.innerHTML = '하이!';
}

 

3. as 타입 사용

let title = document.querySelector('#title') as Element; // Element로 덮어써주기

이 경우 null 이 들어가도 as 로 지정해준 타입으로 확정지어주므로 남용하면 안됨.

 

4. ? 선택적 키워드 사용

없으면 undefined 를 리턴해주게 만듦

let title = document.querySelector('#title'); // Element or null
title?.innerHTML = '하이!';

 

 

HTML 요소의 타입들

Element 타입

- HTMLAnchorElement 타입 -> <a>

- HTMLHeadingElement 타입 -> <h1>

- HTMLButtonElement 타입 -> <button>

기본적인 Element 타입은 가지고 있는 정보값이 많이 없기 때문에

각각의 태그들이 가지고 있는 Element 타입은 따로 있으므로 타입스크립트로 접근할 때 주의해줘야 한다!

 

let link = document.querySelector('.link');
link?.href = 'naver.com';

let btn = document.querySelector('.btn');
if (btn instanceof HTMLButtonElement) {
	btn.addEventListener('click', function(){ });
}

 

 

기본 타입

• number
• string
• 배열 : Array<타입> / 타입[ ]
• any
• 튜플(Tuple) : [타입1, 타입2]
• void
• never : 에러를 반환하거나 무한 루프인 경우 리턴타입으로 지정 가능
• 열거형 : enum
• null / undefined
• object