[React] Typescript

: 동적인 자바스크립트 언어에 타입을 미리 부여함으로써 컴파일 시 에러를 잡을 수가 있다.

기본 타입:

• number : 숫자 타입
• string : 문자열 타입
• boolean : 불리언 타입
• any : 모든 타입을 허용하는 동적 타입
• void : 반환 값이 없는 함수의 리턴 타입
• undefined : undefined 값 또는 타입
• null : null 값 또는 타입

배열 및 튜플 타입:

• `Array<ElementType>` 또는 `ElementType[]` : 배열 타입
• `[Type1, Type2]` : 튜플 타입
  
  

객체 타입:

• { key: Type }: 객체 타입
  interface: 인터페이스를 사용한 객체 타입 정의
  함수 타입:
  
  
• (parameter: Type) => ReturnType: 함수 타입
  void: 반환 값이 없는 함수의 리턴 타입

 

제네릭 타입:

• Type<T>: 제네릭 타입

function getName<T extends {name : string}>(obj:T) {
    console.log(obj.name);
}​​

 

유틸리티 타입 :

 

• Partial: 모든 속성이 선택적인 타입 

let admin:Partial<User> = { id : "admin", name : "admin" }​​​​

 

 

• Readonly: 모든 속성이 읽기 전용인 타입

//선언 후 프로퍼티 변경 불가
let admin2:Readonly<User> = { 
    id : "admin",
    name : "admin"
}​​

 

 

• Record<keys, type>: 특정 키와 값을 가진 객체 타입</keys, type>

type _score = "1" | "2";
type _grade =  "A" |"B";
const score : Record< _score , _grade> = {
    "1" : "A",
    "2" : "B"
};​​

 

 

• Pick<type, keys>: 특정 속성만을 가진 타입</type, keys>

//Pick<T, K> => 선택된 프로퍼티만 사용
const admin3 : Pick<User2, "id" | "name"> = {
    id : 0,
    name : "test",
}​​

 

 

• Omit<type, keys>: 특정 속성을 제외한 타입</type, keys>

//Omit<T,K>  => 제외
const admin4 : Omit<User2, "id" | "name"> = {
    age : 4
}​​

 

 

• ReturnType: 함수의 반환 타입을 추출하는 타입 

// 예제 함수
function add(a: number, b: number): number {
  return a + b;
}

// ReturnType을 사용하여 함수의 반환 타입 추출
type AddFunctionReturnType = ReturnType<typeof add>;

// 위에서 추출한 반환 타입을 사용하여 변수 선언
let result: AddFunctionReturnType;

// 함수 호출 및 결과 할당
result = add(10, 20);​​

 

 

Enums (열거형)

• enum : 열거형 타입 
• enum OS { Android = 1, IOS = 2, Window = 'WindowOS' };​

 

타입 가드와 조건부 타입:

• typeof: 변수 또는 속성의 타입을 추출하는 연산자

let myNumber: number = 42;

// 변수의 타입을 가져오기
let numberType: typeof myNumber = 10; // 이제 numberType은 number 타입​​

 

 

• as: 타입 단언을 통한 강제 형변환

// 숫자 배열이지만 타입 추론으로는 number[]라고 인식되지 않는 경우
let numbers: any[] = [1, 2, 3, 4, 5];

// numbers가 number[]임을 확신할 때 타입 단언 사용
let numberArray: number[] = numbers as number[];​​​​

 

• keyof: 객체의 키를 문자열 리터럴 타입으로 추출

//keyof
function isValid(user : User2) : Record<keyof User2, boolean> {
    const result : Record<keyof User2, boolean> = {
        id : user.id > 0,
        name : user.name == "",
        age : user.age > 20
    }
    return result;
}​​

 

• in: 객체의 속성 여부를 체크하는 연산자

interface Person {
	name: string;
	age?: number;
}
	  
  const person: Person = { name: 'John' };
  
  // 'name'이라는 속성이 person 객체에 존재하는지 확인
  if ('name' in person) {
	console.log('Person has a name property:', person.name);
  } else {
	console.log('Person does not have a name property.');
  }
	  
  // 'age'라는 속성이 person 객체에 존재하는지 확인
  if ('age' in person) {
	console.log('Person has an age property:', person.age);
  } else {
	console.log('Person does not have an age property.');
 }​
 
//결과
//Person has a name property: John App.tsx:29
//Person does not have an age property.​

• extends: 제네릭 타입의 상한을 정의

 

 이 외에도 TypeScript는 다양한 타입 및 유틸리티 타입을 제공하므로, 특정 상황에 맞는 타입을 찾거나 직접 정의하여 사용할 수 있습니다. TypeScript 문서에는 이러한 타입 및 기능에 대한 상세한 정보가 포함되어 있습니다.

 

 

기타

 

NonNullable<T>

주어진 제네릭 타입 T에서 null과 undefined를 제외한 타입을 구성한다.

//null, undefined제거
type T1 = string | null | undefined | void;
type T2 = NonNullable<T1>;

 

 

never

function loop(): never {
    while (true) {}
}

function exception(): never {
    throw new Error();
}

 

 

오버로딩 (Overloading)

const addZero = (num: number) => (num > 9 ? '' : "0") + num;
function formatDate(date: Date, format = "yyyyMMdd"): string;
function formatDate(date: number, format = "yyyyMMdd"): string;
function formatDate(date: string, format = "yyyyMMdd"): string;
 
// 위 3개 함수를 함수 오버로딩 처리, date는 유니온 타입사용
function formatDate(date: string | Date | number, format = "yyyyMMdd"): string {
    const dateToFormat = new Date(date);
 
    // … dateToFormat validation … 만약 empty나 1, 0이 들어왔을 때 validation 처리해주기
 
    const yyyy = dateToFormat.getFullYear().toString();
    const MM = addZero(dateToFormat.getMonth() + 1);
    const dd = addZero(dateToFormat.getDate());
 
    return format.replace("yyyy", yyyy).replace("MM", MM).replace("dd", dd);
}

 

 

 

---

https://lakelouise.tistory.com/194

[TypeScript] 타입스크립트 함수 오버로딩 : Function Overloading