"TypeScript 란 무엇입니까?"라는 질문 으로이 자습서를 시작합시다.
TypeScript는 Plain JavaScript로 컴파일하는 JavaScript의 유형 된 슈퍼 세트입니다. 비유로, JavaScript가 CSS 인 경우 TypeScript는 SCS가됩니다.
쓰는 모든 유효한 JavaScript 코드는 유효한 TypeScript 코드입니다. 그러나 TypeScript를 사용하면 정적 타이핑과 모든 브라우저에서 지원되는 일반 JavaScript로 컴파일되는 최신 기능을 사용할 수 있습니다. TypeScript는 JavaScript를 확장 가능하게 만드는 문제를 해결하는 것을 목표로하며, 꽤 좋은 일을합니다.
이 튜토리얼에서는 TypeScript의 다양한 기능과 학습이 좋은 생각에 대해 읽는 것으로 시작합니다. 이 기사의 나머지 섹션은 TypeScript 구문 및 기타 중요한 기능을 지원하는 인기있는 텍스트 편집기와 함께 TypeScript의 설치 및 컴파일을 다룹니다.
우리는 프로그래밍 언어를 사용하여 컴퓨터에 무언가를 원하는 방법을 지시합니다. 그들은 기본적으로 의사 소통의 매체 역할을합니다. 그러나 컴퓨터는 우리가 쓰는 JavaScript, PHP 또는 Python 코드를 직접 이해하지 못합니다. 우리가 쓴 사람이 읽을 수있는 모든 코드는 궁극적으로 컴퓨터가 실행하고 이해할 수있는 기계 코드로 변환됩니다.
현대 프로그래밍 언어는 프로그래머의 요구를 염두에두고 작성됩니다. 이는 다양한 프로그래밍 언어가 사용되는 방식으로 인해 다른 기능 세트로 설계되었음을 의미합니다. JavaScript는 최소한의 코드를 작성하여 작업을 쉽게 수행 할 수 있도록 작성되었습니다.
JavaScript는 초기부터 훨씬 더 인기를 얻었으며 현재는 소규모 및 대규모 프로젝트에 널리 사용됩니다. 소규모 프로그램을 작성할 때 허용되는 JavaScript의 일부 제한은 많은 팀원과 대규모 프로젝트를 수행 할 때 생산성을 방해 할 수 있습니다.
TypeScript는 유형 확인과 같은 다양한 기능을 추가하여 대규모 프로젝트에서 코드를 변경할 때 발생할 수있는 오류를 신속하게 포착 할 수 있도록 이러한 제한 사항을 해결하기 위해 만들어졌습니다.
이전에 TypeScript를 사용한 적이 없다면 결국 JavaScript에 컴파일 할 때 왜 배운 이유를 궁금해 할 것입니다.
TypeScript를 배우는 데 많은 시간을 소비하지 않아도됩니다. TypeScript와 JavaScript는 모두 비슷한 구문을 가지고 있으며, Const 키워드의 이름을 바꾸어 재 할당을 통해 해당 변수의 값 변경을 방지하거나 재 선포를 방지하도록 지정할 수 있습니다. 그러나 이것이 변수의 값이 불변이라는 것을 의미하지는 않습니다. 그것을 변경하는 다른 방법이 여전히 있습니다. 예는 다음과 같습니다.
const 과일 = [ "사과", "망고", "바나나"];<br> const 야채 = [ "감자", "양파", "오이"];<br><br> 과일 .push ( "오렌지");<br> // [ "사과", "망고", "바나나", "오렌지"]]]<br><br> 과일 [0] = "파파야";<br> // [ "파파야", "망고", "바나나", "오렌지"]]]]<br><br> 과일 = 야채 // 오류<br>
마지막 줄까지 위의 코드는 완벽하게 유효한 JavaScript이며 오류가 발생하지 않습니다. 우리는 정의되지 않은 것을 값으로 선언했습니다. 이 접근법은 객체의 속성을 동적으로 추가, 제거 또는 업데이트 할 수 있기 때문에 의미가 있습니다. 그러나 오류 또는 예상치 못한 동작의 원천 일 수도 있습니다. 예는 다음과 같습니다.
가이 = {<br> 이름 : '마리오',<br> 나이 : 56<br> }<br><br> console.log (guy.name '은'guy.ahe '는 나이가 든다');<br> // 마리오는 정의되지 않은 나이가되었습니다.<br>안개가 찍는 AHE는 JavaScript에서 오류로 간주되지 않지만 TypeScript에서 잡혔을 것입니다. TypeScript에서 JavaScript로 위의 코드를 컴파일하면 Perimetertriangle ()에 대한 오류가 표시됩니다. 이로 인해 삼각형의 둘레로서 무의미한 값이 출력됩니다.
기능 주변 복막 (A, B, C) {<br> console.log (`삼각형의 주변은 : $ {abc}`);<br> }<br><br> 주변 지수 (20, 30, "감자");<br> // 삼각형의 주변은 50potato입니다<br><br> 주변 지수 ( "감자", 10);<br> // 삼각형의 주변은 : potato10undefined입니다<br><br> Perimetertriangle ();<br> // 삼각형의 주변은 : Nan입니다<br><br> 테리 미세관 (20, 30, 50);<br> // 삼각형의 주변은 : 100입니다<br> 위의 코드를 변경하지 않고 TypeScript에서 JavaScript로 컴파일하려고하더라도 제공된 인수 수의 불일치로 인해 두 번째 및 세 번째 기능 호출이 오류가 발생합니다. 그러나 기능 정의에 더 perimeterTriangle() 정보를 추가 할 수 있습니다.
함수 perimetertriangle (a : 숫자, b : 숫자, c : 숫자) {<br> console.log (`삼각형의 주변은 : $ {abc}`);<br> }<br><br> 주변 지수 (20, 30, "감자");<br> // 오류 : 유형 숫자에 할당 할 수없는 유형의 인수.<br><br> 주변 지수 ( "감자", 10);<br> // 오류 : 세 가지 인수가 예상되었지만 2를 얻었습니다.<br><br> Perimetertriangle ();<br> // 오류 : 세 가지 인수가 예상되었지만 0을 얻었습니다.<br><br> 테리 미세관 (20, 30, 50);<br> // 삼각형의 주변은 100입니다.<br>이제 첫 번째 함수 호출조차 인수 유형의 불일치로 인해 오류가 발생합니다. TypeScript는 그러한 오류를 많이 포착하고 장기적으로 많은 시간을 절약하는 데 도움이됩니다.
.ts 파일에 일부 TypeScript 코드를 작성했다고 가정 해 봅시다. 브라우저는이 코드를 스스로 실행할 수 없습니다. 브라우저에서 이해할 수있는 일반 JavaScript로 TypeScript를 컴파일해야합니다.
IDE를 사용하는 경우 코드는 IDE 자체의 JavaScript로 컴파일 될 수 있습니다. 예를 들어 Visual Studio를 사용하면 TypeScript 코드를 JavaScript로 직접 컴파일 할 수 있습니다. Typectript.json 파일을 작성해야합니다. 여기서 TypeScript 파일을 JavaScript로 컴파일하기위한 모든 구성 옵션을 지정해야합니다.
큰 프로젝트를 진행하지 않을 때 가장 초보자 친화적 인 접근 방식은 터미널 자체를 사용하는 것입니다. 먼저 터미널의 TypeScript 파일의 위치로 이동 한 다음 다음 명령을 실행해야합니다.
TSC First.ts<br>
이렇게하면 같은 위치에서 First.js 라는 새 파일이 생성됩니다. 이미 First.js 라는 파일이 있으면 덮어 쓰기입니다.
현재 디렉토리 내부의 모든 파일을 컴파일하려면 와일드 카드를 사용하여 수행 할 수 있습니다. 이것은 재귀 적으로 작동하지 않을 것임을 기억하십시오.
TSC *.TS<br>
마지막으로, 이름을 한 줄로 명시 적으로 제공하여 특정 파일 만 컴파일 할 수 있습니다. 이 경우 JavaScript 파일은 해당 파일 이름으로 작성됩니다.
TSC First.ts Product.ts Bot.ts<br>
TypeScript의 두 숫자를 곱한 다음 프로그램을 살펴 보겠습니다.
a : 숫자 = 12;<br> B : 숫자 = 17;<br><br> 함수 showproduct (첫 번째 : 숫자, 두 번째 : 숫자) : void {<br> Console.log ( "제품은 :"첫 번째 * 초);<br> }<br><br> 쇼 제품 (A, B);<br>위의 TypeScript 코드는 대상 버전이 ES6으로 설정되면 다음 JavaScript 코드로 컴파일됩니다. TypeScript에서 제공 한 모든 유형 정보가 컴파일 후 어떻게 진행되는지 확인하십시오. 다시 말해, 코드는 브라우저에서 이해할 수있는 JavaScript로 컴파일되지만 훨씬 더 나은 환경에서 개발을 수행하여 많은 버그를 잡는 데 도움이됩니다.
a = 12를하자;<br> B = 17을하자;<br> 함수 showproduct (첫 번째, 두 번째) {<br> Console.log ( "제품은 :"첫 번째 * 초);<br> }<br> 쇼 제품 (A, B);<br> 위의 코드에서는 변수 a 및 b 유형을 숫자로 지정했습니다. 즉, 나중에 b 의 값을 "Apple"과 같은 문자열로 설정하려고하면 TypeScript에서 "Apple"이 유형 number 에 할당되지 않는 오류가 표시됩니다. 코드는 여전히 JavaScript로 컴파일되지만이 오류 메시지를 사용하면 실수를 저지르고 런타임 중에 문제를 피하는 데 도움이됩니다.
다음은 Visual Studio 코드에 오류 메시지를 표시하는 스크린 샷입니다.
위의 예는 TypeScript가 코드의 가능한 오류에 대한 힌트를주는 방법을 보여줍니다. 이것은 매우 기본적인 예 였지만 매우 큰 프로그램을 만들 때 이와 같은 메시지는 오류 가능성이 적은 강력한 코드를 작성하는 데 큰 도움이됩니다.
이 시리즈에서 시작하는 튜토리얼은 다양한 TypeScript 기능에 대한 간단한 개요를 제공하고 개발에 사용할 수있는 IDE 및 텍스트 편집기에 대한 몇 가지 제안과 함께 언어를 설치하는 데 도움이되었습니다. 다음 섹션에서는 TypeScript 코드를 JavaScript로 컴파일하는 다양한 방법을 다루었으며 TypeScript가 일반적인 오류를 피하는 데 도움이되는 방법을 보여주었습니다.
이 튜토리얼이 마음에 들었 으면 좋겠어요. 시리즈의 다음 튜토리얼은 TypeScript에서 사용 가능한 다양한 변수 유형에 대해 논의합니다.
위 내용은 초보자를위한 타이프 스크립트, 1 부 : 시작하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
