TypeScript의 완전한 초보자 개요 및 설정

TypeScript의 완전한 초보자 개요 및 설정

반응형

이 문서에서는 로컬 환경의 TypeScript 개요 및 설정에 대해 알아보겠습니다.

타이프스크립트

이 언어는 자바스크립트라고도 하는 일부 추가 기능을 추가하여 자바스크립트에 빌드되는 오픈 소스 언어입니다.

이를 자바스크립트 + 일부 다른 기능(정적 유형이 주된 이유)이라고도 합니다.

TypeScript는 어떻게 다릅니까?

TypeScript에는 다음과 같은 다양한 유형의 이점이 있습니다.

정적 유형이 있는 자바스크립트에 추가 기능을 제공합니다.

유형 사용은 완전히 선택 사항입니다.

일반 자바스크립트로 컴파일합니다.

프런트 엔드 자바스크립트 및 노드가 포함된 백엔드에도 사용할 수 있습니다.JS.

ES6, ES7(Classes, Arrow Functions 등)의 대부분의 기능을 포함합니다.

타사 라이브러리의 유형은 유형 정의와 함께 추가할 수 있습니다.

바닐라 타입스크립트가 제공할 수 있는 기본적인 타입스크립트 이점입니다.

프로그래밍 언어의 유형

프로그래밍에는 두 가지 프로그래밍 언어가 있습니다.

동적 입력 언어

정적 입력 언어

동적 입력 언어

여기서 유형은 실행 시간 값과 연관되어 있으며 코드에 명시적으로 이름이 지정되지 않습니다.

동적 입력 언어의 예: - 자바스크립트, 파이썬, 루비, PHP

정적 입력 언어

여기서 유형은 변수, 함수, 매개 변수, 반환 값 등에 명시적으로 할당됩니다.

정적으로 입력된 언어의 예: Java, C, C++, Rust, Go.

그러나 일반 자바스크립트 대신 TypeScript를 사용할 경우의 장단점

그래서 일반 자바스크립트 대신 타입스크립트를 사용하는 것에 대한 찬반 의견이 많다.

프로는 아래와 같다.

일반 자바스크립트보다 더 강력하다.

쉽게 벌레를 발견하기

예측 가능성

가독성

인기

좋은 것이 올 때마다 나쁜 점도 함께 온다.

단점은 다음과 같다.

기록할 추가 코드.

자세한 내용

필수 컴필레이션

True 정적 유형이 아님(일부 프로그래머에 따르면)

TypeScript 컴파일 중

TypeScript를 컴파일하는 것은 TypeScript로 작업하는 동안 직면해야 하는 주요 두통 중 하나이며, 아래는 TypeScript로 작업하는 동안 유용하다고 생각될 수 있는 이점입니다.

TypeScript는 .ts 및 .tsx 확장자를 사용합니다.

TSC(TypeScript Compiler )는 .ts 또는 .tsx 파일을 .js로 컴파일하는 데 사용됩니다.

TSC는 컴파일 타임에 파일을 감시하고 오류를 보고할 수 있다.

기본적으로 .ts 컴파일이 포함될 수 있습니다.

대부분의 IDE는 TypeScript를 크게 지원합니다.

tsconfig.json은 TypeScript의 작동 방식을 구성하는 데 사용됩니다.

따라서 실제 자바스크립트를 코드 다운합니다(슬라이드가 아닌 실제 코드 ).

TypeScript를 설치하자

Windows에 있으므로 TypeScript가 모든 프로젝트에 필요하므로 전체적으로 설치하겠습니다.

이 명령을 실행해 봅시다.

Windows => npm i --글로벌 유형 스크립트

Mac OS => sudo npm i --글로벌 유형 스크립트

Linux의 Mac OS와 동일한 명령을 사용할 수도 있습니다. 또한 Linux에서 어떤 명령을 사용할지 잘 모르겠습니다.

TypeScript를 성공적으로 설치한 후 이 명령을 실행하여 성공적으로 설치되었는지 여부를 확인할 수 있습니다.

tsc -v

출력은 2021년 9월 10일 현재 버전 4.4.2와 같아야 한다.

이것이 로컬 환경을 위한 TypeScript의 기본 설정입니다.

이제 자바스크립트를 쓰자 + Type Safety I typeScript

설치가 성공한 후 새 디렉토리 작성 유형 학습(원하는 대로 이름 지정)

그런 다음 새 파일 이름은 과 같아야 합니다..ts ( desedName 대신 원하는 이름을 입력합니다.여기)

여기에 일반적인 자바스크립트를 = 5로 써 봅시다;

그런 다음 터미널을 가동하고 이 명령을 입력하여 일반 자바스크립트를 일반 자바스크립트로 변환할 수 있습니다(현재로서는 ).

tsc filename.ts(파일 형식은 필수 사항이 아닙니다.)

기본적으로 .ts 형식의 파일 형식으로 사용 가능한 코드를 일반 JavaScript에서 ES5로 컴파일합니다(기본 설정).

이제 파일 이름 지정에서 컴파일된 자바스크립트 코드를 .js 확장자로 확인할 수 있습니다.

여기서 TypeScript가 기본적으로 설정된 코드를 ES5로 컴파일하고, 렛 및 화살표 기능이 ES6과 함께 릴리스되었기 때문에 (현재로서는) 이 사용되지 않음을 알 수 있습니다.

당신은 또한 이 타입스크립트 컴파일러를 만들어서 이 코드를 보고 우리가 정규 자바스크립트에 적어놓은 타입스크립트 코드를 컴파일할 수 있다.

이 명령을 눌러 이 작업을 수행할 수 있습니다.

tsc -- ts를 확인합니다.

이제 TypeScript 코드를 ES6 자바스크립트로 변환해 보겠습니다.

tsconfig.json 설정 중

TypeScript를 설정하고 TypeScript 코드가 Typescript 코드를 Regular JavaScript로 컴파일하는 방법을 편집해 봅시다.

설정하려면 먼저 터미널에서 이 명령을 눌러야 합니다.

tsc --init

이렇게 하면 기본적으로 tsconfig.json 파일이 생성되고 TypeScript에서 사용할 수 있는 설정이 허용되며 TypeScript는 이 파일에서만 작동합니다.

이제 Tsconfig.json을 열고 대상이 어디에 기록되었는지 확인합니다(기본적으로 7호선에서 찾을 수 있습니다).

원하는 경우 대상을 ES6으로 변경합니다.

따라서 기본 설정에서 컴파일된 일반 자바스크립트를 다른 디렉토리로, TypeScript 파일을 다른 디렉토리로 찾으려고 합니다.

따라서 outDir 설정을 변경할 것입니다(17번 라인에서 확인할 수 있습니다.

및 설정을 ./dist로 변경합니다.

또한 그 후에 새 줄을 추가하고 rootDir로 만들고 값을 ./src로 설정합니다.

루트 디렉토리는 기본적으로 소스 유형스크립트 파일을 가져오기 위한 것입니다.

이제 t=이전 TypeScript 파일을 Src로 명명된 디렉토리 내부로 이동합니다. 여기서 TypeScript 컴파일러는 TypeScript 파일을 찾습니다.

이제 TypeScript 파일을 컴파일하지만 이번에는 특정 파일을 지정하지 않고 모두 컴파일합니다.

터미널에서 이 명령 실행

tsc --시계

이 명령은 기본적으로 SRC 디렉토리 내의 모든 파일을 감시하고 TypeScript 파일로 판명될 경우 일반 자바스크립트로 변환합니다.

파일만 컴파일하고 더 이상의 변경 사항을 감시하지 않는 tsc를 실행할 수도 있습니다.

결론

현재로서는 바닐라 타입스크립트를 위한 기본 설정(내 멘토 Sid )이었고, 이것은 완전한 초보자를 위한 타입스크립트의 기본 파일 구조였습니다.

이제 TypeScript에 대해 좀 더 자세히 알아보겠지만 이것은 다른 조항입니다.

그때까지는 이 플랫폼에서 개발 로그 작성만 수행하겠습니다.

BTW 당신은 나의 공식 블로그 플랫폼 코드다운에 가입할 수 있고 당신 자신을 구독할 수 있다. 내가 좋은 기사를 받을 때마다 나는 개인적으로 그것에 대해 스팸 메일 없이 당신에게 이메일을 보낼 것이다.

from http://it-ground.tistory.com/249 by ccl(A) rewrite - 2021-09-27 02:00:29