TypeScript 함수 소개 — 객체가 삭제되고 다시 로드됩니다.

아마존에서 내 책 보기https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62
지금 http://jauyeung.net/subscribe/에 내 이메일 목록을 구독하십시오.
함수는 입력을 받아들이고 출력을 되돌려 주거나 부작용이 있는 작은 코드 블록으로 if 함수 외부의 변수를 수정하는 것을 의미한다.우리는 코드를 다시 사용할 수 있는 작은 블록으로 구성하는 함수를 필요로 한다.함수가 없다면, 코드를 다시 실행하려면 다른 곳으로 복사해야 합니다.함수는 모든 종류의 스크립트 프로그램에 매우 중요하다.이 시리즈의 이 부분에서 우리는 TypeScript 함수의 다른 부분을 계속 연구할 것이다. 이는 TypeScript 처리 this 대상을 어떻게 사용하는지, 함수를 다시 불러오는 것을 포함한다.

이 물체this 키워드로 설명된 일반 함수에서 function를 인용하면 this 대상은 화살표 함수에 this 함수를 포함하는 함수로 설정되지 않습니다.화살표 함수가 구조 함수에 있으면 this 새 대상으로 설정됩니다.만약 그것이 대상 내부에 없다면 화살표 함수 내부의 this 는 엄격한 모드에 있다.undefined는 화살표 기능이 객체 내부에 있는 경우 기본 객체로 설정됩니다.그러나 만약 우리가 화살표 함수에서 인용this한다면 우리는 항상 window의 대상을 얻을 수 있다.예를 들어, TypeScript에서 글로벌 변수를 this 값으로 사용할 수 없기 때문에 다음 코드는 컴파일되고 실행되지 않습니다.

const fn = () => this  
console.log(fn());

this가 실행될 때 우리는 window 대상을 기록할 것이다.마찬가지로, 만약 우리가 이것을 운행한다면:

let obj = {}  
obj.f = () => {  
  return this;  
};  
console.log(obj.f());

우리는 이전과 같은 물건을 얻었다.이것은 console.log 키워드 성명을 사용하는 전통 함수와 다르다.위 코드의 기존 함수로 위 함수를 바꾸면 다음 코드와 같이 어떻게 되는지 살펴보겠습니다.

const fn = function() {  
  return this  
};  
console.log(fn);

현재 function에서 noImplicitThis 로고를 사용하면 TypeScript 컴파일러에서 다음과 같은 오류가 발생합니다: tsconfig.json우리는 코드가 정상적으로 작동하도록 하는 데 더 가까워졌지만, 코드는 여전히 컴파일할 수 없다.이 오류를 수정하려면 다음 코드와 같이 함수 서명에 위조 매개 변수'this' implicitly has type ‘any’ because it does not have a type annotation.(2683)를 넣어야 합니다.

const fn = function(this: void) {  
    return this;  
};  
console.log(fn);

위의 코드를 통해 우리는 this: void 변수를 사용할 수 없게 했다.만약 우리가 그것을 어떤 일에 사용하고 싶다면, 우리는 this 대신 this 현식 유형을 추가하여 어떤 일을 완성할 수 있다.예를 들어, 구조 함수 객체를 작성하려면 다음 코드를 작성할 수 있습니다.
위 코드에서 우리는 void라는 인터페이스를 만들고 데이터 형식을 Person 대상의 this 함수에 추가greet 대상을 만들었다.person 함수를 호출할 때 greet 매개 변수는 첫 번째 매개 변수로 무시됩니다.TypeScript는 매개 변수 중 this 의 유형만 보고, 전달 this 의 매개 변수를 통해 greet 함수를 호출하는 것을 원하지 않습니다.this 대상을 정의한 후에 우리는 외부의 person와 name 속성에 값을 부여할 수 있다.age 대상을 정의할 때 우리는 인터페이스에 열거된 요구를 충족시켰지만 person 함수를 사용하기 위해 의미 값을 지정해야 한다.
그리고 상기 예의 마지막 줄greet을 실행하면 console.log를 얻을 수 있습니다.우리는 Hi Jane. You’re 20 years old 데이터 형식을 성공적으로 만들었기 때문에 this 의 값은 다른 뜻이 없을 것입니다.이것은 자바스크립트에서 비교적 헷갈리기 쉬운 부분 중 하나이기 때문에 개발자가 this 코드의 내용을 이해하는 데 도움이 된다.순수 JavaScript에서 this는 this 키워드에 따라 코드의 위치에 다른 값을 적용할 수 있습니다.전통 함수에서 this의 값은 함수 자체가 될 것이다.Arrow 함수는 this 값을 변경하지 않으므로 외부 컨텐트가 Arrow 함수의 내부 컨텐트와 같습니다.
TypeScript의 경우 this 및 레거시 함수를 사용하여 클래스를 만들 수 없습니다.예를 들어,
그리고 오류 this 를 받을 것입니다. 코드는 컴파일할 수 없습니다.TypeScript에서는 레거시 함수를 클래스로 사용할 수 없습니다.make류를 사용하려면 Cannot find name ‘Person’. Did you mean ‘person’?(2552) 문법을 사용해야 합니다.

콜백의 "this"매개변수
이벤트 탐지기에 사용되는 리셋 함수에 대해 우리가 전송한 리셋 함수는 인터페이스에 입력해야 합니다.예를 들어, 사용자 정의 입력 컨트롤 구성 요소의 유형을 설정하려면 다음과 같이 작성할 수 있습니다.

interface InputElement {  
  addKeyUpListener(onclick: (this: void, e: Event) => void): void;  
}

그런 다음 사용자가 이 컨트롤을 사용할 때 다음과 같은 컨텐트를 작성하여 실행할 수 있습니다.
만약에 이 라이브러리를 사용하는 개발자가 인용을 시도한다면class 아래 코드와 같이 어떻게 해야 합니까
이 경우 TypeScript 컴파일러는 this 인터페이스에 this 유형으로 표시되어 있기 때문에 오류를 내보냅니다.

함수 재부팅
다시 불러오는 함수는 같은 이름이지만 다른 서명을 가진 함수를 만드는 것입니다.이 작업은 JavaScript에서 허용되지 않습니다. 함수가 객체이므로 동일한 객체를 여러 번 다시 선언할 수 없습니다.그러나 TypeScript는 강한 유형이기 때문에 이것은 JavaScript의 동적 성질과 반대로 JavaScript의 동적 측면에 적응하는 방법을 찾아야 한다.이를 위해 TypeScript는 서로 다른 서명이 있는 함수를 다시 로드하는 방법을 제공합니다.TypeScript를 사용하여 함수를 다시 로드하려면 동일한 이름을 사용하여 실제 함수를 정의하기 전에 동일한 이름을 사용하여 여러 함수 서명을 작성해야 합니다.예를 들어 다음과 같이 쓸 수 있습니다.

function getPerson(person: { name: string, age: number }): { name: string, age: number };  
function getPerson(person: { name: string }): { name: string };  
function getPerson(person: any): any {  
  return person;  
}

위의 코드가 있으면 우리는 void 함수를 하나 가지고 있는데 속성InputElement과 getPerson의 대상만 받아들일 수 있고 속성name만 받아들일 수 있다.반환 유형은 콜론 다음에 age와 name 속성을 동시에 가진 대상일 수도 있고 name 속성만 있는 대상일 수도 있다.이것은 바로 우리가 상기 코드 예시의 세 줄에서 한 것이다. 여기서 우리는 age 함수에 필요한 서명만 정의했다.
그리고 실제name 함수 정의에서 우리는 실제 함수 정의를 가지고 있다.우리는 매개 변수와 되돌아오는 유형을 getPerson 로 주석할 것입니다. 이것은 가능합니다. getPerson 각각 받아들이고 되돌아오는 매개 변수와 되돌아오는 유형을 정의했기 때문입니다.우리는 any를 호출할 수 있는데 코드는 다음과 같다.

console.log(getPerson({ name: 'Jane', age: 20 }));  
console.log(getPerson({ name: 'Jane' }));

위에서 설명한 내용getPerson:

{name: "Jane", age: 20}  
{name: "Jane"}

만약 우리가 서명에 정의되지 않은 인자로 그것을 호출하려고 한다면, 예를 들어 getPerson, 우리는 console.log 오류를 얻게 될 것이다.
전통 함수에서 처리console.log(getPerson({})) 대상의 주요 방법은 이를 함수의 첫 번째 매개 변수로 전송한 다음에 유형을 정의하는 인터페이스를 통해 유형을 설정하는 것이다.TypeScript는 No overload matches this call 매개변수를 무시하고 존재하지 않는 것으로 간주합니다.이것은 설정this의 데이터 형식에만 사용됩니다.JavaScript에서는 허용되지 않는 TypeScript에서 함수를 다시 로드할 수 있습니다.이를 위해, 우리는 함수에 서로 다른 서명을 정의하고 같은 이름을 부여한 다음, 함수가 받아들일 서명을 정의한 후, 같은 이름으로 함수를 정의할 수 있다.