Jieunny의 블로그

Section 1. 시작하기 본문

CodeStates/TS 스터디

Section 1. 시작하기

Jieunny 2023. 2. 15. 09:20

📣  강의 내용 정리

𝟭.  타입스크립트를 사용하는 이유

➰ 자바스크립트에서 발생하는 예상하지 못한 에러를 사전에 방지할 수 있다.

function add(num1, num2) {
	return num1 + num2;
}

add(1, 2); // 3
add('1', 2); // '12'

➰ 개발자가 의도한 것은 number 값 두개를 더하는 것이었으나, string 값이 하나 들어오면 자바스크립트는 문자열을 이어서 반환한다.

➰ 이를 방지하기 위해서는 분기를 나누는 과정이 필요하다.

➰ 하지만 타입스크립트에서는 이를 코드 작성 중간에 알 수 있도록, 예상한 타입이 아니면 에러를 표시해준다. 

 

𝟮.  타입스크립트 컴파일

tsc 파일이름

➰ tsc app.ts 실행 시 app.js 파일을 얻는다.

 

𝟯.  lite-server

npm install --save-dev lite-server

파일을 수정하고 저장하면, 새로고침 없이 변경 사항이 브라우저에 적용된다.

➰ package.json 파일의 scripts에 "start : "lite-server" 를 추가한다.


💡 새로 알게 된 점

1. JS와 TS에서 'number' 타입이 아닌 변수 앞에 '+' 를 붙이면 'number' 타입으로 변환된다.

num1 = '1';
num2 = '2';
console.log(typeof(+num2));	// 'number'

 

2. '!' 키워드 사용으로 타입스크립트에게 요소가 null 이 아님을 알려준다.

const input1 = document.getElementById("num1")!; 
// 이 값이 null이 아님을 의미한다.