분류 javascript

11 장. JSDoc을 사용한 코드 문서와 TypeScript를 사용한 첫 단계 (티저)

컨텐츠 정보

  • 조회 367 (작성일 )

본문

이 장에서는: 

  • JSDoc 소개
  • TypeScript를 사용한 첫 단계

기초를 세우다 


공정한 학습을 ​​위해 TypeScript는 초보자가 해야 할 일이 아닙니다. 첫눈에 TypeScript는 JavaScript와 완전히 다른 언어로 보이며 학습 및 시행 착오 과정입니다.

이 책을 완성하면서 나는 TypeScript 팀을 훈련 시켰으며 이 그룹에는 두 명의 JavaScript "초보자"가 있었습니다.

그들은 1 년 반 이후 프로그래밍을 했고 TypeScript에 너무 많이 빠져서 풀 타임으로 배우기로 결정했습니다.


https://github.com/valentinogagliardi/Little-JavaScript-Book/blob/v1.0.0/manuscript/chapter11.md 


이 이야기는 거의 항상 반복됩니다. JavaScript 개발자와 "신선한" 대화를 많이 할수록 TypeScript도 배우고 싶어합니다. TypeScript는 빠르게 성장하고 있으며 오늘날 많은 JavaScript 작업에 TypeScript 지식이 필요합니다.

그러나 JavaScript 생태계에서 TypeScript가 중요한 이유를 이해하기 위해 이전 장에서 했던 것처럼 일반적인 방식으로 수행합니다. 앞 장의 "제 10 장 HTML 양식 및 localStorage와 함께 재생"에서 localStorage에 데이터를 유지하는 논리와 함께 간단한 HTML 양식을 작성했습니다.

이 장에서는 HTML 양식을 확장하고 TypeScript를 다루는 것이 더 중요합니다.


TypeScript 시작하기 


TypeScript 란 무엇입니까? 초보자라면 공식 웹 사이트의 정의가 도움이 되지 않습니다. "TypeScript는 형식화 된 JavaScript의 슈퍼 세트"입니다. "superset"이 무엇인지 "typed"가 무엇인지 알고 있다고 가정합니다. 대신 TypeScript를 JavaScript의 "상위 계층"으로 생각할 수 있습니다. 나중에 볼 수 있듯이 컴파일 단계에서 TypeScript 코드가 제거됩니다. 3 장에서 우리는 JavaScript 자체가 해석 된 언어이지만 동시에 컴파일되는 것을 보았습니다.

컴파일은 실행 전에 마이크로 초가 발생합니다. 그러나 JavaScript 엔진은 TypeScript를 그대로 이해하지 못하므로 모든 TypeScript 파일은 컴파일이라는 "번역 전"프로세스를 거쳐야 합니다. 흐름은 다음과 같습니다. TypeScript를 작성하고-> TypeScript를 컴파일합니다.-> TypeScript 컴파일러가 JavaScript를 출력합니다.-> 브라우저 (또는 Node.js)에서 JavaScript를 실행합니다.

이제 귀하의 질문은 "TypeScript를 컴파일하는 사람"일 수 있습니까? TypeScript에는 JavaScript 코드로 컴파일하기 위한 바이너리가 있습니다. 거기서부터 시작하겠습니다. 바이너리를 설치하려면 선택한 새 폴더에서 JavaScript 프로젝트를 초기화해야 합니다 (저는 "little-typescript"라고 함).


mkdir little-typescript && cd $_


새 폴더 내부로 이동하면 프로젝트를 만들 수 있습니다.


npm init -y


다음으로 TypeScript를 설치하십시오.


npm i typescript --save-dev


이 명령은 TypeScript 바이너리를 little-typescript/node_modules/typescript/bin/tsc에 설치합니다. tsc는 TypeScript 컴파일러를 나타내며 컴파일러가 실행될 때마다 프로젝트 폴더에서 tsconfig.json이라는 파일을 찾습니다. 구성 파일을 생성하려면 다음을 실행하십시오.


node_modules/typescript/bin/tsc --init


모든 것이 잘되면 "메시지 TS6071 : 성공적으로 tsconfig.json 파일을 만들었습니다"라는 메시지가 나타납니다. 프로젝트 폴더에 새 파일이 표시됩니다. TypeScript 컴파일러를 쉽게 실행하려면 package.json에서 "tsc"라는 npm 스크립트를 구성 할 수도 있습니다.


{
  "name": "little-typescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "tsc": "tsc"
  },
  "devDependencies": {
    "typescript": "^3.6.3"
  }
}


이제 tsconfig.json을 살펴 보자. 파일을 열면 많은 구성 옵션이 표시됩니다. 모든 것을 제거하고 구성을 다음 줄로 바꾸십시오.


{
  "compilerOptions": {
    "target": "es5",
    "strict": true
  }
}


이 두 가지 옵션을 사용하여 TypeScript에 호환되는 ECMAScript 2009 (ES5)를 내보내고 코드에 최대 수준의 엄격성을 적용하려고 합니다. 나중에 그것이 무엇을 의미하는지 알게 될 것입니다. 지금 파일을 저장하고 닫으십시오. TypeScript로 들어가기 위해 10 장부터 Form 클래스를 다시 작성하여 전체 클래스 대신 한 번에 메소드를 처리합니다. 결국에만 모든 것을 다시 폼에 모을 것입니다. 먼저 프로젝트 폴더에 form.html이라는 파일을 만들고 다음 HTML을 복사하십시오.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML forms and JavaScript</title>
</head>
<body>
<h1>What's next?</h1>
<form>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required minlength="5">

    <label for="description">Short description</label>
    <input type="text" id="description" name="description" required minlength="5">

    <label for="task">Task</label>
    <textarea id="task" name="task" required minlength="10"></textarea>

    <button type="submit">Submit</button>
</form>
</body>
<script src="form.js"></script>
</html>


10 장과 같은 형식입니다. 그런 다음 프로젝트 폴더에 form.ts라는 다른 파일을 만듭니다. 이것이 TypeScript의 첫 단계입니다. 모든 TypeScript 파일의 확장명은 .ts입니다. .ts 확장자의 역할은 두 가지입니다.

  • 코드에서 "유형"을 확인하도록 코드 편집기 (또는 IDE)에 알려줍니다.
  • 기본적으로 컴파일러는 모든 .ts 파일을 수집합니다.

form.ts에서 우리는 지금 10 장의 handleSubmit 메소드 중 하나의 함수만 복사할 것입니다. 더 이상 클래스 본문에 없기 때문에 메소드 이름 앞에 함수를 추가하십시오. this.saveData :


// the method handleSubmit from Form (chapter 10)
// plus the function keyword and a comment before this.saveData

function handleSubmit(event) {
  event.preventDefault();

  const inputList = Array.from(event.target.elements, function(formInput) {
    if (formInput.type !== "submit") {
      return {
        name: formInput.name,
        value: formInput.value
      };
    }
  });

  //this.saveData(inputList);
}


해당 메소드를 form.ts로 복사 한 후 모든 것이 조각으로 나뉩니다. 다음 그림을 살펴 보는 이유를 이해하려면 :


TypeScript in action 


내 IDE는 Webstorm이지만 Vscode 또는 이와 동등한 기능을 사용하는 경우 거의 동일한 빨간색 선이 표시됩니다. 이 줄은 IDE에서 왔으며 프로젝트 폴더에서 tsconfig.json을 인식하고 TypeScript 코드를 확인하기 시작했습니다. 오류가 무엇인지 확인하려면 마우스를 오류 위에 놓거나 다음과 같이 TypeScript 컴파일러를 실행하십시오.


npm run tsc


그러면 다음과 같은 경고가 나타납니다.


form.ts:1:23 - error TS7006: Parameter 'event' implicitly has an 'any' type.

1 function handleSubmit(event) {
                        ~~~~~

form.ts:4:27 - error TS2339: Property 'from' does not exist on type 'ArrayConstructor'.

4   const inputList = Array.from(event.target.elements, function(formInput) {
                            ~~~~

form.ts:4:64 - error TS7006: Parameter 'formInput' implicitly has an 'any' type.

4   const inputList = Array.from(event.target.elements, function(formInput) {
                                                                 ~~~~~~~~~

시원한. 하나씩 차례로 해결합시다. 우선 "any"이 무엇입니까? 이제 TypeScript의 기능에 대한 힌트를 얻었습니다. 모든 유형의 궤도를 돌고 있습니다. 그러나 JavaScript에는 이미 유형이 없었습니까? JavaScript에는 실제로 7 장에서 볼 수 있는 유형이 있습니다.


  • String
  • Number
  • Boolean
  • Null
  • Undefined
  • Object
  • Symbol

코드에서 문자열 및 숫자와 같은 JavaScript 유형을 사용할 수 있습니다.


var name = "Hello John";
var age = 33;


그러나 JavaScript의 "문제"는 개발자가 원할 때마다 변수가 유형을 변경할 수 있다는 것입니다. 예를 들어 부울은 코드에서 나중에 문자열이 될 수 있습니다.


var aBoolean = false;
console.log(typeof aBoolean); // "boolean"

aBoolean = "Tom";
console.log(typeof aBoolean); // "string"


개발자는 실제로 "conversion"이 의도적으로 "Tom"을 부울에 할당하려고 하지만 이러한 종류의 오류가 우연히 발생할 가능성이 높습니다. 기술적으로 말하면 JavaScript 자체의 "type dynamism"은 언어로 설계 되었기 때문에 아무런 문제가 없습니다. 모든 JavaScript는 웹을 위한 간단한 스크립팅 언어로 탄생했습니다. 그러나 JavaScript의 편안한 특성으로 인해 코드에 심각한 문제가 발생하여 유지 관리 성과 안정성이 저하 될 수 있습니다. TypeScript는 JavaScript에 강력한 유형을 추가하여 이러한 문제를 해결하는 것을 목표로 합니다. 경고에 표시되는 "모든"유형은 예외이며 "느슨한" TypeScript 유형입니다. 의미 :이 변수는 문자열, 부울, 객체 유형이 될 수 있습니다. 상관 없어요 실제로 유형 검사가 전혀 없는 것과 같습니다. 구성에서 strict을 true로 설정하면 TypeScript에 "내 코드에서 모호성을 허용하지 않습니다"라고 말합니다.


{
  "compilerOptions": {
    "target": "es5",
    "strict": true
  }
}


그렇기 때문에 'event'매개 변수에 암시 적으로 'any'유형이 있습니다. 컴파일 중. 이론으로 충분히, 지금 이러한 유형을 수정합시다.