타입스크립트 기초 문법 (2)

치이와와·2024년 9월 17일

Web / FrontEnd

목록 보기
3/6

1. 함수

  • 함수의 기본적인 타입 선언
function func(a: number, b: number): number {
  return a + b;
}

const add = (a: number, b: number): number => a + b;

함수의 반환값 타입은 자동으로 추론되므로 생략 가능하다.
또한 함수의 인자는 모두 필수 값으로 초과 or 부족하게 받을 수 없다.

  • 선택적 매개변수
    : 매개변수의 ?(옵셔널)을 달아서 선택적 매개변수 사용
function introduce(name = "이재현", tall?: number) {
  console.log(`name : ${name}`);
  console.log(`tall : ${tall}`);
}

단 선택적 매개변수들은 항상 필수 매개변수 뒤에 위치하여야 한다.

  • 매개변수 초기화
function introduce(name = "이재현") {
	console.log(`name : ${name}`);
}

매개변수에 기본값이 설정되어 있으면 타입 자동 추론으로 인해 타입 정의를 생략할 수 있다.

  • 호출 시그니처
    : 함수의 타입을 별도로 정의하는 방식
let myFunc: (arg1: number, arg2: number) => number;
myFunc = function (x,y) {
	return x+y;
}
  • 함수 호환성

    매개변수의 개수가 같을 경우,
    B 함수의 매개변수 타입이 A 함수의 매개변수의 자식 타입일 경우 호환 가능하며 반대는 불가능하다.

    매개변수의 개수가 다를 경우,
    매개변수가 더 많은 쪽으로 호환성을 판단한다.

  • 함수 오버로딩
    : 동일한 이름에 매개변수 타입과 반환 타입이 다른 함수를 여러 개 만드는 것

    오버로딩은 function 키워드만 가능하며 화살표 함수는 불가능하다.

    • 오버로딩이 가능한 경우
    1. 매개변수의 개수는 동일하고 타입이 다른 경우
    2. 매개변수의 개수가 다르고 타입은 같은 경우
    3. 매개변수의 개수와 타입이 모두 다른 경우
  • 사용자 정의 타입 가드

    타입 서술어 : param is type 형태로 사용

    function isFish(pet: Fish | Bird) : pet is Fish {
    	return (pet is Fish).swim !== undefined;

2. 인터페이스

상호 간에 정의한 약속 혹은 규칙
인터페이스에 선언된 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지한다.

  1. 인터페이스는 interface 키워드를 이용하여 생성
  2. Interface 선언 시 이름은 대문자로 시작
  3. 완성된 인터페이스는 타입처럼 사용 가능
  4. 인터페이스를 타입으로 가지는 값은 인터페이스의 구조를 가짐
interface Person {
  name: string;
  age: number;
}

const person: Person = {
  name: "이재현",
  age : 28
};
  • 선택적 프로퍼티
interface Person {
  name: string;
  age?: number;
}

const person: Person = {
  name: "이재현",
};
  • 읽기 전용 프로퍼티
interface Person {
  readonly name: string;
  age?: number;
}

const person: Person = {
  name: "이재현",
  age : 28
};
// 객체를 처음 생성할 때만 값을 할당할 수 있다
  • 하이브리드 타입
    : 여러가지 타입을 조합하여 인터페이스를 만들 수 있다.
interface Func2 {
  (a: number): string;
  b: boolean;
}

const func: Func2 = (a) => "hello";
func.b = true;
  • 인터페이스 확장
interface Animal {
  name: string;
  color: string;
}

interface Dog extends Animal {
  breed: string;
}

interface Cat extends Animal {
  isScratch: boolean;
}

interface Chicken extends Animal {
  isFly: boolean;
}

확장 시 대상이 된 인터페이스의 속성을 모두 사용할 수 있다.
상속받은 값을 다시 상속하는 것도 가능하다.

  • 인터페이스 선언 합치기
    : 동일한 스코프 내에 중복된 이름의 인터페이스를 선언하면 해당 인터페이스들은 하나로 합쳐진다.
interface Person {
  name: string;
}

interface Person {
  age: number;
}

const person: Person = {
  name: "이재현",
  age: 28,
};

그러나 동일한 이름의 프로퍼티를 다른 타입으로 정의한다면 오류가 발생하기 때문에 주의하여야 한다.

0개의 댓글