타입스크립트를 시작해보자

 

자바스크립트의 모든 기능을 포함하는 상위 집합의 언어이다.  자바스크립트 + 정적 타입 시스템

타입시스템?

null, undefined, boolean, string, number 의 이 타입시스템을 프로그래밍 언어가 이해하고 해석하는  시스템을 말한다.

 

동작원리

컴파일 과정에서 문법, 타입체크 등을 수행하여 준다.

1. 컴파일 시작: tsc 명령어를 사용해 타입스크립트 컴파일러를 실행합니다. 이때 tsconfig.json 파일을 참고하여 어떤 파일을 컴파일할지, 어떤 옵션을 사용할지 설정합니다.
2. 파일 로드: 컴파일러가 모든 입력 파일과 import된 파일을 로드합니다.
3. 코드 분석: 코드를 읽어들여 프로그램 구조를 나타내는 AST(구문 트리)를 만듭니다.
4. 심볼 테이블 생성: 코드를 분석하여 변수와 함수 등 모든 요소의 관계를 정리한 심볼 테이블을 만듭니다.
5. 자바스크립트 코드로 변환: AST를 바탕으로 타입스크립트 코드를 자바스크립트 코드로 변환합니다.
6. 타입 검사: 컴파일러가 코드를 검사하여 타입 오류를 찾습니다. 오류가 없다면 최종 자바스크립트 파일을 생성합니다.

 

• 타입 스크립트 : 말 그대로 type들을 고정시켜준다. 문자열, 숫자, 불리언 등등... (자바스크립트에 정적 타입을 추가한 프로그래밍 언어!) > 그래서 오류를 줄일수 있겠다!
• 자바스크립트로 작성된 코드를 확장하여 타입검사와 코드 안정성을 높여준다(예측하지못한 오류도 잡아준다..!)
• 컴파일시점에 오류를 잡아낼수 있다 
  • 컴파일시점 : vs코드에서 코드를 작성하는 시점
  • 런타임 시점 : 프로젝트가 동작하는 시점
• 타입추론 : 타입을 자동으로 추론하여 개발자가 일일히 지정하지 않아도 된다.
• jsx를 그대로 사용하면서 타입검사를 추가 가능하다. (jsx와 호환가능!)

간단하게 예시로 string을 쓰겠다고 하고  숫자데이터를 할당해 보았더니 바로 오류가 뜬다..!

스트링으로 정의 해놔서 숫자데이터를 할당할수 없단다!

 

기본 타입

const taskName: string = "타입스크립트 맛있다";
const taskCount: number = 5;
const isCompleted: boolean = false;

 

string : 문자열 데이터

number : 숫자 데이터

boolean : 참 / 거짓

 

배열타입

const todoList: string[] = ["Write code", "Review PR"];

 

string[ ] : 문자열로 이루어진 배열

number [ ] : 숫자로 이루어진 배열

 

인터페이스

객체의 구조를 정의하는데 사용된다.

interface Todo {
  text: string;
  completed: boolean;
}

 

유니온 타입

 

함수

function addTask(task: string): void {
  console.log("New task:", task);
}

 

타입 추론(자동 타이핑)

const task = "나는 문자열";  // TypeScript가 자동으로 string 타입으로 추론

 

변수의 값을 기반으로 타입을 자동으로 추론하여준다. 'string'이라는 명시적인 타입 선언이 없어도, 변수에 할당된 값으로 타입을 추론할수 있다.!!

• BUT 객체는 예외임..

 

유니온 타입

const status: number | null = null;

 

여러타입을 허용하여 준다. 

상태가 number 이거나 null 일때 유니온 타입으로 지정할수 있다.

 

함수의 경우

function addTask(task: string): void {
  console.log("New task:", task);
}

• 매개변수에 타입을 정의해주어야한다
• 함수의 반환값에 void타입을 추가한다. (생략가능. 보통 함수 반환값은 타입추론으로 알아서 타입을 넣어준다.)

 

상태의 경우

const [todos, setTodos] = useState<Todo[]>([]);

• 상태타입을 명시한다.
• <>로 타입을 지정하여준다.

이벤트 핸들러에 타입 추가

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setNewTodo(e.target.value);
};

• React.ChangeEvent<HTMLInputElement>
• vs코드에서 마우스 커서를 올리면 타입이 뜬다.! 해당 타입을 복붙하면 된다!!