타입스크립트 핸드북과 Udemy강의를 토대로 Typescript를 공부합니다.
Const
const 키워드로 찾는 변수는 변경할 수 없다.
상수이기 때문에 새로운 값을 할당하려고 하면 그 값이 정확한 타입이라 하더라도 에러 발생바닐라자바스크립트에서는 코드를 실행하면 브라우저에서 오류 발생
typescript로 코드 작성 중 에러를 발견하여 더 일찍 코드를 수정하는 것이 더 좋다.var와 const와의 분명한 차이점은 값이 변하지 않는 것이고
var와 let과의 차이점은 이 변수를 사용할 수 있는 유효 범위가 다르다는 것전역 유효 범위 : 함수 외부에서 정의되는 변수는 스크립트의 어느 위치에서든 유효하다.
함수의 유효 범위 : 함수 내에서 정의된 변수는 해당 함수 내에서만 유효하다.var를 사용하면 자바스크립트는 함수의 유효 범위 및 전역 유효 범위 이외의 다른 유효 범위를 알지 못하는데,
let을 사용하면 이 중괄호 내에서만 유효하며 let과 const가 블록의 유효 범위라는 새로운 개념을 도입하기 때문!
즉, 변수나 상수가 정의된 블록이나 하위 블록에서는 항상 유효하다.
화살표함수
function 키워드 없이 함수를 작성할 수도 있는데,
매개변수 목록을 입력한 다음 등호와 부등호로 화살표를 만들고 함수를 입력하면 이는 유효한 함수가 된다.
매개변수를 괄호에 할당하고 매개변수를 반환할 수 있다.
표현식이 하나뿐인 경우 중괄호를 생략하면 해당 표현식의 결과가 자동으로 반환된다.
화살표 함수는 구문을 짧고 간결하게 할 수 있는 장점이 있다.const add = (a:number, b: number) => a+b; //하나의 매개변수만 취하는 함수의 표현식, return값이 없으므로 void, //매개변수는 output에 할당하고 output를 콘솔에 찍는다. const printOutput: (a:number | string) => void = output => console.log(output); printOutput(add(5,2));예) dom에 있는 button을 찾고, AddEventListener 함수를 작성할 때,
익명 함수를 입력해도 되고, 또한 함수 타입을 어디에도 지정할 필요가 없다.
addeventListener가 어떤 기능을 지니는지 그리고 이것이 event 객체가 된다는 것을 타입스크립트가 알기 때문에
타입스크립트는 이벤트 기반으로 올바른 event 객체를 추론 가능하다.const button = document.queryselector('button'); if(button){ button.addEventListender('click', (event) => console.log(event)); }
기본값 함수 매개변수🔥
함수에서 기본값 인수를 함수 매개변수에 할당할 수 있다.
두번째 매개변수에 대한 타입과 일치하는 기본값을 인수로 정하면
하나의 인수만으로 함수 호출이 가능하고 타입스크립트는 에러를 표시하지 않는다.타입스크립트나 자바스크립트는 기본값 인수를 건너뛰고 기본값이 없는 인자에 값을 입력하고자 한다는 것을 추론하지 않습니다.
순서를 따르므로 오른쪽에서 기본값을 설정해야 합니다.
기본값 인수를 허용하지 않는 매개변수가 기본값 매개변수 앞에 먼저 오도록 해야한다.const add = (a: number, b: number = 1) => return a+b; add(5); //6 //b가 취하는 기본값 인수를 타입스크립트가 인식하기 때문입니다. // const add = (a: number = 1, b: number) => return a+b; add(5); //error! //기본값 인수를 첫번째 매개변수에 설정하고 //하나의 인수로 함수를 호출하면 여기로 전달되는 인수가 같은 순서로 매개변수에 전달되므로 에러 발생
나머지 매개변수🔥
나머지 매개변수는 인수를 무한정으로 받아들이기 위한 정말 유용한 기능이다.
//타입이 숫자인 인수들을 수를 알 수 없을 때 스프레드로 나머지매개변수를 표현한다. //나머지매개변수는 인수를 배열로 받고 그 배열의 타입을 number라고 할당한다. //배열의 타입을 배정하지 않으면 any[]로 타입추론한다. 명확하게 수행하기 위해 타입배정한다. const add = (...numbers: number[]) => { return numbers.reduce((acc,cur) => acc+cur); } console.log(add(4,2,7,4,2)); //총합 // //튜플로 이용하기 //인수가 몇개일지 모르지만 매개변수의 수는 정하고 싶을 때, 이러한 코드를 써서 4번째 인수부터는 날린다. const add = (...numbers: [number, number, number]) => { return numbers.reduce((acc,cur) => acc+cur); } console.log(add(4,2,7,4,2)); //총합
배열 및 객체 비구조화 할당
구조 분해는 원래 배열에서 요소를 추출하는 것
여기서 구조 분해는 원래의 배열을 바꾸진 않는다.
추출한 값은 새로운 상수나 변수로 복사되는 것, 배열에서 실제로 제거되는 것 X
-> 그러므로 구조 분해보다 정확한 비구조화 할당이라 한다.배열의 순서에 따라 대괄호 쌍내의 항목들이 상수로 저장되며,
추출하지 않을 항목들을 나머지 매개변수로 추가하여 배열로 저장할 수도 있다.const hobbies = ['sports', 'cooking']; const [hobby1, hobby2, ...remainingHobbies] = hobbies; console.log(hobbies, hobby2); //['sports', 'cooking'], 'cooking' / const person = { name : 'Max', age : 30 } const {name, age} = person; console.log(name, age); // ('Max', 30) / const {name: myName, age} = person; //타입 배정이 아니라 새 이름을 설정 console.log(myName, age); // ('Max', 30)
코드 컴파일 시..🔥
타입스크립트는 최신 자바스크립트에서 이전 자바스크립트까지도 작업 수행을 지시하면 컴파일을 수행한다.
tsconfig.json > "complierOptions" > "target" : "es6"라고 설정하면,
let, const 키워드와 지금까지 배운 최신자바스크립트 문법을 활용한 최신 자바스크립트파일로 컴파일하지만,
"target" : "es5"라고 설정하면, var를 사용하며 최신 자바스크립트 문법에서 지원되지 않는 특정 구문에 대한 해결방법을 찾으며 구조분해구문도 제거 되며 코드가 더욱 길어진다.
