TypeScript, 마이너스 타입 스크립트

수년 동안 TypeScript는 JavaScript 개발의 필수 부분이되었습니다. JavaScript를 기반으로 한 유형 시스템을 추가하여 코드의 가독성과 유지 관리를 향상시킵니다. 그러나 TypeScript의 추가 구문 및 컴파일 단계는 때때로 개발 부담을 증가시킬 수 있습니다. 다행히도 TypeScript 팀은 유형 안전 및 개발 효율성을 모두 고려하여 JSDOC를 사용하여 순수한 JavaScript 코드의 유형 검사를 지원합니다.

프로젝트 설정

JSDOC로 유형 확인을 시작하려면 nodejs 및 npm이 필요합니다. 새 프로젝트를 만들고 npm init 실행하십시오. 이 기사에서는 Code vs Code를 코드 편집기로 사용합니다. 설치 타이프 스크립트 :

 NPM I -D TypeScript

tsconfig.json 파일을 만들고 다음 구성을 추가하십시오.

 {
  "컴파일러 옵션": {
    "대상": "esnext",
    "모듈": "esnext",
    "moduleresolution": "노드",
    "lib": [ "ES2017", "dom"],
    "허용": 사실,
    "Checkjs": 사실,
    "Noemit": 사실,
    "엄격한": 거짓,
    "NoimplicitThis": True,
    "Always Strict": True,
    "EsmoduleInterop": True
  },
  "포함": [ "스크립트", "테스트"],
  "제외": [ "node_modules"]
}

주요 구성은 allowJs 및 checkJs 이며 모두 true 로 설정되어 Typecript가 JavaScript 코드를 확인할 수 있습니다. 또한 /script 디렉토리를 코드의 위치로 지정했습니다.

간단한 예

index.js 파일을 만들고 간단한 추가 기능을 작성하십시오.

 /**
 * 두 숫자를 함께 추가하십시오
 * @param {number} x
 * @param {number} y
 * @return {번호}
 */
함수 추가 (x, y) {
  반환 XY;
}

JSDOC 주석 @param 및 @return 통해 매개 변수 유형과 반환 값을 지정합니다. 오류 유형으로 함수를 호출하십시오. 대 코드는 오류가 발생합니다.

JSDOC 주석은 TypeScript 코드와 동일합니다.

 /**
 * 두 숫자를 함께 추가하십시오
 */
함수 추가 (x : 숫자, y : 숫자) : 숫자 {
  반환 XY;
}

JSDOC는 string , object , Array 및 HTMLElement , MutationRecord 와 같은 DOM 유형과 같은 다양한 내장 유형을 지원합니다.

JSDOC는 또한 WeakMap 과 같은 객체에 유형 제약 조건을 추가 할 수 있습니다.

 /** @type {약점<object string> } */
const metadata = 새로운 약점 ();

const 객체 = {};
const otherobject = {};

메타 데이터 (객체, 42); // 값이 문자열 메타 데이터가 아니기 때문에 오류 가보고됩니다.</object>

사용자 정의 유형

JSDOC는 Person 유형과 같이 사용자 정의 유형을 정의 할 수 있습니다.

 /**
 * @typedef 사람
 * @property {String} 이름 - 사람의 이름
 * @property {number} age- 사람의 나이
 * @property {String} [Hobby] - 선택적인 취미
 */

@typedef 사용하여 유형을 정의하고 @property 또는 @prop 사용하여 속성을 정의하십시오.

사용자 정의 유형 사용 :

 /** @type {person}*/
const person = {이름 : 'John Doe', 나이 : 30, 취미 : 'Reading'};

제한된 옵션 세트는 Union 유형을 사용하여 정의 할 수 있습니다.

 /**
 * @typedef { 'cat'| 'dog'| 'fish'} pet
 */

제네릭

JSDOC는 identity 기능과 같은 제네릭을 지원합니다.

 /**
 * @template t
 * @param {t} 대상
 * @return {t}
 */
기능 아이덴티티 (대상) {
  반환 대상;
}

@template 사용하여 일반 유형을 정의하십시오.

변환을 입력하십시오

때때로 처리 이벤트 리스너와 같은 유형 변환이 필요합니다.

 document.getElementById ( 'input'). addeventListener ( 'input', event => {
  console.log (/** @type {htmlinputeLement}*/(event.target) .Value);
});

사용 /** @type {类型} */ 유형 변환.

요약

JSDOC는 순수한 JavaScript 코드를 작성하는 동안 유형 확인 및 코드 프롬프트를 얻는 방법을 제공합니다. 이는 추가 구문 및 컴파일 단계를 도입하지 않고 코드 품질을 향상시키려는 프로젝트에 유용합니다. TypeScript 컴파일러는 강력하지만 JSDOC는 유연한 대안을 제공합니다.

위 내용은 TypeScript, 마이너스 타입 스크립트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!