Typescript

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

 

기본 타입:

• number : 숫자 타입
• string : 문자열 타입
• boolean : 불리언 타입
• any : 모든 타입을 허용하는 동적 타입
• void : 반환 값이 없는 함수의 리턴 타입
• undefined : undefined 값 또는 타입
• null : null 값 또는 타입
• unknown  : `unknown`은 "아직 타입을 알 수 없음" 이라는 의미
            - any처럼 어떤 값도 담을 수 있음
            - 하지만 사용하려면 타입 좁히기가 필요함
  

  let value: unknown;
  
  value = "hello";
  value = 42;
  value = { name: "Alice" };
  
  console.log(value.length); // ❌ 에러! 타입을 모르니까
  
  if (typeof value === "string") {
    console.log(value.length); // ✅ string으로 좁혀졌기 때문에 OK
  }

  
  
  
• never : `never`는 절대 값이 존재하지 않는 타입
  

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

 

 

배열 및 튜플 타입:

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

// 같은 의미
let names1: string[] = ['Alice', 'Bob'];
let names2: Array<string> = ['Alice', 'Bob'];

type Point = [number, number];
const p1: Point = [10, 20];

 

객체 타입:

• { key: Type }: 객체 타입
  interface: 인터페이스를 사용한 객체 타입 정의
   

항목	interface	type
확장 (확장성)	extends로 다른 인터페이스 확장 가능	& 연산자로 조합 가능
중복 선언	가능 (자동으로 병합됨)	불가능 (같은 이름 중복 선언 시 에러)
유니온/교차 타입	❌ 지원 안 함	✅ | A
튜플, 기본 타입 조합	❌ 안 됨	✅ 튜플, 유니온, 기본 타입과 조합 가능
클래스 구현	✅ implements로 사용 가능	✅ 가능하지만 덜 일반적
호환성	일부 상황에서 다름 (드물게 차이 발생)	더 유연한 경우 많음

 

interface Primitive = number | string; // ❌
interface Point = [number, number]; // ❌ 안 됨
interface Status = 'success' | 'error'; // ❌ 문법 자체가 안 됨

 

=> interface는 객체 설계에 특화되고, type은 유연한 타입 조합에 강하다. , interface, type은 서로 호환이 가능하다

 

 

함수 타입:

• (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: 객체의 키를 문자열 리터럴 타입으로 추출

type User = {
    id: number;
    name: string;
    age: number;
};

// keyof + Record 사용
function isValid(user: User): Record<keyof User, boolean> {
    /**
        Record<keyof User, boolean> =>
        {
            id: boolean;
            name: boolean;
            age: boolean;
        }
     */

    const result: Record<keyof User, boolean> = {
        // keyof User === 'id' | 'name' | 'age'
        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>;

 

 

오버로딩 (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