~타입 애일리어스와 인터페이스의 상속(extends) 까지 수강
💡 TypeScript를 사용하는 이유?
JS보다 자유도는 줄어들지만, 안정성이 늘어나서 에러가 줄고 책임을 덜 져도 된다. 그래서 JS 오타때문에 고통받는 것이 해결된다. 그리고 JS를 알면 적용하는게 그렇게 어렵지 않다. 왜냐면 우리 모두 JS type에 대한 개념을 알고 있기 때문이다.
예를 들어, 아래와 같은 구문들에 대해 자바스크립트에선 정적검사가 일어나지 않아서 문제가 된다.
정적검사: 프로그램을 실행시키지 않으면서 컴파일링 중에 코드의 오류를 검출
// JavaScript의 동일 연산자는 (==) 인수를 강제로 변환하여(coerces),
// 예기치 않은 동작을 유발합니다:
if ("" == 0) {
console.log("참입니다! 근데 왜죠??")
}
// JavaScript는 또한 존재하지 않는 프로퍼티의 접근을 허용합니다:
const obj = { width: 10, height: 15 };
const area = obj.width * obj.heigth;
console.log(area); // 왜 이게 NaN이죠? 철자가 어렵네요!하지만 타입스크립트에선 정적타입검사가 일어나기 때문에, 아래와 같이 문제를 잡아낼 수 있다.
정적타입검사: 어떤 것이 오류인지와 어떤 것이 연산 되는 값에 기인하지 않음을 정하는 것
💡 TypeScript는 JavaScript와 어떤 관계일까?
구문 (Syntax)
- 타입스크립트는 자바스립트의 구문이 허용되는 상위 집합언어
구문: 프로그램을 만들기 위해 코드를 작성하는 방법
타입 (Types)
- 다른 종류의 값들을 사용할 수 있는 방법이 추가된, 타입이 있는 상위 집합
- 타입스크립트를 최대한 믿어서 추천해주는 타입으로 하되, 그게 틀리거나 any로 추론하면 나서서 타입을 정해주자.
const a = 5;
const b = '3';
const c = a + b;
function add(x: number, y: number) { return x + y }런타임 특성 (Runtime Behavior)
- JavaScript의 런타임 특성을 가진 프로그래밍 언어. 그래서 타입검사에서 오류가 나도 컴파일링해준다.
삭제된 타입 (Erased Types)
- ⭐️ node.js나 브라우저는 타입스크립트를 못읽기 때문에 타입스크립트는 최종적으로 자바스크립트로 변환된다. 그래서 타입스크립트는 언어이자 컴파일러(tsc)이다. 타입스크립트를 지워도 자바스크립트로서 말이 돼야하기 때문에 타입이 적혀있는 부분을 명확하게 구분해야한다. 자바스크립트코드로 변환했을 때 코드가 남아있냐, 아예 안남아있냐도 중요한데 왠만하면 남기는게 좋다.
// 콜론, 타입, 인터페이스, 제네릭, 타입 + 선언된 실제함수, as
const obj: { lat: number, lon: number } = { lat: 37.5, lon: 127.5 };
const obj = { lat: 37.5, lon: 127.5 };
const a = document.querySelector('#root') as HTMLDivElement;
const a = document.querySelector('#root');
function add<T>(x: T, y: T): T { return x + y }
function add(x, y) { return x + y }
interface A {};
type A = {};⚙️ 프로젝트 빌딩
- (노드기반 프로젝트 기준)
npm i typescript --save-dev로 빌드
tsc(컴파일러)
- 코드자체의 타입검사를 해준다.
// npx tsc --noEmit 로 타입검사만 할 수 있다
$ npx tsc --noEmit
first.ts:2:1 - error TS2322: Type 'number' is not assignable to type 'string'.
2 a = 123;- 타입스크립트코드를 자바스크립트코드로 변환해준다. 단, 타입검사는 강제가 아니기 때문에 타입검사에서 오류가 나도 코드변환(컴파일링)해준다.
// npx tsc로 ts코드를 js코드로 변환컴파일링. 사실 비슷한 추상화를 가진 언어로 바꿔주는 부분에 있어서 트랜스파일링에 가깝다.)- 타입스크립트를 자바스크립트코드로 어떻게 바꿀지 옵션들을 tsconfig.json에서 설정해야한다.
npx tsc --init
//옵션에 대한 설명은 아래와 같다.
allowJs: true // 자바스크립트와 타입스크립트를 동시에 쓸 수 있음
⭐️ strict: true // 타입스크립트를 쓰는 의미가 있도록 항상 true로 하자!!
target // 변경할 자바스크립트 버전을 설정해줄 수 있음
module // 어떤 모듈시스템을 쓸거냐 (최신, 혹은 노드 모듈시스템)
forceConsistentCasingInFileNames // 대소문자 지켜서 모듈 임포트
skipLibCheck // 라이브러리 체킹을 건너뛰어라 (안쓸거면 검사하지마라)
jsx // error : Cannot use JSX unless the '--jsx'flag is provided 를 해결하기 위해 react-jsx로 설정해주었다.☑️ 참고
Superduper-India