미래 지향적인 웹 앱 구축: The Codest의 전문가 팀이 제공하는 인사이트
The Codest가 최첨단 기술로 확장 가능한 대화형 웹 애플리케이션을 제작하고 모든 플랫폼에서 원활한 사용자 경험을 제공하는 데 탁월한 성능을 발휘하는 방법을 알아보세요. Adobe의 전문성이 어떻게 디지털 혁신과 비즈니스를 촉진하는지 알아보세요...
이제 JavaScript 생태계를 사용하는 사람이라면 누구나 타입스크립트를 알고 있습니다. 타입스크립트는 가장 사랑받는 기술 중 하나이며*, 그 사용량은 지속적으로 증가하고 있습니다(2018년 52%에서 2020년 78%로 사용 점유율 증가)*.
타입스크립트의 현재 위치는 개발자 경험을 실제로 개선할 수 있는 기술이기 때문에 갑자기 생긴 것이 아닙니다. 보다 명시적인 코딩은 다음과 같은 제어 및 예측 가능성을 높여줍니다. 코드.
이 글에서는 타입스크립트를 사용하도록 설득하려고 합니다.
*- 데이터 소스: JS 2020 현황 그리고 2020년 스택 오버플로 개발자 설문조사.
일반적으로 다음에서 애플리케이션을 개발하는 경우 JavaScript흐름이 다음과 같을 수 있습니다.
는 다음과 같이 보입니다:
타입스크립트를 사용하면 실제로 변경할 수 있으며, 다음과 같은 경우 유형 오류 코드에서 컴파일러 오류 메시지나 IDE 실시간 피드백을 통해 즉시 알 수 있습니다.
물론 타입스크립트 컴파일러가 모든 문제를 해결해주지는 않으며 모든 버그에 대해 경고해주지는 않지만, 그 도움은 매우 귀중할 수 있습니다.
정말 간단합니다. WebStorm 또는 VSCode와 같은 우수한 IDE를 사용하는 경우 다음을 얻을 수 있습니다.
타입스크립트로 구문 완성도가 향상되었습니다. 개발자 환경이 크게 개선된 것 같지는 않지만 결국에는 시간을 절약하고 오타나 실수를 방지할 수 있기 때문에 모든 개선 사항이 중요합니다. 또한 유형이나 인터페이스를 한 번 정의하면 구조를 항상 기억할 필요가 없으므로 비즈니스 로직을 작성하는 데 집중할 수 있습니다.
예를 들어, 어떤 이유로든 리팩터링을 해야 한다고 가정해 보겠습니다. 프로젝트 새 기능을 추가하라는 작업을 받았는데 해당 기능이 레거시 코드와 어떻게든 연결되어 있습니다.
타입스크립트를 사용하면 변경을 수행한 후 또 다른 변경이 필요한 부분이 있을 때 컴파일러가 이를 경고해 주므로 더 쉽고 덜 고통스러울 수 있습니다.
예를 들어, 변경된 함수 서명일 수도 있고, 변경 후
함수는 완전히 다른 것을 반환하므로 반환되는 유형도 달라집니다.
JavaScript는 약하고 동적으로 입력되므로 값으로 변수를 초기화할 때 let query = ''
나중에 코드에서 개발자가 실수로 다음과 같은 비합리적인 작업을 수행할 수 있습니다. 쿼리 = true
를 입력하면 유효한 JS 코드가 됩니다.
잘 작성된 코드에서는 이전에 문자열이었던 변수에 부울 값을 할당하는 일이 발생하지 않아야 합니다. 따라서 일반적으로 유형 변경을 통한 할당은 실수로 인해 발생합니다.
타입스크립트를 사용할 때는 변수 유형을 변경할 수 없기 때문에 let query = ''
변수로 설정하면 문자열
유형으로 설정하면 실수로 유형을 변경할 수 없습니다.
변수가 둘 이상의 유형이 되도록 하려면 항상 다음과 같이 유니온 유형을 사용하여 명시적으로 수행합니다. 문자열 | 숫자
.
따라서 Typescript를 사용하면 코드를 더욱 예측 가능하고 명확하게 만들 수 있습니다.
또한 Typescript는 제어 흐름 분석에서 명시성을 처리하고 문제가 발생할 가능성이 있는 경우 사용자에게 경고를 표시합니다.
첫 번째 예는 다음과 같습니다. 만약
차단하면 오류가 발생합니다:
TS2339: 'ClothingProduct' 유형에 '배터리' 속성이 존재하지 않습니다.
2번, 대상 배터리
및 ram
속성입니다.
두 번째 블록에서 - else
에 대한 오류가 발생합니다. 크기
속성을 추가할 수 있습니다. 물론 이는 예시를 보여주기 위한 것일 뿐입니다. 차별받는 노조 그리고 제어 흐름 분석 는 타입스크립트에서 작동하므로 해당 코드로 너무 복잡한 작업을 수행하지 않습니다.
유효한 JavaScript 코드는 동시에 유효한 타입스크립트 코드이므로 코드베이스를 단계별로 마이그레이션할 수 있습니다. 일반적으로는 Typescript에서 엄격 모드를 사용하는 것이 좋지만 이 경우에는 그렇지 않습니다,
부터 시작해야 합니다. "strict": false
in tsconfig.json
그리고 두 가지 옵션을 더 설정해야 합니다.
"allowJs": true, // .js 파일을 사용할 수 있도록 허용하고 해당 파일에서 유형을 검사하지 않습니다.
"skipLibCheck": true, // 우리가 사용하는 라이브러리에서 타입 검사를 건너뜁니다.
이러한 옵션을 사용하면 다음에서 확장자를 변경하기만 하면 JS에서 TS로 파일 단위로 단계별로 마이그레이션할 수 있습니다. .js(x)
에 .ts(x)
를 사용하여 파일에 유형을 추가합니다. 이 접근 방식을 사용하면 수백, 수천 개의 무서운 컴파일 오류를 피할 수 있습니다.
내 생각에는 타입스크립트 자주 가능를 사용하는 것이 장기적으로 정말 유익하기 때문입니다. 프로젝트 유지 관리에 도움이 되고, 개발자 경험이 향상되며, 코드베이스가 더 명확하고 안정적으로 만들어집니다.
그러나 항상 그렇듯이 간단한 랜딩 페이지의 경우 예외가 있습니다.
JavaScript는 클래스 토글이나 다른 간단한 경우에만 사용되며, 타입스크립트는 의미가 없습니다.
또한 타입스크립트를 최대한 활용하려면 충분한 수준의 사용법을 익혀야 하며, 시간이 다소 걸릴 수 있다는 점을 기억해야 합니다. 그래도 시간을 투자할 만한 가치가 있다고 생각합니다.
자세히 읽어보세요:
루비 3.0. Ruby와 잘 알려지지 않은 개인정보 제어 방법
SaaS 프로젝트의 최고 품질 코드. (비기술적인) 창업자로서 왜 이 문제에 관심을 가져야 할까요?
*제목 그래픽은 밈 알기 웹사이트에서 가져온 것입니다.