당신은 자바 스크립트를 통해 타이프 스크립트를 선택해야하는 이유

타이프 스크립트는 지난 몇 년 동안 그 인기가 증가하고있다. 그것은 2020 년에 가장 유망한 5 개 언어 중 언급되었습니다. 각도,가장 큰 프론트 엔드 프레임 워크 중 하나는 타이프 스크립트를 사용하고 있습니다. 약 60%의 프로그래머가 이미 타이프 스크립트를 사용하고 있으며 22%는 시도하기를 원합니다. 왜?

역사적으로,자바 스크립트는 인터넷에서 웹 페이지와 응용 프로그램을 스크립팅하기위한 주요 언어로 끝났다. 이 프론트 엔드와 노드와 같은 프레임 워크와 백엔드 모두에서 자바 스크립트를 사용하는 것이 가능하다.제와 데노.

하지만 자바스크립트는 현대 웹에서와 같이 크고 복잡한 시스템을 만들기 위해 만들어졌는가? 아니

이 글에서,우리는 타이프 스크립트–-에 대한 솔루션을 소개하고 자바 스크립트 코드에 유형을 추가하는 경로를 향해 시작합니다.

여기에 우리가 다룰 것입니다 포인트 중 일부입니다:

• 타이프 스크립트 란 무엇입니까?
• 유형이란 무엇이며 어떻게 작동합니까?
• 자바스크립트와 타이프스크립트: 어느 하나를 선택?
• 타이프 스크립트로 시작하는 방법.
• 타이프 스크립트 연구를위한 추가 자료.

타이프스크립트란?

즉,타이프 스크립트는 옵션 입력을 가지고 있으며,일반 자바 스크립트로 컴파일 자바 스크립트의 상위 집합입니다.

간단히 말해서,타이프 스크립트는 기술적으로 정적 타이핑이있는 자바 스크립트입니다.

자,자바 스크립트에 정적 입력을 추가하는 이유는 무엇입니까?

나는 적어도 세 가지를 나열 할 수 있습니다:

• 클래식'undefined' is not a function.
• 과 같이 훌륭하게 숨겨진 닌자 오류를 피할 수 있습니다.
• 복잡하고 대규모의 시스템을 지향하는 것은 더 이상 악몽이 아니다.

실제로 한 연구에 따르면 모든 자바 스크립트 버그의 15%가 타이프 스크립트로 감지 될 수 있습니다.

동적 타이핑의 자유는 종종 프로그래머의 작업의 효율성을 떨어 뜨릴뿐만 아니라 새로운 코드 라인을 추가하는 비용이 증가함에 따라 개발을 중단시킬 수있는 버그로 이어집니다.

따라서 자바 스크립트가 유형 및 컴파일 타임 오류 검사와 같은 것들을 통합하지 못하면 기업 및 대형 코드베이스의 서버 측 코드에 나쁜 선택이됩니다. 자신의 태그 라인이 말한대로,타이프 스크립트는 확장 자바 스크립트입니다.

타이프스크립트를 사용하려면 무엇을 배워야 하나요?

타이프 스크립트는 본질적으로 제이 린터입니다. 또는 컴파일러가 이해할 수있는 문서가 있습니다.

따라서,커피 스크립트(구문 설탕을 추가)또는 퓨어 스크립트(전혀 자바 스크립트처럼 보이지 않는)와 같은 다른 언어와는 달리,당신은 타이프 스크립트 코드를 작성하기 시작하는 많은 것을 배울 필요가 없습니다.

당신이 당신의 초기 파일에 입력 오류가있는 경우 컴파일러가 불평하는 동안,그것은 당신이 전에했던 것처럼 작동하는 자바 스크립트 파일을 다시 제공 않습니다. 당신이 어디에 있든,타이프 스크립트가 당신을 만날 것입니다,그리고 점차적으로 당신의 능력을 구축하기 쉽습니다.

타이프 스크립트가 프론트 엔드 또는 백엔드에 사용됩니까?

타이프 스크립트는 자바 스크립트로 컴파일됩니다. 이것은 수학적으로 정확한 유형 계층구조인,강력한 타입을 정의합니다.

자바스크립트는 앱과 웹 페이지의 프론트 엔드에 대한 스크립팅을 구현하는 데 가장 많이 사용되는 언어입니다. 따라서,타이프 스크립트는 매우 동일한 목적을 위해 사용될 수 있지만,서버 측 복잡한 엔터프라이즈 프로젝트에 빛난다.

세로켈에서는 대부분의 웹 프론트엔드가 타이프스크립트로 구현되어 있습니다.

유형은 무엇이며 어떻게 작동합니까?

유형에 대한 간략한 소개

형식은 코드를 통해 데이터를 어떻게 사용할지 설명함으로써 프로그램을 실행하기 전에 올바른 프로그램을 올바르지 않은 프로그램에서 알 수 있는 방법입니다. 숫자 및 문자열과 같은 간단한 유형에서 문제 도메인을 위해 완벽하게 모델링 된 복잡한 구조에 이르기까지 다양 할 수 있습니다.

프로그래밍 언어는 정적으로 입력되거나 동적으로 입력되는 두 가지 범주로 나뉩니다.

정적 타이핑이 있는 언어에서 변수의 형식은 컴파일 타임에 알려야 합니다. 변수를 선언하면 컴파일러가 숫자,문자열 또는 부울 인 경우 변수를 알 수 있어야합니다(또는 추론 가능). 자바를 생각하십시오.

동적 타이핑을 사용하는 언어에서 반드시 그런 것은 아닙니다. 변수의 형식은 프로그램을 실행할 때만 알 수 있습니다. 파이썬을 생각해보십시오.

타이프 스크립트는 정적 타이핑을 지원할 수 있지만 자바 스크립트는 지원하지 않습니다.

타이프 스크립트의 정적 타이핑으로 인해 더 열심히 노력해야합니다:

• 정의되지 않은 변수 소개(컴파일 타임 경고 도움말)
• 숫자가 있는 문자열 두 개 합계(예:”4″ + “20” = “420”)
• 숫자를 트리밍하는 것과 같이 허용하지 않는 작업을 수행합니다.

정적 유형 시스템을 사용하면 고유 한 복합 유형을 만들 수 있습니다. 이를 통해 엔지니어는 자신의 의도를 더 자세히 표현할 수 있습니다.

명시적 형식도 코드를 자체 문서화합니다: 그들은 당신의 변수와 함수가 의도 한 것과 일치하는지 확인하고 컴퓨터가 주변 컨텍스트를 기억하는 것을 처리 할 수 있도록합니다.

타이프 스크립트의 종류

타이프 스크립트에는 부울,숫자,문자열,배열,튜플 등과 같은 다양한 기본 유형이 있습니다. 당신은 타이프 스크립트의 문서에서 그들에 대해 자세히 알아볼 수 있습니다.

그 외에도,여기에 우리가 티에스의 표현력을 보여주기 위해 기능 할 몇 가지 다른 유형이 있습니다:

모든&알 수 없음

유형으로 어떤 커버 할 수 있지만,잘,당신이 원하는 것을,알 수없는 그것의 유형 안전 대응이다.

당신이 유형 시스템을 이스케이프 할 때마다,어떤은 당신이 그것에 자바 스크립트 변수를 할당 할 수 있습니다. 예를 들어,아직 확인되지 않았고 유형을 알 수 없는 들어오는 변수를 모델링하는 데 자주 사용됩니다.

알 수 없는 것은 다른 것과 비슷하지만 명시적으로 타입 체크되기 전에 변수에 대한 작업을 수행할 수는 없습니다.

무효

예를 들어 아무 것도 반환하지 않는 함수의 반환 유형으로 반환되는 값이 없는 경우 무효가 사용됩니다.

절대

예외를 발생시키는 함수와 같이 절대로 발생해서는 안되는 것에 대한 반환 유형은 절대 없습니다.

교차로&조합 유형

이를 통해 논리에 더 잘 맞는 사용자 지정 유형을 만들 수 있습니다.

교차 유형을 사용하면 여러 기본 유형을 한 유형으로 통합할 수 있습니다. 예를 들어name: string과phone_number: number이 있는 사용자 지정 유형 사용자를 만들 수 있습니다. 그것은 말하는 것과 동등하다:나는 나의 유형이 이것과 저것인 원한다.

유니온 유형을 사용하면 유형이 여러 기본 유형 중 하나를 사용할 수 있습니다. 예를 들어result: string또는undefined를 반환하는 쿼리가 있을 수 있습니다. 그것은 말하는 것과 동등하다:나는 나의 유형이 이것 또는 저것인 원한다.

유형을 공백으로 생각하면 이러한 모든 유형이 빠르게 이해됩니다.

타이프 스크립트의 유형은 암시 적 및 명시 적 모두 일 수 있습니다. 형식을 명시적으로 작성하지 않으면 컴파일러는 형식 유추를 사용하여 사용 중인 형식을 추론합니다.

그러나 명시 적으로 작성하면 코드를 읽는 다른 개발자를 돕고 컴파일러가 보는 것을 확인하는 등의 이점을 얻을 수 있습니다.

타이프 스크립트 대 자바 스크립트

그것은 실용적 지불. 이 그래프를 보세요:

(출처)

이것의 상당한 원인은 마이크로 소프트(그것을 만든)와 구글과 같은 회사의 타이프 스크립트의 지원이지만,그것은 좋은 이유로 지원됩니다.

자바스크립트를 통해 타이프스크립트를 선택해야 하는 3 가지 이유

1. 타이프 스크립트가 더 신뢰할 수 있습니다

자바스크립트와 달리 타이프스크립트 코드는 더 안정적이고 리팩터링하기가 더 쉽습니다. 이를 통해 개발자는 오류를 피하고 재 작성을 훨씬 쉽게 할 수 있습니다.

유형은 자바 스크립트 코드베이스에 몰래 들어갈 수있는 대부분의 어리석은 오류를 무효화하고 새로운 코드 및 리팩토링을 작성할 때 모든 작은 실수를 수정하는 빠른 피드백 루프를 만듭니다.

2. 타이프 스크립트는 더 명시 적

유형을 명시 적으로 만드는 것은 우리 시스템이 정확히 어떻게 구축되고 그 부분이 서로 어떻게 상호 작용하는지에 대한 관심을 집중시킵니다. 대규모 시스템에서는 컨텍스트를 염두에두고 나머지 시스템을 추상화 할 수 있어야합니다. 유형은 우리가 그렇게 할 수있게 해줍니다.

3. 타이프 스크립트와 자바 스크립트는 실질적으로 상호 교환 할 수 있습니다,그래서 왜?

자바 스크립트는 타이프 스크립트의 하위 집합이기 때문에,당신은 당신이 당신의 타이프 스크립트 코드에서 원하는 모든 자바 스크립트 라이브러리와 코드를 사용할 수 있습니다.

가장 인기 있는 자바스크립트 라이브러리는 2020 년에 유형이 있습니다.

이것은 자바 스크립트 코드베이스에서 타이프 스크립트를 점차적으로 채택 할 수 있다는 것을 의미하며,먼저 개별 모듈에 유형을 추가 한 다음 알려진 우주를 소비하도록 확장 할 수 있습니다.

타이프 스크립트의 단점

당신은 자바 스크립트 팀 또는 자바 스크립트 저장소를 즉시 관용적 타이프 스크립트로 전환 할 수 없습니다. 장단점이 있으며 선행 시간 희생이 필요합니다.

우리는 유형에 대해 명시 적으로 장기적으로 당신에게 줄 저축에 대해 논쟁 할 수 있지만,단기적으로는 그것들을 추가하는 데 더 많은 시간이 걸립니다. 이 틀림없이 큰 문제가되지 않습니다,하지만 자바 스크립트에 찬성 인수.

따라서,당신은 당신의 자신의 사용을위한 작은 프로젝트 및 프로토 타입에 대한 타이프 스크립트를 선택하지 않을 수 있습니다.

테스트 대 유형

간단히 유형 대 테스트의 토론을 터치하려면:이 두 가지 버그의 다른 클래스를 잡아,그래서 무소속 같은 방식으로 모두 할 의미가 있습니다.

정적 형식 시스템의 이점을 유지하면서 단위 테스트와 속성 기반 테스트와 같은 고급 기술을 모두 사용할 수 있습니다.

요약하면 두 언어를 빠르게 비교할 수 있습니다:

타이프 스크립트	자바 스크립트
객체 지향 스크립팅 언어:객체 지향 스크립팅 언어:객체 지향 스크립팅 언어:객체 지향 스크립팅 언어:객체 지향 스크립팅 언어:객체 지향 스크립팅 언어
종속 언어(자바 스크립트로 컴파일)	독립 언어(해석 및 실행 가능)
컴파일된 언어,브라우저에서 직접 실행할 수 없음	웹 브라우저에서 직접 실행되는 해석된 언어
정적으로 입력 할 수 있습니다	동적으로 입력
더 나은 구조화되고 간결한	유형 시스템에 의해 제한되지 않으므로 더 유연합니다.
있다.이 매개 변수는 다음과 같습니다.확장
마이크로소프트에서 만든	브렌든 아이치(넷스케이프)에 의해 만들어진 및 유럽 컴퓨터 제조 업체 협회)에 의해 유지 관리.
복잡한 프로젝트를위한 공정한 선택	작고 간단한 프로젝트로 작업하기에 좋습니다.

타이프 스크립트 퀵 스타트 가이드

타이프 스크립트 컴파일러

(타이프 스크립트 컴파일러에 대한 짧은)tsc를 설치해야합니다. 그것을 할 수있는 가장 쉬운 방법은 터미널을 통해입니다. 이 작업은 다음 명령을 사용하여npm를 통해 쉽게 수행 할 수 있습니다:

npm install -g typescript

비주얼 스튜디오 코드와 함께 타이프라이터를 사용하려면 웹 사이트에 편리한 가이드가 있습니다.

tsc를 설치한 후tsc filename.ts을 사용하여 파일을 컴파일할 수 있습니다.

자바스크립트에서 타이프스크립트로 파일 마이그레이션

이상한 동작으로 인해 다음과 같은 자바스크립트 파일을 타이프스크립트로 변경하고 싶다고 가정해 보겠습니다:

function my_sum(a, b) { return a + b; }let a = 4; let b = "5";my_sum(a, b);

좋은 소식. 모든 파일은 기술적으로 유효한 타이프 스크립트 파일입니다,그래서 당신은 좋은 시작까지있어-단지에 파일 확장자를 전환합니다.에서 성전환.제이에스

타이프라이터에는 타입 추론이 있는데,이는 사용자가 추가하지 않고도 사용하는 일부 타입을 자동으로 추론 할 수 있음을 의미합니다. 이 경우,함수가 어떤 유형의 두 변수를 합산한다고 가정합니다.이 변수는 사실이지만 지금은 그다지 유용하지 않습니다.

숫자 만 합산하려면my_sum에 유형 서명을 추가하여 숫자 만 허용 할 수 있습니다.

function my_sum(a: number, b: number) { return a + b; }let a = 4; let b = "5";my_sum(a, b);

이제 타이프 스크립트는 우리에게 오류를 제공합니다.

Argument of type 'string' is not assignable to parameter of type 'number'.

오류가 어디 좋은 것은 우리가 발견. :)이와 같은 오류를 추가로 이스케이프하기 위해 변수에 유형 정의를 추가 할 수도 있습니다.

let b: number = "5" // Type '"5"' is not assignable to type 'number'.let b: number = 5 // Everything ok. 

타이프 스크립트는 무엇을 할 수 있고 어떻게 당신을 도울 수 있는지에 매우 유연합니다. 기존 자바스크립트 코드베이스를 타이프스크립트로 이동하거나 타이프스크립트를 사용하여 타이프스크립트를 개선하는 방법에 대한 간단한 예는 이 가이드를 참조하십시오.

브라우저에서 타이프 스크립트를 사용하는 방법?

브라우저에서 타이프스크립트를 실행하려면 타이프스크립트 컴파일러를 사용하여 자바스크립트로 전송해야 합니다. 이 경우tsc는 새로 만듭니다.에 따라 파일.자바 스크립트 파일을 사용할 수있는 모든 방법을 사용할 수있는 코드.

추가 학습을 위한 자료

타이프 스크립트 딥 다이브

이 무료 웹 자원은 우리가 이미 여기에 덮여 한 섹션에 대한 자세한 설명을 포함하여,타이프 스크립트로 시작하는 데 필요한 모든 것을 갖추고 있습니다.

처음부터 타이프 스크립트를 배우십시오!

타이프스크립트의 모든 기본 기능,이를 사용하여 자바스크립트를 작성하는 방법 및 타이프스크립트의 힘을 사용하는 방법을 학습합니다.

연습

연습은 새로운 프로그래밍 언어로 코드 작성을 연습 할 수있는 최고의 리소스입니다. 관용적 인 코드로 당신을 조종 할 멘토,많은 재미있는 연습 작업–이 웹 사이트에 대해 사랑하지 않는 것은 없습니다.

결론

전반적으로,타이프 스크립트는 당신이 그것의 전체 용량을 사용하지 않는 경우에도 도구 세트에있는 훌륭한 도구입니다. 그것은 학습과 당신이 가서 새로운 기능을 추가,작은 시작하고 천천히 성장하기 쉽다. 타이프 스크립트는 실용적이고 초보자를 환영하므로 두려워 할 필요가 없습니다.

이 기사가 타이프 스크립트 여행에 유용하기를 바랍니다. 당신이 도움을 원하거나 몇 가지 질문이있는 경우,트위터 나 페이스 북과 같은 우리의 소셜 미디어를 요청해야합니다..