[Typescript] 자주 쓰는 문법 정리

1. 배열

// default
let list: number[] = [1,2,3];
// or
let list: Array<number> = [1,2,3];



// interface array
interface EnumServiceItem {
    id: number; label: string; key: any
}
interface EnumServiceItemList extends Array<EnumServiceItem>{}
// using
var result: EnumServiceItem[] = [
    { id: 0, label: 'CId', key: 'contentId' },
    { id: 1, label: 'Modified By', key: 'modifiedBy' },
];

 

2. 인터페이스

상속이 가능하다.

interface PeopleInterface {
  name: string
  age: number
}

// interface 확장시 extends 키워드 사용
interface StudentInterface extends PeopleInterface {
  school: string
}

interface 확장시 extends 키워드 사용

 

 

 

3. type

인터페이스와 같이 객체의 타입을 정의하는 키워드.

type과 interface 같은 기능을 갖지만, 확장성이 좋은 interface를 사용하는 것이 더 좋다고 한다.

type UserType = {
  name: string;
  age: number;
};

// type 뒤의 &은 interface의 extends 키워드와 같은 역할(확장)
type NewUserType = UserType & { address: string };

let obj: NewUserType = { name: "NAME", age: 29, address: 'Busan' };

 

 

 

4. ? 물음표(선택적 프로퍼티)

 

4-1. 선택적 프로퍼티

인터페이스의 프로퍼티 이름 끝에 ?를 붙여 표시.

interface ICompanyInfo {
  name: string;
  chairman?: string;
}

let obj: ICompanyInfo = {
  name: 'FaceBook'
};

선택적 프로퍼티를 사용하지 않을 경우, ICompanyInfo의 인터페이스를 모두 기술하지 않아서 에러가 발생하는데,

위와 같이 프로퍼티 이름 끝에 ?를 붙일 경우 에러가 발생하지 않음.

 

interface SquareConfig {
    color?: string;
    width?: number;
}
function createSquare(config: SquareConfig): { color: string; area: number } {
    let newSquare = {color: "white", area: 100};
    if (config.clor) {
        // Error: Property 'clor' does not exist on type 'SquareConfig'
        newSquare.color = config.clor;
    }
    return newSquare;
}

또한 위와 같이 인터페이스에 속하지 않은 프로퍼티의 사용을 에러로 처리해줌.(color인데 clor로 기술해서 오류 발생)

 

4-2. 옵셔널 체이닝

interface ICompanyInfo {
  name: string | null | undefined;
}

let obj: ICompanyInfo = {
  name: "FaceBook"
};

console.log(obj.name?.length);

프로퍼티의 타입을 여러 개로 옵션을 주었을 때, 단순하게 obj.name을 사용할 경우 null 또는 undefined가 가능하다고 문제가 발생하는데,

obj.name?.length 로 사용할 경우 undefined를 리턴해줌 -> 에러처리에 용이하다.

 

 

 

5. 제네릭

가장 자주볼 수 있는 기능

// number 타입의 매개변수를 return하는 함수
function NumberReturnFunc(arg: number): number {
  return arg;
}

// string 타입의 매개변수를 return하는 함수
function StringReturnFunc(arg: string): string {
  return arg;
}

// boolean 타입의 매개변수를 return하는 함수
function BooleanReturnFunc(arg: boolean): boolean {
  return arg;
}

위 3개의 함수를

function GenericReturnFunc<T>(arg: T): T {
  return arg;
}

한 개의 함수로 만들 수 있다.

 

제네릭 함수 구현 방법은 함수명 뒤에 "<T>"를 추가하고, T는 매개변수의 타입 또는 반환 타입으로 설정해서 사용한다.

여기서 T는 변수와 같은 느낌으로, 다른 문자열을 사용해도 된다. <O>, <P>, <Unit> 등등

 

let numVar = GenericReturnFunc<number>(123);
let strVar = GenericReturnFunc<string>('ABC');

사용할 때는 위와 같이 함수를 호출하고 < > 내부에 적용한 타입을 지정한다.

-> 함수 호출하는 건 간단하기 때문에 함수를 잘 만들어야 한다.

 

function loggingIdentity<T>(arg: T[]): T[] {
  console.log(arg.length); // 배열은 .length를 가지고 있습니다. 따라서 오류는 없습니다.
  return arg;
}

위와 같이 T라는 타입의 배열로도 사용할 수 있다. 때문에 arg의 .length는 문제가 없이 작동한다.(any와 unknown 타입인 경우 에는 에러가 발생한다.)

 

 

5-1. 제네릭 화살표 함수

function identity<T>(arg: T): T {
  return arg;
}

let myIdentity: <T>(arg: T) => T = identity;

위의 펑션을 아래의 화살표 처럼 사용할 수 있다.

 

 

5-2. 객체 리터럴 타입의 함수

function identity<T>(arg: T): T {
  return arg;
}

let myIdentity: { <T>(arg: T): T } = identity;

 

 

5-3. .tsx에서의 제네릭 화살표 함수 사용

let GenericReturnFunc = <Type>(arg: Type): Type => {
  return arg;
}

.tsx 확장자 파일에서 위와 같은 코드를 사용할 경우 <Type>에서 태그 <> 에러가 발생한다.

이때 제네릭 화살표 함수를 구현해야 하는 경우, 제네릭 매개 변수에 extends를 사용해서 컴파일러에게 제네릭 화살표 함수라고 알려 주어야 한다.

let GenericReturnFunc = <Type extends {}>(arg: Type): Type => {
  return arg;
}