둘째주 #7 Typescript 기초

이번주 목표:
1.노마드코더의 Typescript로 블록체인 만들기 수강
2. 패스트캠퍼스 <프론트엔드 웹 개발의 모든 것 초격차 패키지 Online> #5 타입스크립트 부분 수강 && 정리!

타입 단언

타스는 타입추론이 가능하다. 매번 타입을 명시하지 않고 타입 추론을 활용하자.
초기화된 변수, 기본값이 설정된 매개 변수, 반환 값이 있는 함수. 추론 가능
코드 가독성이 올라감. 꼭 필요한 곳에서만 정확하게 타입을 명시해주면 된다.

• 타입 단언 (Assertion)
• 키워드는 as
• 딱 잘라 말하는 것임

1. HTMLBodyElement 요소를 사용할때 값이 없으면 null로 되기에 ts는 유니온으로 생각함. 이럴때 as 를 써줄 수 있다.
2. 또는 null이나 undefind가 아니다를 알려줄 수 있는 기능도 있음. Non-null 단언 연산자는 .!
3. if 조건문으로 if (el) {}를 한다면 el 이 있는 경우에만 사용하게 한다면 ts와 상관없이 js로 문제 해결. (타입 가드)

const el = document.querySelector(‘body’) as HTMLBodyElement
el!.textContext = ‘Hello world’

• as는 코드상 오류를 없애주지만 실행 시 오류가 날 수 있어서 적게 써야함…

• ex) x의 타입을 number, null로 정하고 (x as number).toFixed(2)를 한다면 코드상의 오류는 사라지지만 null이 들어간다면 toFixed 매소드를 쓸 수 없어서 런타임시 오류가 난다.

• 타입 단언은 잘못 사용하게 될 수 있기에 남발은 금물
  타입 단언으로 해결이 안되는 부분은 타입 가드를 사용할 수 있다

---

할당 단언 (Aseertion)

• 타입만 지정하고 값을 할당하기 전에 콘솔에 찍으려하면 ts는 초기화되기 전에 사용되었다고 오류를 냄.
• 그 오류를 없애고 undefined 맞다고 하고 싶다면.
  let num!: number. 콜론 앞에 !를 사용한다…

---

타입 가드 (Guards)

• 코드 상에서 오류를 방어한다는 의미로 보면 됨

1. ts 내에는 오류가 없어도 코드 실행시 에러가 발생할 수 있음. 그때는 타입 단언으로 해결되는게 아니어서 if 조건문 같은 js의 방법을 활용. if 조건에 null이나 undefined는 못들어가기 때문!
2. instanceof HTMLElement . null이라면 instance가 아니기 때문에 null일 경우 들어갈 수 없음.
3. if 에 typeof 를 써서 인수의 타입에 따라 행동을 결정하는 방법도 있다.

//2번
const h1El = document.querySelector(‘h1’)
if (h1El instanceof HTMLElement) {
	logText(h1El)
}

// 비슷한 예 (ts가 age는 undefined일수도 있다고 알게됨)
if (player.age && player.age < 10) {~~~}

//3번
function add(val: string | number) {
	if (typeof val === ‘number’) {
	console.log(val.toFixed(2));
	}
}