TypeScript를 배우고 JavaScript를 버려야 하는 이유는 무엇입니까? TypeScript 대 JavaScript

당신은 JavaScript와 결혼하지 않았습니다. 당신이 그것을 얼마나 좋아하든 상관없이 TypeScript를 사용해 보아야 합니다. 이사할 이유가 없을 수도 있지만 TypeScript를 조금 맛보고 싶은 여행으로 안내해 드리겠습니다. TypeScript로 전환해야 하는 13가지 이상의 이유를 제시할 수 있지만 지금은 개발에 있어 TypeScript가 JavaScript보다 훨씬 나은 이유를 설명하는 5가지 포인트를 통해 TypeScript로 전환하도록 설득하려고 노력할 것입니다. 다음 프로젝트에 TypeScript를 선택해야 하는 이유.

엄격한 형식의 JavaScript

TypeScript는 단지 엄격한 형식의 자바스크립트일 뿐입니다. 내가 JavaScript를 싫어하는 이유 중 하나(예, 싫어합니다)는 언어에 유연성이 너무 많아서 규칙이나 규정이 없고, 어떤 허튼 소리라도 작성할 수 있으며, 오류가 발생하지 않는다는 것입니다(예외가 있습니다). 예를 들어, 변수를 생성하고 값으로 6이라는 숫자를 지정한 경우 나중에 동일한 변수에 일부 함수를 할당하고 해당 변수를 호출할 수도 있습니다. 어쨌든 제 생각엔 좀 우스꽝스러워 보입니다. TypeScript가 그것과 관련이 있습니다.

typescript에서 변수를 정의할 때 변수가 숫자, 배열, 문자열 등을 저장하는 것처럼 해당 유형을 작성해야 합니다. 일단 그렇게 하면 그 안에 다른 어떤 것도 저장할 수 없습니다. 그렇지 않으면 TypeScript에서 계속 진행할 수 없으며 TypeScript는 이에 대해 엄격합니다.

변수에 타입을 언급하지 않고 어떤 값을 할당하더라도 주어진 값에서 자동으로 타입을 찾아 기억하는 것은 너무 스마트합니다.

C/C와 같은 언어를 알고 있다면 유형은 int age로 정의됩니다. 마찬가지로 TypeScript에서는 let age: number;와 같이 콜론 기호 다음에 변수 이름 뒤에 유형을 정의합니다. 그런 식으로 우리는 JavaScript 구문을 변경하지 않고 TypeScript를 채웠습니다. 그것이 제가 처음에 말씀드린 것입니다. TypeScript는 단지 유형만 있는 JavaScript가 아닙니다. 나는 typescript의 구문에 초점을 맞추지 않을 것입니다. 이는 이 기사의 범위에 포함되지 않습니다.

이제 JS라면 이름, 배열, 함수 등 나이에 따라 무엇이든 할 수 있지만 TS에서는 일단 숫자로 생성되면 숫자로 유지됩니다. , 다른 것은 없습니다. 그렇게 하면 즉시 오류가 발생하지만 JS에서는 함수를 할당하지 않고 age를 호출하거나 .length 속성에 액세스하는 등 불법적인 일을 하지 않는 한 이를 허용합니다. 기능입니다.

처음에는 JS에서 TS로 전환할 가치가 없는 것처럼 보일 수도 있지만, 일단 완전히 이해하고 나면 이 기능 때문에 JS에서 코딩하고 싶지 않을 것입니다.

오류가 필요하기 때문입니다.

오류가 필요하다고 말하는 것은 오류가 있는 코드를 작성하라는 의미가 아닙니다. 하지만 작성한 코드는 오류가 없어야 하며 이를 위해 오류를 제공하는 것이 개발 환경의 임무입니다. 오류. 그리고 JS에서는 그렇게 하지 않습니다. 사람들이 JS를 좋아하고 동시에 싫어하는 이유 중 하나입니다. 오류라고 하면 구문 오류를 제외한 모든 것을 의미합니다. JS는 뭔가 잘못 작성해도 오류가 발생하지 않지만, 잘못된 일이 발생하면 오류가 발생합니다. 따라서 테스트 시 코드의 일부가 실행되지 않으면 프로덕션에서 약간의 어려움을 겪을 준비를 하십시오. :)
예시를 살펴보겠습니다

두 숫자를 곱하는 코드를 작성 중입니다. 이 작업을 JS와 TS 모두에서 수행해 보겠습니다. 그러면 JS가 얼마나 불안정하고 여러 가지 방식으로 애플리케이션을 손상시킬 수 있는지 알게 될 것입니다.

문자 그대로 곱하기를 어떤 방식으로든 호출할 수 있으며 제한이 없으며 항상 예상치 못한 결과가 나옵니다. 이것이 JS의 가장 나쁜 점입니다. 이제 반환된 값을 어딘가에 사용해야 한다고 가정해 보겠습니다. 이로 인해 얼마나 많은 불일치와 예상치 못한 결과가 발생합니까? 귀하의 지원서에.

하지만 TypeScript 덕분에 매우 엄격합니다. 함수가 예상하는 규칙을 따르지 않으면 계속 진행할 수 없습니다. 그러면 숫자를 전달해야 하며 둘 다 숫자여야 한다고 말합니다. 두 개의 인수를 전달해야 하며 둘 다 숫자여야 합니다. TypeScript에서 동일한 코드를 살펴보겠습니다. TS 구문을 모르더라도 걱정하지 마세요. 반환 유형이 여는 중괄호 앞에 오고 인수 유형과 이름이 있다는 점만 제외하면 JS와 유사합니다.

그래서 여기 TS에서는 결코 예측할 수 없는 결과가 없습니다. 모든 오류를 제거해야 계속 진행할 수 있습니다. 이것이 제가 TS <3을 사랑하게 만드는 이유입니다.

TS는 귀하가 작성한 코드의 오류를 알려줄 뿐만 아니라 오류가 발생할 수 있는 가능성도 알려줍니다. 이에 대한 간단한 예를 살펴보겠습니다.

보시다시피 소셜 속성은 선택 사항입니다. 즉, 소셜이 정의되지 않은 경우가 있을 수 있으며 TS는 이를 알고 처리할 때까지 진행을 허용하지 않습니다.

그래서 이것은 JS에서 조용히 무시되고 경우에 따라 오류가 발생하는데 이것이 TS가 더 안정적이라고 간주되는 또 다른 이유입니다.

자동 테스트 및 문서화.

JS로 작성된 일부 라이브러리의 함수를 사용한다고 가정하면 어떤 매개변수를 전달해야 하는지 어떻게 알 수 있나요? 문서로 이동하여 어떤 매개변수를 사용할지, 어떤 매개변수가 선택사항인지 확인한 다음 함수를 호출합니다. 그러나 TS에서는 이를 문서화할 필요가 없으며 모든 것이 유형 자체로 설명됩니다. 또한 이는 함수를 올바른 방식으로 사용하고 임의의 매개변수를 전달하지 않음을 보장합니다.

예를 들어 위의 두 번째 섹션을 참조할 수 있습니다.

취할 수 있는 또 다른 경우는 중첩된 속성이 있는 JS 객체를 제공하는 라이브러리를 사용한다고 가정할 때, 속성의 이름이 정확히 무엇인지, 정의되지 않을 수 있는 속성이 무엇인지 확인하는 것이 중요합니다. 통증. 문서를 파헤치거나 개체에 어떤 내용이 포함되어 있는지 확인하기 위해 개체를 콘솔 로그해야 하는 경우도 있습니다. 그것이 제가 정말 싫어하는 것입니다. 객체 자체가 어떤 속성을 포함하고 있는지, 일부 속성이 정의되지 않았거나 속성에 문자열, 숫자, 배열 등의 값이 있는지 알려주는 방식을 원합니다. 음, TypeScript에 다시 한 번 감사드립니다. 코드가 TS로 작성되면 정확한 동작을 얻게 됩니다. 예시를 통해 살펴보겠습니다.

이제 사용자가 갖게 될 속성을 확인하기 위해 콘솔에 기록하거나 . user 이후에 자동으로 속성 목록을 제공하고 정의되지 않은 속성도 알려줍니다. 아래 이미지를 참고하세요.

또한 모든 가능성을 확인하여 코드를 자동으로 테스트하고 가능성이 실패하면 알려줍니다. 정말 놀랍습니다. 그렇죠. 그렇습니다. 이 기능은 개발 시 엄청난 수의 버그를 방지합니다. 함수에 대한 테스트를 작성하거나 다른 값에서 수동으로 테스트할 필요가 없습니다. TS가 대신 수행하고 뭔가 놓친 경우 알려줍니다. 나중에 문제가 발생할 수 있습니다.

아래 코드에서는 두 개의 인수를 취하고 정의되지 않은 경우 각 매개변수를 배열에 추가하여 문자열 배열을 반환하는 함수를 작성했습니다. 첫 번째 인수는 필수이고 두 번째 인수는 선택 사항입니다.

위의 코드는 제가 실수할 수 있는 매우 일반적인 시나리오입니다. Array.push는 업데이트된 배열을 반환하지 않지만 배열의 새 길이를 반환합니다. 따라서 위 코드를 JS로 작성하면 오류가 발생하지 않고 내 코드가 실행되어 예상된 결과를 제공합니다. 여기서 디버깅하고 실수를 찾아야 하며, 함수를 통과하면 2가 반환됩니다. 두 번째 주장도 마찬가지다. 그러나 여기 TS에서는 TypeScript가 자동으로 사례를 실행하고 특정 사례에서 함수가 문자열 배열을 반환하지 못한다는 것을 분명히 알 수 있습니다.

또 다른 오류가 있습니다. 두 번째 매개변수를 전달하지 않으면 여전히 아무것도 반환하지 않고(정의되지 않음) 문자열 배열을 반환해야 하므로 함수의 동작을 위반하는 것입니다. 그래서 여기서는 함수에 몇 가지 변경을 했고 TS는 녹색 플래그를 제공합니다. 이는 함수가 결코 예상치 못한 결과를 제공하지 않는다는 것을 의미합니다. 아래를 참조하세요.

JavaScript보다 항상 몇 단계 앞서 있습니다.

Typescript는 항상 Javascript보다 몇 단계 앞서 있습니다. JavaScript로 새로운 기능이 발표되고 다음 ECMA 릴리스에 출시될 예정이라면 TS는 공식 릴리스 전에 이를 릴리스하고 TS를 이전 버전으로 컴파일할 수 있으므로 브라우저에서의 호환성 걱정 없이 사용할 수 있습니다. JavaScript(예: ES5). TypeScript에는 JavaScript에는 없는 많은 기능이 있습니다.

따라서 TypeScript는 JavaScript, ECMA5, ECMA6, ECMA7 및 ECMAnext와 JavaScript에도 존재하지 않는 일부 기능의 상위 집합이라고 말할 수 있습니다.

결론

예, 조만간 TypeScript를 수락해야 합니다. 당신은 그것에서 도망칠 수 없습니다. JavaScript로 작성된 모든 npm 패키지는 해당 유형도 제공해야 하며, 그렇지 않으면 typescript를 지원하는 다른 패키지가 선호됩니다. 이제 대부분의 대규모 라이브러리, 패키지 및 프레임워크가 TypeScript로 작성되고 있습니다.

처음에는 패키지도 TypeScript를 지원하는 JavaScript에 있었지만 이제는 상황이 바뀌었고 패키지는 TypeScript에 있으며 JavaScript를 지원하고 있습니다. 모두가 JavaScript보다 TypeScript의 강력함과 필요성을 인정하고 이를 수용하고 있습니다.

루프백과 마찬가지로 TS 코드만 작성해야 하기 때문에 Angular를 배울 수 없습니다. 4. NestJS 기본 언어는 TypeScritpt이며 JavaScript도 지원합니다. 다음은 NestJs의 말입니다.

우리는 TypeScript를 좋아하지만 무엇보다도 Node.js를 좋아합니다. 이것이 바로 Nest가 TypeScript 및 순수 JavaScript와 모두 호환되는 이유입니다. Nest는 최신 언어 기능을 활용하므로 바닐라 JavaScript와 함께 사용하려면 Babel 컴파일러가 필요합니다.

아직도 제가 알려드린 이유에 만족하지 못하시고 반대 질문이 있으신 경우 언제든지 저희에게 연락하실 수 있습니다. 제 말을 믿으세요. 시도해 볼 가치가 있고 후회하지 않으실 것입니다.

위 내용은 TypeScript를 배우고 JavaScript를 버려야 하는 이유는 무엇입니까? TypeScript 대 JavaScript의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!