왜 Typescript인가?

2736 단어 typescriptjavascript

왜 Typescript인가



Typescript는 빌드 시 유형을 추가하여 JavaScript를 확장합니다.

이익
  • ✅ 개발자 의도의 일부로 제약 조건 및 가정을 인코딩합니다. 방어적 프로그래밍: 입력을 신뢰하지 마십시오. 인지 및 성능 오버헤드 발생
  • ✅ 오류를 포착하고 수정 사항을 제공하여 개발 경험 속도를 높입니다.
    코드를 실행하기 전에. research
  • 에 따라 JavaScript 감지 가능한 버그의 약 15%를 방지할 수 있습니다.
  • ✅ 코드를 크게 손상시키지 않고 더 쉽게 리팩토링합니다. 가정된 암시적 계약을 깨는 것에 대한 두려움 없이 리팩토링할 수 있는 자신감을 줍니다.
  • ✅ 향상된 개발자 경험: 복잡한 대형 코드를 탐색하고 이해하는 것이 더 쉽습니다. 소스 파일을 자세히 살펴보고 모든 코드 구현을 읽을 필요가 없습니다. 코드가 하는 일을 보는 것보다 한 단계 더 높은 추상화로 이동할 수 있습니다
  • .
  • ✅ 문서화에 도움이 됩니다. 자동화된 API 문서 생성. 보다 공식화되고 안정적인 계약

  • 단점


  • ❌ 트루 스태틱 타이핑이 아니라, 트루 타입이 아닌 객체의 모양만 확인합니다.
  • ❌ 정적 유형이 아닌 언어에서 오는 개발자를 위한 패러다임 전환, 학습 곡선
  • ❌ 추가 단계 추가 — .ts 파일에서 .js로 변환/고려해야 할 많은 옵션.

  • 앱 대 라이브러리 문제



    앱 관점
  • 데이터 작업 시 더욱 풍부해집니다. 사용할 수 있는 열거형, 호출할 수 있는 메서드의 오버로드를 찾을 수 있습니다.
  • 더 나은 캡슐화 도구. 비공개, 보호, 공개, 읽기 전용입니다. 의도하지 않은 코드가 최종 사용자에게 숨겨져 있음
  • 향상된 "주요 버전 업그레이드"경험, 즉. Lodash 3에서 4로 업그레이드하면 모든 깨진 코드가 typescript 검사를 보여주는 즉시 할 일 목록을 얻을 수 있습니다.

  • 도서관 관점
  • 공용 API 표면 생성 및 유지, 의미론적 버전 보장 지원
  • 열거형을 사용하여 유일한 유형의 인코딩된 값 목록을 허용하고 향후 호환성을 지원하고 향후 값을 예약합니다.
  • SemVer(지원 중단, 파손)
  • API 문서

  • 몇 가지 코드 예제를 보여주세요


  • 대소문자/입력 오류

  • 평범한 오래된 .js

    let toothBrush = { name:'OracleB', price: 2.99 }
    
    function getProductName(product) {
        console.log(product.Name); //simple case error
    }
    
    getProductName(toothBrush)  //undefined
    
    


    유형 검사 .ts

    type Product= { name:string, price: number}; //type is defined here..
    
    let toothBrush = { name:'OracleB', price: 2.99 }
    
    function getProductName(product: Product) {
        console.log(product.Name); // !! will fail at development time
    }
    
    getProductName(toothBrush)
    
    
    


  • undefined는 함수가 아닙니다.

  • 
    let myFunction;
    
    myFunction('hello'); //Uncaught type error, not defined..
    
    myFunction = (message)=> console.log(message);
    
    


  • 우발적 유형의 강제

  • function addFive(num) {
        return num + 5;
    }
    
    let result = addFive('hello') // result = hello5
    
    



    function addFive(num:number) { ... } // would have fixed this problem in advance.
    
    


    신화



    모든 것을 고칠 수는 없으며 나쁜 코드 냄새도 고칠 수 없습니다.

    ❌ 더 이상 런타임 오류가 없습니다.
    ❌ 코드가 더 빨리 실행됩니다.

    좋은 웹페이지 즐겨찾기