TypeScript 란 무엇입니까? 강력한 형식의 JavaScript

TypeScript 란 무엇입니까? TypeScript 정의

TypeScript는 기업 개발에 중요한 몇 가지 주요 기능을 추가하는 널리 사용되는 JavaScript 프로그래밍 언어의 변형입니다. 특히 TypeScript는 강력한 형식 입니다. 즉, 프로그래머가 변수 및 기타 데이터 구조를 문자열 또는 부울과 같은 특정 형식으로 선언 할 수 있으며 TypeScript는 해당 값의 유효성을 확인합니다. 느슨한 형식의 자바 스크립트에서는 불가능합니다 .

TypeScript의 강력한 타이핑은 특히 대규모 엔터프라이즈 급 코드베이스를 처리 할 때 개발자를보다 효율적으로 만드는 데 도움이되는 여러 기능을 가능하게합니다. TypeScript는 JavaScript처럼 해석되지 않고 컴파일되므로 실행 전에 오류를 포착 할 수 있습니다. 백그라운드 증분 컴파일을 수행하는 IDE는 코딩 프로세스 중에 이러한 오류를 발견 할 수 있습니다.

JavaScript와의 이러한 주요 차이점에도 불구하고 TypeScript는 JavaScript를 실행할 수있는 모든 곳에서 계속 실행할 수 있습니다. TypeScript는 바이너리 실행 파일이 아니라 표준 JavaScript로 컴파일되기 때문입니다. 더 자세히 알아보기 위해 잠수 해 보겠습니다.

TypeScript 대 JavaScript 

TypeScript는 JavaScript 의 상위 집합 입니다. 올바른 JavaScript 코드도 올바른 TypeScript 코드이지만 TypeScript에는 JavaScript의 일부가 아닌 언어 기능도 있습니다. TypeScript에 고유 한 가장 눈에 띄는 기능은 TypeScript에 이름을 부여한 강력한 유형입니다. TypeScript 변수는 문자열, 숫자 또는 부울과 같은 유형 과 연결되어 컴파일러에게 어떤 종류의 데이터를 알려줍니다. 견딜 수 있습니다. 또한 TypeScript는 유형 추론을 지원하고 모든 유형을 포괄하는 모든 유형을 포함합니다. 이는 변수가 프로그래머에 의해 명시 적으로 할당 된 유형을 가질 필요가 없음을 의미합니다. 더 자세히 설명하겠습니다. 

TypeScript는 객체 지향 프로그래밍을 위해 설계되었습니다. JavaScript는 그다지 많지 않습니다. JavaScript에서 직관적이지 않은 상속 및 액세스 제어와 같은 개념은 TypeScript에서 구현하기가 간단합니다. 또한 TypeScript를 사용하면 JavaScript 세계에서 의미없는 개념 인 인터페이스를 구현할 수 있습니다.

즉, JavaScript로 코딩 할 수없는 TypeScript로 코딩 할 수있는 기능은 없습니다. 이는 TypeScript가 일반적인 의미로 컴파일되지 않았기 때문입니다. 예를 들어 C ++는 지정된 하드웨어에서 실행할 수있는 바이너리 실행 파일로 컴파일됩니다. 대신 TypeScript 컴파일러는 TypeScript 코드를 기능적으로 동등한 JavaScript로 트랜스 코딩 합니다. GitConnected에 대한 Sean Maxwell의이 기사에는 객체 지향 TypeScript 코드 스 니펫과 이에 상응하는 JavaScript 코드의 몇 가지 훌륭한 예가 있습니다. 결과 JavaScript는 웹 브라우저에서 Node.js가 장착 된 서버에 이르기까지 모든 JavaScript 코드를 실행할 수있는 모든 곳에서 실행할 수 있습니다.

따라서 TypeScript가 결국 JavaScript 코드를 생성하는 멋진 방법 인 경우 왜 그럴까요? 이 질문에 답하려면 TypeScript의 출처와 용도를 살펴 봐야합니다.

TypeScript는 무엇에 사용됩니까?

TypeScript는 Microsoft 내에서 개발 된 후 2012 년에 오픈 소스로 출시되었습니다. (소프트웨어 거인은 프로젝트의 청지기이자 주요 개발자로 남아 있습니다.) 당시의이 ZDNet 기사는 이러한 일이 발생한 이유에 대한 흥미로운 조사를 제공합니다.“큰 동기 중 하나는 Microsoft에서 JavaScript로 Microsoft 제품을 유지합니다. "

당시 Microsoft는 Google Maps의 경쟁자로서 Bing Maps를 확장하고 Office 제품군의 웹 버전을 제공하려고 시도했으며 JavaScript는 작업의 기본 개발 언어였습니다. 그러나 본질적으로 개발자들은 JavaScript를 사용하여 Microsoft의 주력 제품 규모로 앱을 작성하는 것이 어렵다는 것을 알았습니다. 그래서 그들은 JavaScript 환경에서 실행되는 엔터프라이즈 급 애플리케이션을 더 쉽게 구축 할 수 있도록 TypeScript를 개발했습니다. 이것이 공식 TypeScript 프로젝트 사이트 "확장되는 자바 스크립트"의 언어 태그 라인 뒤에있는 정신입니다.

TypeScript가 바닐라 JavaScript보다 이런 종류의 작업에 더 나은 이유는 무엇입니까? 글쎄요, 우리는 객체 지향 프로그래밍의 장점에 대해 영원히 논쟁 할 수 있지만, 현실은 대기업 프로젝트에서 작업하는 많은 소프트웨어 개발자들이 그것에 익숙하고 프로젝트 규모가 커짐에 따라 코드 재사용에 도움이된다는 것입니다. 또한 툴링이 개발자 생산성을 높일 수있는 정도를 무시해서는 안됩니다. 언급했듯이 대부분의 엔터프라이즈 IDE는 작업 중에 오류를 발견 할 수있는 백그라운드 증분 컴파일을 지원합니다. (귀하의 코드가 구문 상 올바르다면 여전히 트랜스 파일되지만 결과 JavaScript는 제대로 작동하지 않을 수 있습니다. 오류 검사를 맞춤법 검사와 동일하게 생각하십시오.) 이러한 IDE는 또한 코드를 자세히 살펴볼 때 코드를 리팩터링하는 데 도움이 될 수 있습니다. 계획.

간단히 말해 TypeScript는 Java와 같은 언어의 엔터프라이즈 기능과 도구를 원하지만 JavaScript 환경에서 실행하려면 코드가 필요합니다. 이론적으로는 TypeScript 컴파일러가 직접 생성하는 표준 JavaScript를 작성할 수 있지만 훨씬 더 오래 걸리고 코드베이스가 대규모 팀이 집단적으로 이해하고 디버깅하기가 더 어려울 것입니다.

아, TypeScript에는 또 다른 깔끔한 트릭이 있습니다. 특정 JavaScript 런타임 환경, 브라우저 또는 언어 버전을 대상으로 컴파일러를 설정할 수 있습니다. 잘 구성된 JavaScript 코드는 TypeScript 코드이기도하므로 예를 들어 새로운 구문 기능을 포함하는 ECMAScript 2015 사양에 작성된 코드를 가져 와서 기존 버전의 JavaScript 코드로 컴파일 할 수 있습니다. 언어.

TypeScript 설치

TypeScript로 플레이 할 준비가 되셨나요? 언어 설치는 쉽습니다. 개발 컴퓨터에서 이미 Node.js를 사용하고 있다면 Node.js 패키지 관리자 인 NPM을 사용하여 설치할 수 있습니다. 5 분짜리 공식 TypeScript 튜토리얼이 과정을 안내합니다.

TypeScript는 선택한 IDE에 대한 플러그인으로 설치할 수도 있습니다. 이렇게하면 위에서 설명한 툴링 이점을 얻을 수 있으며 TypeScript를 JavaScript로 컴파일하는 프로세스도 처리 할 수 ​​있습니다. TypeScript는 Microsoft에서 개발했기 때문에 Visual Studio 및 Visual Studio Code에 사용할 수있는 고품질 플러그인이 있다는 것은 놀라운 일이 아닙니다. 그러나 오픈 소스 프로젝트 인 TypeScript는 Eclipse와 같은 오픈 소스 IDE에서 Vim과 같은 오래된 텍스트 편집기에 이르기까지 모든 곳에서 적용되었습니다. 전체 프로젝트는 GitHub에서 찾아보고 다운로드 할 수 있습니다.

TypeScript 구문

TypeScript가 설치되면 탐색을 시작할 준비가 된 것입니다. 이는 TypeScript 구문의 기본 사항을 이해하는 것을 의미합니다. JavaScript는 TypeScript의 기초이므로 시작하기 전에 JavaScript에 대해 잘 알고 있어야합니다. 당신의 주요 관심 포인트는 언어를 독특하게 만드는 TypeScript 특정 기능 일 것입니다. 여기서 중요한 점을 다룰 것입니다.

TypeScript 유형

분명히 TypeScript에서 가장 중요한 구문 기능은 유형 시스템입니다. 이 언어는 여러 가지 기본 유형을 지원합니다.

  • 부울 : 단순한 참 / 거짓 값.
  • 숫자 : JavaScript에서와 같이 TypeScript에서 모든 숫자는 부동 소수점 값입니다. 별도의 정수가 없습니다. TypeScript는 10 진수, 16 진수, 2 진수 및 8 진수 리터럴을 지원합니다.
  • 문자열 : 텍스트 데이터의 문자열입니다. 데이터를 설정할 때 작은 따옴표 또는 큰 따옴표를 사용하여 문자열을 묶을 수 있습니다. 백틱 ( `)을 사용 하여 문자열을 여러 줄로 묶을 수 있으며 구문을 사용하여 문자열에 표현식을 포함 할 수 있습니다 ${ expr }.
  • 배열 및 튜플 : 이러한 유형을 사용하면 지정된 시퀀스에 여러 값을 저장할 수 있습니다. 배열에서 개별 값은 모두 동일한 데이터 유형이지만 튜플에서는 이질적 일 수 있습니다. TypeScript forEach()메서드는 배열의 각 요소에 대해 함수를 호출하는 데 사용됩니다.
  • 열거 형 : C #의 동일한 이름 유형과 마찬가지로 TypeScript 열거 형을 사용하면 숫자 값 시퀀스에 사람이 읽을 수있는 이름을 할당 할 수 있습니다.
  • Any : 이것은 어떤 값이 될지 미리 알 필요가없는 변수의 유형입니다. 예를 들어 사용자 입력이나 타사 라이브러리에서 값을 가져올 수 있습니다.
  • 객체 : 이것은 원시 유형이 아닌 모든 것을 나타내는 유형입니다. TypeScript의 객체 지향 특성에 필수적입니다.

변수에 유형을 명시 적으로 할당하는 방법에는 두 가지가 있습니다. 첫 번째는 꺾쇠 괄호 구문입니다.

let someValue : any;

let strLength : number = (someValue) .length;

두 번째는 as구문입니다.

let someValue : any = "이것은 문자열입니다";

let strLength : number = (someValue as string) .length;

TypeScript 문서에서 가져온 이러한 코드 조각은 기능적으로 동일합니다. 두 정의 someValue유형의 변수로 any하고 할당 "this is a string"한 후 정의의 값으로 strLength그 값의 내용의 길이와 숫자와 할당으로 someValue.

TypeScript 유형은 추론을 통해 설정할 수도 있습니다. 즉, x의 유형을 설정하지 않고 x 값을 7로 설정하면 컴파일러는 x가 숫자 여야한다고 가정합니다. 어떤 상황에서는 컴파일러가 any유형을 추론 할 수 있지만 컴파일 플래그를 사용하여 그렇지 않은지 확인할 수 있습니다.

TypeScript 유형 시스템은 매우 풍부하며이 기사의 범위를 벗어납니다. 많은 고급 및 유틸리티 유형이 있습니다. 여기에는 변수가 여러 지정된 유형 중 하나가되도록 설정할 수있는 공용체 유형과 기존 유형을 기반으로 생성 할 수있는 유형 인 매핑 된 유형이 포함됩니다. 방법. 예를 들어, 숫자 나 부울 중 하나가 되길 원하는 변수에 대한 공용체 유형을 만들 수 있지만 문자열이나 그 밖의 것은 아닙니다. 또는 배열의 모든 요소를 ​​읽기 전용으로 설정하는 매핑 된 유형을 만들 수 있습니다.

TypeScript 인터페이스

대부분의 객체 지향 언어와 마찬가지로 TypeScript에는 사용자가 자신의 유형을 정의 할 수있는 인터페이스가 있습니다. 인터페이스는 해당 속성과 관련된 유형과 함께 개체의 속성을 설정합니다. TypeScript 인터페이스는 선택적 속성을 가질 수 있습니다. 구문에 대한 자세한 내용은 TypeScript 문서를 확인하세요.  

TypeScript 제네릭

TypeScript는 또한 Java 및 C #과 같은 객체 지향 언어와 제네릭 개념을 공유합니다 . (C ++의 동등한 기능을 템플릿 이라고합니다 .) TypeScript에서 일반 구성 요소는 코드에서 해당 구성 요소가 호출되는 위치에 따라 하나가 아닌 다양한 유형에 대해 작동 할 수 있습니다. 다음은 TypeScript 문서의 매우 간단한 예입니다. 먼저 인수를받은 다음 즉시 반환하는 다음 함수를 고려하십시오.

function identity (arg : any) : any {

    return arg;

}

함수는 any유형 으로 정의되기 때문에 던지기로 선택한 유형의 인수를 허용합니다. 그러나 반환되는 것은 any유형입니다. 다음은 제네릭을 사용하는 함수 버전입니다.

함수 식별 (인수 : T) : T {

    return arg;

}

이 코드에는 들어오는 인수의 유형을 캡처하고 나중에 사용할 수 있도록 저장 하는 유형 변수가 포함되어 T있습니다.

대기업 프로젝트에서 코드 재사용을 가능하게하는 열쇠 인 제네릭에는 훨씬 더 많은 것이 있습니다. 자세한 내용은 TypeScript 문서를 확인하세요.

TypeScript 클래스 

객체 지향 프로그래밍에서 클래스는 기능을 상속하고 차례로 객체의 구성 블록 역할을합니다. JavaScript는 전통적으로 클래스를 사용하지 않고 대신 함수와 프로토 타입 기반 상속에 의존했지만이 개념은 표준의 ECMAScript 2015 버전의 일부로 언어에 추가되었습니다. 클래스는 이미 TypeScript의 일부였으며 이제 TypeScript는 JavaScript와 동일한 구문을 사용합니다. TypeScript 컴파일러의 장점 중 하나는 JavaScript 클래스가있는 코드를 2015 년 이전 표준을 준수하는 레거시 JavaScript 코드로 변환 할 수 있다는 것입니다.

TypeScript 날짜

TypeScript에서 날짜와 시간을 가져오고 설정하는 데 사용할 수있는 메서드와 개체는 대부분 JavaScript에서 상속됩니다. JavaTPoint에는 이것이 어떻게 작동하는지에 대한 좋은 요약이 있습니다.

TypeScript 튜토리얼 

더 깊이 들어갈 준비가 되셨나요? 다음 TypeScript 자습서를 통해 속도를 높이십시오.

  • TypeScript는 아직 설치하지 않았다면 5 분 안에 TypeScript를 설치하는 과정을 안내합니다.
  • 이 Visual Studio Code 자습서는 IDE가 실제로 TypeScript 개발 생산성에 추가하는 방법을 보여줍니다.
  • 초보자를위한 TypeScript Tutorial : The Missing Guide는 JavaScript 경험이 상당히 제한적인 경우에도 유용 할 수있는 매우 철저한 소개입니다.

React와 함께 TypeScript를 사용하는 방법, Facebook에서 개발 한 UI를 빌드하기위한 JavaScript 라이브러리를 배우고 싶다면 Ross Bulat의 React 및 Redux에서 TypeScript를 사용하는 방법과 TypeScript 문서의 React 및 webpack에 대한 섹션을 확인하세요. 즐거운 학습 되세요!