Typescript: 고급 유형

객체 유형

TypeScript에서는 인터페이스(Interfaces)를 사용하여 객체의 유형을 정의합니다.

인터페이스 소개

대상 언어에서 인터페이스(Interfaces)는 매우 중요한 개념으로 행위에 대한 추상적이며 구체적으로 어떻게 행동하는지는 클래스(classes)로 이루어져야 한다(implements).
TypeScript의 인터페이스는 매우 유연한 개념으로 클래스의 일부 행위를 추상화하는 데 사용할 수 있을 뿐만 아니라 대상의 형상(Shape)을 묘사하는 데도 사용된다.

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

let man: Person = {
  name: 'Xcat Liu',
  age: 25,
};

위의 예에서 우리는 인터페이스 Person을 정의했고 그 다음에 변수 man을 정의했다. 그 유형은 Person이다.이렇게 해서 우리는 man의 형상이 반드시 인터페이스 Person과 일치해야 한다는 것을 제약했다.
인터페이스는 일반적으로 이니셜이 대문자로 되어 있다.
정의된 변수가 인터페이스보다 약간 적거나 많은 속성은 허용되지 않습니다.

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

let xcatliu: Person = {
  name: 'Xcat Liu',
};

// index.ts(6,5): error TS2322: Type '{ name: string; }' is not assignable to type 'Person'.
//   Property 'age' is missing in type '{ name: string; }'.

값을 부여할 때 변수의 형상은 인터페이스의 형상과 일치해야 한다는 것을 알 수 있다.

옵션 속성

때때로 우리는 하나의 모양과 완전히 일치하지 않기를 희망한다. 그러면 선택할 수 있는 속성을 사용할 수 있다.

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

let xcatliu: Person = {
  name: 'Xcat Liu',
};

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

let xcatliu: Person = {
  name: 'Xcat Liu',
  age: 25,
};

선택 가능한 속성의 의미는 이 속성이 존재하지 않을 수 있다는 것이다.
정의되지 않은 속성을 추가할 수 없습니다.

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

let xcatliu: Person = {
  name: 'Xcat Liu',
  age: 25,
  website: 'http://xcatliu.com',
};

// examples/playground/index.ts(9,3): error TS2322: Type '{ name: string; age: number; website: string; }' is not assignable to type 'Person'.
//   Object literal may only specify known properties, and 'website' does not exist in type 'Person'.

모든 속성

때때로 우리는 인터페이스가 임의의 속성을 허용하기를 원하는데 다음과 같은 방법을 사용할 수 있다.

interface Person {
  name: string;
  age?: number;
  [propName: string]: any;
}

let xcatliu: Person = {
  name: 'Xcat Liu',
  website: 'http://xcatliu.com',
};

[propName:string]을 사용하여 속성 취string 유형의 값을 정의합니다.
주의해야 할 것은 속성이 정의되면 속성과 선택 가능한 속성이 모두 하위 속성이어야 한다는 것입니다.

interface Person {
  name: string;
  age?: number;
  [propName: string]: string;
}

let xcatliu: Person = {
  name: 'Xcat Liu',
  age: 25,
  website: 'http://xcatliu.com',
};

// index.ts(3,3): error TS2411: Property 'age' of type 'number' is not assignable to string index type 'string'.
// index.ts(7,5): error TS2322: Type '{ [x: string]: string | number; name: string; age: number; website: string; }' is not assignable to type 'Person'.
//   Index signatures are incompatible.
//     Type 'string | number' is not assignable to type 'string'.
//       Type 'number' is not assignable to type 'string'.

상례에서 임의의 속성의 값은string일 수 있지만 선택할 수 있는 속성age의 값은number입니다.number는string의 하위 속성이 아니기 때문에 잘못 보고되었습니다.

읽기 전용 속성

때때로 우리는 대상 중의 일부 필드가 만들 때만 값을 부여받기를 원합니다. 그러면readonly로 읽기 전용 속성을 정의할 수 있습니다.

interface Person {
  readonly id: number;
  name: string;
  age?: number;
  [propName: string]: any;
}

let xcatliu: Person = {
  id: 89757,
  name: 'Xcat Liu',
  website: 'http://xcatliu.com',
};

xcatliu.id = 9527;

// index.ts(14,9): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.

상례에서readonly가 정의한 속성 id를 사용하여 초기화한 후에 값이 부여되어 잘못 보고되었습니다.
읽기 전용 구속조건은 읽기 전용 속성에 처음 값을 부여하는 것이 아니라 객체에 처음 값을 부여하는 경우에 존재합니다.

배열 유형

유형 + 대괄호 표현

가장 간단한 방법은 유형 + 네모난 괄호를 사용하여 배열을 표시하는 것입니다.

let fibonacci: number[] = [1, 1, 2, 3, 5];

배열 항목에는 다른 유형이 허용되지 않습니다.

let fibonacci: number[] = [1, '1', 2, 3, 5];

// index.ts(1,5): error TS2322: Type '(number | string)[]' is not assignable to type 'number[]'.
//   Type 'number | string' is not assignable to type 'number'.
//     Type 'string' is not assignable to type 'number'.

그룹 범주

배열 범주(Generic) Array를 사용하여 배열을 표시할 수도 있습니다.

let fibonacci: Array = [1, 1, 2, 3, 5];

any 그룹에서의 응용

비교적 흔히 볼 수 있는 방법은any로 수조에 임의의 유형이 나타날 수 있음을 표시하는 것이다.

let list: any[] = ['Xcat Liu', 25, { website: 'http://xcatliu.com' }];

함수 유형

함수 설명

JavaScript에서는 함수 선언(Function Declaration)과 함수 표현식(Function Expression) 두 가지 방법으로 함수를 정의합니다.

//  （Function Declaration）
function sum(x, y) {
  return x + y;
}

//  （Function Expression）
let mySum = function (x, y) {
  return x + y;
};

함수에는 입력과 출력이 있으며 TypeScript에서 이를 구속하려면 함수 선언의 유형 정의가 간단하다는 점을 고려하여 입력과 출력을 모두 고려해야 합니다.

function sum(x: number, y: number): number {
  return x + y;
}

여분의 (또는 요구보다 적은) 매개 변수를 입력하는 것은 허용되지 않습니다.

함수 표현식

함수 표현식(Function Expression)에 대한 정의를 지금 작성하려면 다음과 같이 작성할 수 있습니다.

let mySum = function (x: number, y: number): number {
  return x + y;
};

이것은 컴파일할 수 있지만 사실상 위의 코드는 등호 오른쪽의 익명 함수만 유형 정의를 했고 등호 왼쪽의 mySum은 부치 조작을 통해 유형 추론을 통해 추정된 것이다.mySum에 수동으로 유형을 추가해야 하는 경우 다음과 같습니다.

let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
  return x + y;
};

TypeScript의 유형 정의에서 =>은 함수의 정의를 나타내는데 왼쪽은 입력 유형이고 괄호로 묶어야 하며 오른쪽은 출력 유형이다.

인터페이스에서 함수 정의

또한 인터페이스를 사용하여 함수에 맞는 모양을 정의할 수도 있습니다.

interface SearchFunc {
  (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
  return source.search(subString) !== -1;
}

옵션 매개변수

앞에서 언급한 바와 같이, 불필요한 (또는 요구보다 적은) 매개 변수를 입력하는 것은 허용되지 않는다.그러면 선택할 수 있는 매개 변수를 어떻게 정의합니까?
인터페이스에서 선택할 수 있는 속성과 유사합니다. 우리가 사용합니까?선택적 매개변수를 나타냅니다.

function buildName(firstName: string, lastName?: string) {
  if (lastName) {
    return firstName + ' ' + lastName;
  } else {
    return firstName;
  }
}
let xcatliu = buildName('Xcat', 'Liu');
let xcat = buildName('Xcat');

주의해야 할 것은 선택할 수 있는 매개 변수는 반드시 필요한 매개 변수 뒤에 연결되어야 한다는 것이다.즉, 선택적 매개변수 뒤에는 필수 매개변수가 더 이상 표시되지 않습니다.

function buildName(firstName?: string, lastName: string) {
  if (firstName) {
    return firstName + ' ' + lastName;
  } else {
    return lastName;
  }
}
let xcatliu = buildName('Xcat', 'Liu');
let xcat = buildName(undefined, 'Xcat');

// index.ts(1,40): error TS1016: A required parameter cannot follow an optional parameter.

매개 변수 기본값

ES6에서는 함수의 매개변수에 기본값을 추가할 수 있습니다. TypeScript에서는 기본값이 추가된 매개변수를 선택적 매개변수로 인식합니다.

function buildName(firstName: string, lastName: string = 'Liu') {
  return firstName + ' ' + lastName;
}
let xcatliu = buildName('Xcat', 'Liu');
let xcat = buildName('Xcat');

선택적 매개변수는 필수 매개변수 뒤에 있어야 합니다.

function buildName(firstName: string = 'Xcat', lastName: string) {
  return firstName + ' ' + lastName;
}
let xcatliu = buildName('Xcat', 'Liu');
let xcat = buildName(undefined, 'Xcat');

남은 매개 변수

ES6에서 사용 가능...rest 방식으로 함수의 나머지 매개 변수(rest 매개 변수)를 가져옵니다.

function push(array, ...items) {
  items.forEach(function(item) {
    array.push(item);
  });
}

let a = [];
push(a, 1, 2, 3);

사실,items는 하나의 수조이다.그래서 우리는 수조의 유형으로 그것을 정의할 수 있다.

function push(array: any[], ...items: any[]) {
  items.forEach(function(item) {
    array.push(item);
  });
}

let a = [];
push(a, 1, 2, 3);

유형 선언

유형 선언(Type Assertion)은 컴파일러의 유형 추정을 무시하고 값의 유형(즉 프로그래머가 컴파일러에 대한 단언)을 수동으로 지정하는 데 사용됩니다.

 

//  

  as  

TypeScript에서 결합 유형의 변수가 어떤 유형인지 결정하지 못할 경우 이 결합 유형의 모든 유형에 공통된 속성 또는 메서드에만 액세스할 수 있습니다.

function getLength(something: string | number): number {
  return something.length;
}

// index.ts(2,20): error TS2339: Property 'length' does not exist on type 'string | number'.
//   Property 'length' does not exist on type 'number'.

때때로, 우리는 유형이 정해지지 않았을 때 그 중의 한 유형의 속성이나 방법을 방문해야 한다. 이때 유형 단언을 사용하여something단언을string으로 할 수 있다

function getLength(something: string | number): number {
  if ((something).length) {
    return (something).length;
  } else {
    return something.toString().length;
  }
}