타입스크립트 (TypeScript)

타입스크립트(TypeScript)
자바스크립트에 정적 타입을 추가한 프로그래밍 언어
자바스크립트로 작성된 코드를 확장하여 타입 검사와 코드 안정성을 높여줌
런타임 오류를 줄이고 더 안정적인 코드를 작성할 수 있음
(컴파일 시점에 타입 오류를 잡아낼 수 있기 때문)

컴파일 시점: 우리가 vsc에서 코드를 작성하는 시점
런타임 시점: 프로젝트가 동작하는 시점

특징
1. 정적 타입: 변수, 함수의 매개변수 및 반환 값에 타입을 지정하여 컴파일 시점에 타입 오류를 검사할 수 있음
2. 타입 추론: 타입을 자동으로 추론
3. jsx와 호환: 그대로 사용하면서 타입 검사를 추가할 수 있음

장점
1. 타입 안정성: 컴파일 시점에서 오류를 방지할 수 있음
2. 자동 완성: 코드 작성이 빠르고 오류가 줄어듬
3. 유지 보수성 향상: 오류를 미리 확인할 수 있기 때문

기본 타입
1. string: 문자열
2. number: 숫자
3. boolean: 참/ 거짓

배열 타입
1. 배열은 type[] 형태로 타입을 정의 <const todoList string[] = ["Write code"];

인터페이스
1. 객체의 구조를 정의하는 데 사용
2. 자동완성을 위해 필수

타입 추론 (자동 타이핑)
1. 변수의 값을 타입으로 타입을 자동으로 추론함
2. string이라는 명시적인 타입 선언이 없어도 변수에 할당된 값을 통해 추론 가능
3. 다만 객체는 interface사용
4. 리스트

유니온 타입
1. 여러 타입을 허용할 수 있음

함수와 상태에 타입 추가하기
1. 함수의 경우
   1. 함수의 반환 값은 타입스크립트가 타입 추론으로 알아서 타입을 넣어준다
2. 상태의 경우: 
   1. useState는 상태 타입을 명시해야 안전한 상태 관리를 할 수 있다

 이벤트 핸들러에 타입 추가
 

 

yarn create vite
react
typescript + swc