💻 TS 문법
🔺 유니언 타입
function exp(a:number | string) {
return a + 1; // 오류 발생
}인자를 유니언 타입을 사용하여 숫자와 문자열 모두 받을 수 있게 작성하면 에러가 발생함
유니언 타입은 사용자 정의 타입이므로 새로운 하나의 타입이기 때문임.
🍀 Type Narrowing
function exp(a:number | string) {
if (typeof a === 'number')
return a + 1;
else if (typeof a === 'string')
return a + 1;
else
return -1;
}타입의 범위를 좁히는 방법.
🍀 Type Assertion
function exp(a:number | string) {
return (a as number) + 1;
}as number를 사용하여 a를 숫자로 간주함.
그러나 실제로 인자에 숫자만 들어올 것이라는 확신이 필요함.
타입 에러의 원인을 알 수 없을 때 임시로 타입 체크를 벗어나거나, 데이터 타입을 확실하게 알고 있는데 타입 에러가 발생했을 때 사용
🔺 타입 스크립트 함수의 기타 반환 타입
🍀 unknown
- JavaScript의 any 타입과 유사한 타입
- 컴파일러에게 해당 값에 대한 타입 정보가 없음을 알림
- 어떤 값이 들어올 지 알 수 없는 경우에 사용 (타입을 정확히 알 수 없을 때)
- unknown 타입을 가지는 변수나 매개변수는 어떤 타입의 값도 가질 수 잇음
그러나, 직접적인 조작이 불가능
다른 타입으로 할당하기 전에 적절한 타입 검사(typeof)나 타입 단언(as)을 통해 원하는 타입으로 형 변환 필요함
any 타입보다는 unknown 타입 사용 권장
🍀 void
함수에서 반환되는 모든 값이 무시됨.
아무 값도 반환하지 않음
🍀 undefined
반환값이 없으면 기본으로 undefined 반환
🍀 never
- 결코 발생하지 않는 값 = 불가능
- 어떤 값도 할당할 수 없음.
- 예외 발생이나 무한루프를 실행하는 경우에 사용
💻 JS와 JSX
둘 다 React 프로젝트에서 사용되는 파일 형식임.
JSX는 JavaScript XML의 약자로, React에서 UI를 구성하는 데 사용됨.
즉, HTML과 JavaScript를 혼합한 문서로, 자바스크립트에서 XML을 추가한 확장형 문법임.
💻 TS와 TSX
- TS (TypeScript) : 타입스크립트는 자바스크립트를 기반으로 하며, 정적 타입 검사를 지원함.
- TSX (TypeScript with JSX) : TSX는 React에서 UI를 작성하는데 사용되는 타입 스크립트.
즉, typescript만 사용할 경우 확장자는 .ts
react component와 같이 사용할 경우 .tsx 사용
.tsx는 JSX 문법을 사용할 수 있지만, .ts는 JSX 문법을 사용할 수 없고 오직 타입스크립트만 가능함.
JSX와 TSX의 가장 큰 차이점은 정적 타입 검사의 유무임.
🔗 JSX 파일
JSX 파일에서는 자바스크립트 문법에 따라 컴포넌트를 작성하고, 컴파일 시점에 자바스크립트로 변환됨. JSX 파일은 JavaScript 환경에서 실행되며, 컴파일 시점에 타입 검사가 이루어지지 않음.
🔗 TSX 파일
TSX 파일은 TypeScript 문법에 따라 작성되며, 정적 타입 검사를 위한 타입 시스템을 활용할 수 있음. TypeScript는 JavaScript에 정적 타입을 추가한 언어로, 타입 에러를 사전에 감지하여 안정성을 높이고 디버깅을 용이하게 함. TSX 파일은 TypeScript 컴파일러를 통해 자바스크립트로 변환되기 전에 타입 검사가 수행됨.
