타자 원고를 쓰는 연서

친애하는 TypeScript, 나는 너의 형 자바Script가 때때로 우리가 함께 있는 것을 보고 싶지 않을 수도 있다는 것을 알고 있지만, 나는 너의 품성이 가치가 있다고 생각한다. 이것이 바로 내가 너를 사랑하는 이유이다!
우스갯소리 외에, 내가 TypeScript의 많은 특성과 얼마나 훌륭한지 진정으로 연구하기 시작한 이래로, 이것은 확실히 내가 오랫동안 쓰기를 갈망하는 게시물이다.표지 사진의 코드는 단순히 보여주기 위한 것이 아니다. 이런 간단한 예에서 나는 TypeScript를 좋아하는 이유를 많이 보여줄 수 있다. 나는 지금부터 가능한 한 많이 사용하고 싶다.그러니 서슴없이 조금씩 이 연서를 쓰자.
JavaScript에 대해 이야기할 때 우리는 항상 유연성을 고려한다.이것은 코드를 작성하는 방식에 있어 매우 유연성을 제공한다. 자바스크립트는 매우 느슨해서 대상에 필드를 추가하고 삭제할 수 있다. 함수는 매개 변수로 전달할 수 있고 수조는 모든'유형'의 요소를 저장할 수 있다(자바스크립트의 유형 개념은 매우 느슨하다).그러나 이 모든 유연성에는 원가가 있다.프로그램이 100줄 이상의 코드와 자바스크립트로 작성된 파일을 보았을 때, 나는 프로그램이 항상 엉망진창이라고 생각했다. 이것은 무례한 것이 아니라고 생각했다.나는 사물이 어디에서 오고 또 어디에서 가는지 모른다.이것은 마치 뇌구에 들어가는 것과 같다.내 배경은 자바다. 자바에서는 거의 모든 코드를 제어할 수 있고, 때로는 너무 많이 제어할 수 있다.
이것이 바로 TypeScript가 역할을 발휘하는 부분이다. JavaScript의 유연성을 혼합했지만 정적 유형 언어가 제공하는 제어와 모순된다.나에게 있어서, 그것은 두 가지 세계 중 가장 좋은 것이 있다. 바로 자바스크립트와 자바이다.그럼 예를 하나 봅시다.먼저 Letter 인터페이스입니다.

export interface Letter {
  from: string;
  to: string;
  message: string;
}

정상이죠?TypeScript에서 인터페이스가 마음에 드는 점은 속성과 방법을 정의할 수 있다는 것입니다. 이 인터페이스를 충족시키려면 모든 속성이 필요합니다.이것은 자바에서 다르다. 자바에서 '속성' 은 인터페이스 내의 최종 상수에 위치하고, 그것들은 속성이 아니다.그러나 TypeScript의 인터페이스는 다른 클래스와 함께 강력한 기능을 보여 줍니다.그래서 우리는 LoveLetter 과정 아래에 전시한다.

export class LoveLetter {
  constructor(public from: string, public to: string) {}

  get message(): string {
    return `I love you, ${this.to}`;
  }
}

TypeScript의 기묘한 점을 모르면 이 종류만 보면 깨닫지 못할 수도 있지만, 이 종류는 Letter 인터페이스에 완전히 만족합니다. 100%!우선 구조기다.자바에서 파라미터를 추가하고 클래스 속성에 즉시 분배하는 것은 항상 번거롭습니다. 이것은 불필요한 템플릿입니다.나는 TypeScript 방법을 좋아한다. 구조 함수의 매개 변수에 public, private 등을 삽입하면 클래스 속성을 설명하고 매개 변수의 값을 한꺼번에 부여할 수 있다.따라서 LoveLetter류는 to에 필요한 문자열 속성from과 Letter을 가지고 있다.
"그런데 message는요? LoveLetter에서는 문자열 속성이 아닌 방법입니다!"이 가능하다, ~할 수 있다,...이것은 TypeScript의 또 다른 매우 재미있는 특성인 'Getter 방법' 이다.예를 들어 자바의 Getter처럼 사용할 수 있지만, TypeScript에는 자바에 없는 gotcha가 있다고 생각합니다.함수 앞에 get 단어를 추가하면 TypeScript는 이를 속성으로 간주합니다!그래서 우리는 이렇게 할 수 있다. letter.message 이것이 아니라: letter.message().TypeScript의 속성으로 인식되므로 인터페이스Letter를 충족할 수 있습니다.다른 방식으로 데이터를 만들고 싶을 때, 그것은 매우 유용하다. 예를 들어, 시각적 목적을 위해, 내가 '사랑해, #name#' 에서 했던 것처럼, 받는 사람의 이름을 문자열로 삽입해서 삽입하는 것이다.간단한 예에서, 그것은 큰 차이가 없어 보일 수도 있지만, 큰 인터페이스를 만족시키려 하거나 더 복잡한 용례를 찾으려고 할 때 쓸모가 있을 것이다.
일부 자바에 익숙해질 수 있는 사람들에게 클래스가 인터페이스를 실현할 때 공식적인 성명(예를 들어 자바의 class Foo implements Bar이 없으면 이상하게 들릴 수 있다. 그러나 이것은 인터페이스가 TypeScript에서 이렇게 강한 이유 중 하나이다. 클래스는 그 모양을 통해 인터페이스를 만족시킬 뿐 공식적인 성명이 필요하지 않다.하지만 공식적으로 다음과 같은 내용을 설명할 수 있습니다.

export class LoveLetter implements Letter {
  constructor(public from: string, public to: string) {}

  get message(): string {
    return `I love you, ${this.to}`;
  }
}

성명은 자바와 똑같다. 이렇게 하면 클래스가 인터페이스 요구를 충족시키지 못하면 클래스 단계에서 오류 메시지가 발생하지만, 보통 그렇게 명확할 필요가 없다.따라서 클래스가 인터페이스에 모양만 충족하는 경우 다음 예제의 마지막 부분으로 이동할 수 있습니다.

const sendLetter = (letter: Letter) => {
  console.log(
    `From: ${letter.from}
    To: ${letter.to}

    ${letter.message}
    `
  );
};

const loveLetter = new LoveLetter('Developer', 'TypeScript');
sendLetter(loveLetter);

여기에 우리는 상수에 분배되고 화살표 함수로 성명되는 함수가 하나 있다.이 예에서는 특별한 의미가 없지만 화살표 함수는 코드를 더욱 우아하게 할 수 있다. 주로 TypeScript/JavaScript가 리셋의 발원지일 때이다.그 밖에 관련 범위의 일부 문제를 해결할 수 있는데 주로 this에 관한 문제이지만 우리는 장래에 이 문제를 토론할 수 있다.그리고 우리는 새로운 LoveLetter 을 만들고 상수에 분배했다. 특별한 것은 없지만, 다음 줄은 인터페이스의 일부 기능을 보여 준다.함수는 Letter를 매개 변수로 수신하지만 LoveLetter는 100% 인터페이스 요구를 충족시키기 때문에 LoveLetter의 실례 호출 함수를 사용할 수 있습니다!더 좋은 것은 TypeScript에 아무 곳에서나 알려주지 않아도 자동으로 알 수 있다는 것이다.마찬가지로 인터페이스는 그 형상에 따라 평가된다. 만약 형상이 정확하다면 너는 시작할 수 있다!
매일 더 많은 TypeScript에 대한 지식과 내가 가장 좋아하는 언어를 아름다운 언어에 어떻게 융합시키는지 배우는 것은 매우 흥미롭다.또 많은 다른 기능들이 언급할 만하지만, 나는 이 간단한 예를 통해 타자 스크립트의 위대함을 느낄 수 있다고 생각한다.저는 TypeScript가 시장에서 밝은 전망을 가지고 있다고 믿습니다. 여러분께 그것을 추천합니다.걱정하지 마라, 나는 나의 사랑하는 타자 원고의 유행을 질투하지 않을 것이다.