TypeScript

타입스크립트의 장점은?

타입 안정성: 변수나 함수의 타입을 명확히 하여 컴파일 시점에서 오류를 방지할 수 있다.
자동완성: 개발 도구에서 자동 완성 기능이 더 강력해져, 코드 작성이 더 빠르고 오류가 줄어든다.
유지보수성 향상: 코드 변경 시 타입 오류를 미리 확인할 수 있어 유지보수가 용이하다.

타입스크립트 활용하기

1. 타입 단언(as)

• as키워드는 타입 단언(Type Assertion)을 위해 사용된다.
• 타입을 추론하는 방식과 다르게 개발자가 명시적으로 타입을 지정하는 기능을 제공한다.
• 타입스크립트가 정확히 타입을 추론할 수 없는 경우에 사용된다.
  예를들어 데이터를 외부에서 가져왔을 때,
  타입 추론이 어렵기 때문에 as를 쓰곤 한다 .

1. as의 사용법

• 기존 타입을 다른 타입으로 단언하여, 컴파일러에게 이 데이터가 특정 타입임을 확신시킬 수 있다.
• as는 주로 타입이 명확하지 않은 데이터를 처리할 때 사용되지만, 무분별한 사용은 오류를 발생시킬 수 있으므로 주의해야 한다.

[예시]

//원래는 null일 수도 있다고 뜹니다.
const inputElement = document.getElementById("myInput") as HTMLInputElement;

inputElement.value = "Hellow, world!";

위의 코드는 'myInput아이디를 통해 가져온 태그는 인풋 태그야'라고 단언해주는 예시이다.
이유는 해당 아이디를 통해 가져온 태그가 div인지 a태그인지 알 수 없음

만약 myInput아이디에 해당하는 태그가 div였다면?
inputElement.value는 에러가 뜬다. div에는 value가 없기 때문이다.

as는 마지막 수단이다

• 타입 단언은 타입 안정성을 무시하는 것이므로, 가능한 한 명확한 타입을 지정하고 사용하고 필요할 때만 사용해야 한다.
• 잘못된 단언은 오류로 이어질 수 있으므로, 단언하려는 타입이 실제 데이터와 일치하는지 항상 주의해야 한다.

유틸리티 타입

• 유틸리티 타입은 기본 타입들을 변형하거나 확장할 수 있는 내장 타입들이다.
• 타입 변환과 타입 조작을 간편하게 할 수 있도록 도와준다.
• 주로 타입 추론 을 개선하거나 중복 코드를 줄이는데 유용하다.

주요 유틸리티 타입

1. Partial

• partial은 모든 속성이 선택적(Optional)인 타입을 만든다. 객체의 일부 속성만 업데이트하거나 초기화할 때 유용하다

interface Todo {
  	title: string;
  dexcription: string;
  completed: boolean;
  }
  
  const todo: Todo = {title: "study", description: "Learn", ccompleted: false};
  
  // partial을 사용하면 선택적으로 사용 가능
  const partialTodo:Partial<Todo> = {completed:true}

2. Pick<T,K>

• Pick은 객체 타입에서 특정 속성만 선택하여 새로운 타입을 만든다. 객체의 일부 속성만 필요할 때 유용하다.

  interface Todo {
  	title: string;
  	description: string;
  	completed: boolean;
  }
  type PickTodo = Pick<Todo, 'title'|'completed'>;
  const todo: PickTodo = {
  	title: "Study",
  	completed: false, 
  }

3. Omit<T,K>

• Omit은 객체 타입에서 특정 속성을 제외하고 새로운 타입을 만든다. 객체의 일부 속성을 제외한 나머지를 사용할 때 유용하다.

  interface Todo {
  	title: string;
  	dexcription: string;
  	completed: boolean;
  }
  type TodoWithoutDescription = Omit<Todo,'discription'>
  const todo: TodoWithoutDescription = {
  	title: "study",
  	compoleted: false,
  }

4. Record<K,T>

• Record는 특덩 키 타입(k)과 값 타입(T)을 가지는 객체 타입을 만든다. 객체의 키와 값의 타입을 동적으로 설정할 때 유용하다.

type = PageInfo = {
  	title: string;
  }
  type page = 'home' | 'about' | 'contact' ;
  const pages: Record<Page, PageInfo> = {
  	home: {title: "Home Page"},
  	about: {title: "About Page"},
  	contact: {title: "Contact Page"},
  }

여기까지 기본적인 TypeScript에 대해 개념을 정리해보았다.
이 전에 강의들으면서 한번 들었던 내용인데
다시 한번 강의를 들으며 복습하니까 머릿속에서 정리가 좀 되는 것 같다.