타입스크립트 고유 문법

5006 단어 typescripttypescript

타입 주석과 타입 추론

let num: number = 1;
let num2 = 2;

위 코드의 1행 변수 num 뒤에 콜론(:)과 타입 이름이 있다. 이것을 타입 주석이라고 한다.

하지만 타입스크립트는 2행처럼 타입 부분을 생략할 수 있다. 타입스크립트는 변수의 타입 부분이 생략되면 대입 연산자(=)의 오른쪽 값의 타입을 분석해 변수의 타입을 결정하는데, 이를 타입 추론이라고 한다. 타입 추론 덕분에 자바스크립트로 작성된 js파일을 .ts 확장자로 바꿔주기만 하면 타입스크립트 환경에서도 동작한다.

인터페이스

인터페이스는 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스 등에 사용할 수 있다. 인터페이스는 프로퍼티와 메서드를 가질 수 있다는 점에서 클래스와 유사하나 직접 인스턴스를 생성할 수 없고 모든 메서드는 추상 메서드다. 하지만 추상 클래스의 추상 메서드와 달리 abstract 키워드를 사용하지는 않는다.

interface Person{
	name: string;
    gender: string;
    age?: number;
}

let person: Person = {name: "Hoon"}

위 코드 4행의 ?는 선택적 프로퍼티이며 interface에서 프로퍼티가 선택적으로 필요할 때 사용한다. 선택적 프로퍼티는 생략하여도 타입 검사에서 에러를 발생시키지 않는다.

튜플

튜플은 물리적으로 배열과 같다. 하지만 저장되는 아이템의 데이터 타입이 모두 같으면 배열, 다르면 튜플로 구분된다.

let numberArr: number[ ] = [1, 2, 3, 4];
let tuple: [boolean, number, string] = [true, 3, "Hello"]

제네릭 타입

제네릭 타입은 다양한 타입을 한꺼번에 취급할 수 있게 해준다. 이러한 특성 덕분에 재사용성이 높은 컴포넌트에서 사용하기에 적합하다. 제네릭 타입은 함수의 파라미터와 유사하게 동작한다.

function returnValue<T>(value: T): T{
  return value;
}

returnValue("Hello"); // "Hello"
returnValue(1); // 1
returnValue(true); // true

좋은 웹페이지 즐겨찾기