타입스크립트 핸드북과 Udemy강의를 토대로 Typescript를 공부합니다.
Typescript는 무엇이며 왜 사용해야 할까?
자바스크립트 슈퍼셋, 즉 자바스크립트를 기반으로 하는 프로그래밍 언어
타입스크립트는 자바스크립트 언어를 사용해 새로운 기능과 장점을 추가하여 자바스크립트를 한 단계 끌어올린다.
타입스크립트로 오류가 적고 훨씬 훌륭하며 깔끔한 코드를 작성할 수 있고,
자바스크립트에는 없는 흥미로운 새로운 기능을 사용할 수 있다.단점 : 타입스크립트는 브라우저와 같은 자바스크립트 환경에서 실행할 수 없다.
브라우저, node.js는 타입스크립트를 실행할 수 없다.대신, 타입스크립트는 프로그래밍 언어면서 도구로,
코드를 실행하여 타입스크립트 코드를 자바스크립트로 컴파일하는 강력한 컴파일러이다.
새로운 기능과 장점을 모두 갖춘 타입스크립트 코드를 작성하여 일반적인 자바스크립트 코드를 얻을 수 있다.타입스크립트의 새로운 기능을 추가하는 방법?
새로운 기능들을 자바스크립트 해결책으로 컴파일하는 타입스크립트 컴파일러를 사용!
타입스크립트 컴파일러는 보다 나은 구문과 작업을 보다 쉽게 수행하게 하는 방법을 제공하고,
더 복잡한 자바스크립트 스니펫으로 더 멋지고 쉬운 방법으로 컴파일하게 해준다.자바스크립트 언어에서 아예 불가능한 것은 추가할 수 없지만,
보다 사용하기 쉬운 새로운 기능, 더 나은 구문을 추가할 수 있다.
또한 타입을 추가하고, 브라우저 런타임에서 에러발생 전 코드의 에러를 초기 개발 과정에서 발견하고 수정할 수 있도록 추가적인 오류검사를 제공한다.
<타입스크립트를 쓰는 이유 예제>
2개의 숫자로 된 문자열을 더하면 수학적 계산 대신 연결된 문자열이 된다.
자바스크립트의 완화 전략으로 인해 기술적 에러는 아니지만 코드에 논리적 실수가 있다.
타입스크립트로 개발 도중 이와 같은 에러를 포착하여 이러한 문제를 방지하는데 도움이 되는 도구가 있다.자바스크립트에서 input값에 엑세스할 때 알아둬야 할 중요한 것
⇒ input타입이 무엇이든 숫자든 상관없이 항상 문자열이다!
그래서 input.value+input.value은 숫자를 계산하는 것이 아닌 두 문자열을 연결한다.
⇒ 타입스크립트로 해결 가능!
타입스크립트 설치방법 : 터미널에서npm install -g typescript
//처음 코드
const button = document.querySelector("button");
const input1 = document.getElementById("num1");
const input2 = document.getElementById("num2");
function add(num1, num2) {
return num1 + num2;
}
button.addEventListener("click", function() {
console.log(add(input1.value, input2.value));
});//자바스크립트에서 고친 코드
const button = document.querySelector("button");
const input1 = document.getElementById("num1");
const input2 = document.getElementById("num2");
function add(num1, num2) {
if (typeOf (num1) === "number" && typeOf (num2) === "number") return num1 + num2;
else return +num1 + +num2;
}
//type이 number인지 확인하고 맞다면 더하면 되고
//아니라면 각 매개변수 앞에 더하기 기호를 붙여 number타입으로 변한다.
//이는 애초부터 에러를 방지하여 에러가 발생하지 않도록 추가적인 코드 작성방법
//문자열은 전달할 수 없다라는 것을 확실히 하고 싶다면?
//숫자를 얻었는지 확인 할 필요 없는 함수를 작성해야 한다.
button.addEventListener("click", function() {
console.log(add(input1.value, input2.value));
});//타입스크립트에서 고친 코드
//타입스크립트에서 처음 코드를 그대로 복붙하면 오류를 바로 표시해준다.
//첫번째는 일부 상수들이 여러 파일에서 사용됨을 식별하면 오류 표시! -> js파일 삭제하면 해결
//두번째는 value 속성이 실제로 있는지 확실하지 않음을 오류 표시! ->
//타입스크립트는 html코드가 작동하는지 확인하기 위해 분석하는 게 아니다.
//타입스크립트는 우리의 의도를 더 명확히 하고 코드를 다시 확인하도록 요구한다.
const button = document.querySelector("button")!;
const input1 = document.getElementById("num1")! as HTMLInputElement;
const input2 = document.getElementById("num2")! as HTMLInputElement;
//dom요소 뒤에 !를 붙이는 것은, 타입스크립트에게 이것이 결코 null을 야기하지 않을 것임을 알려주는 것
//또한 이것이 항상 input요소이기 때문에 타입스크립트에게 이것이 어떤 유형의 요소인지를 알려주기 위해
//형 변환이라는 HTMLInputElement로 사용할 수 있음을 표시한다.
function add(num1, num2) {
return num1 + num2;
}
//매개변수들 중 하나에 마우스 커서를 올리면 num1 : any를 확인할 수 있다.
//그 안에 무엇이 있는지 알지 못하며 어떤 타입의 값이든 될 수 있다는 뜻
//보다 명시적인 타입을 추가할 수 있다.
//add(num1, num2) -> add(num1: number, num2: number)
//이러면 오류발생(string형식의 인수는 number형식의 매개변수에 할당될 수 없다.)
//컴파일러 호출 후에도, 똑같이 터미널에 에러 발생이 보인다.
//이 문제는 타입스크립트가 input 요소의 value 속성에서 얻는 것이 문자열이 되리라고 이해한다.
//이때, 사용하는 것이 추가타입!! 타입스크립트의 가장 큰 장점!!
//input.value를 가져올 때 더하기 기호를 붙여 숫자타입으로 변환하면 된다.
//add(input1.value, input2.value) -> add(+input1.value, +input2.value)
//에러를 수정하고 다시 컴파일하면 에러없이 컴파일 가능
button.addEventListener("click", function() {
console.log(add(+input1.value, +input2.value));
});(타입스크립트 → 자바스크립트로 바꿔주는) 컴파일 방법
타입스크립트 컴파일러 호출 : tsc (파일명).ts
→ 타입스크립트를 컴파일한 자바스크립트 파일이 새로 생성된다.
하지만 타입스크립트에서 추가한 타입기능들은 자바스크립트에서 표시되지 않는다.
타입스크립트의 타입기능들은 단지 기능의 타입일 뿐,
자바스크립트로 컴파일 할 때 이들은 코드를 평가하고 잠재적 에러를 찾는 데 사용되지만 해당 작업 후에 제거되고 일반 자바스크립트가 출력으로 얻어진다.index.html 파일에서 원래는 기존의 .js파일을 script해서 불러왔다면, 타입스크립트로 컴파일한 자바스크립트를 불러오려면
그 컴파일한 자바스크립트의 파일을 가져와야 한다.
브라우저가 타입스크립트를 실행할 수 없으므로 항상 자바스크립트 파일을 가져와야 한다.*타입스크립트는 보다 나은 깔끔하고 에러가 적은 코드를 작성할 수 있게 해준다.
타입스크립트는 아주 중요한 타입과 데이터를 추가합니다.
타입을 이용하면서 우리는 작동 방식에 대해 훨씬 더 명시적이어야 하며 예상치 못한 많은 에러를 피할 수 있습니다.게다가 최신 IDE(통합개발환경)를 사용할 수 있습니다. 이는 이러한 타입의 지원을 통해
더 나은 자동 완성 기능을 제공하고 코드를 컴파일하기도 전에
에러를 보여줍니다.script에 defer를 추가한 코드는 변경사항을 확인할 수 있게 해준다.
(코드가 브라우저의 스크린 상에서 직접 변경을 하거나 브라우저 내 콘솔에 무언가를 기록할 때)
강의 시작 시 할일
npm install
npm install -g typescript
npm install --save-dev lite-server
(이 프로젝트에서 사용할 수 있는 도구를 설치할 수 있도록 함.=개발전용종속성 )
package.json파일에서 “scripts”에 test코드 밑에 추가로 “start”: “lite-server” 입력
lite-server : package.json 파일 옆에 항상 index.html 파일을 제공하는 간단한 개발 서버
npm start하면
localhost:3000 으로 브라우저에 접속하면 코드가 여기서 실행된다.
ctrl+c하면 라이트서버 종료이렇게 하는 이유?
디렉토리의 다른 파일이 변경될 때마다 페이지를 자동으로 다시 로드하지 않는다.
ts파일 컴파일 후 페이지가 자동 로드 된다.
