TypeScript 튜토리얼: 인터페이스, 열거형, 배열이란 무엇인가

⚡ 스마트 요약

TypeScript 는 강력한 타입이 지정된 의 상위 집합입니다. Java일반 코드로 컴파일되는 스크립트 Java이 스크립트는 클래스, 인터페이스, 열거형, 모듈 및 네임스페이스를 추가합니다. 이 문서에서는 설치, 변수, 데이터 유형, 배열, 클래스, 접근 제어자, 인터페이스, 함수, 열거형, 모듈 및 주변 선언에 대해 다룹니다.

🧬 언어 관계: 모든 유효한 Java스크립트 프로그램이 유효합니다 TypeScript그리고 컴파일러는 일반 코드를 출력합니다. Java모든 대상 버전에 대한 스크립트입니다.
🔒 정적 유형ping: 변수는 선언 시 지정된 형식을 유지하므로 형식 불일치는 런타임이 아닌 컴파일 타임에 보고됩니다.
🧱 객체 지향: 클래스, 상속, 그리고 public, private, protected 접근 제한자는 브라우저 코드에 친숙한 구조를 제공합니다.
📐 인터페이스 : 인터페이스는 con을 정의합니다.trac변수, 함수 또는 클래스가 충족해야 하는 속성 및 메서드의 목록입니다.
🔢 열거형: 명명된 상수 집합은 자체 호출 함수로 컴파일됩니다. Java스크립트에는 기본 열거형 유형이 없습니다.
📦 모듈 : 내보내기 및 가져오기 기능은 선언을 파일 내에 로컬로 유지하고 전역 이름 충돌을 방지합니다.
🔌 환경 관련 선언: .d.ts 파일은 제3자를 설명합니다. Java스크립트 라이브러리를 사용하면 코드를 다시 작성하지 않고도 타입 검사가 적용됩니다.

TypeScript?

TypeScript 의 상위 집합입니다 Java스크립트. TypeScript 클래스, 인터페이스 등을 지원하는 객체 지향 프로그래밍 언어입니다. 오픈 소스 언어이며, 개발자는 다음과 같습니다. Microsoft 코드를 정적으로 컴파일하여 Java스크립트입니다. 브라우저나 Nodejs에서 쉽게 실행할 수 있습니다.

ECMAScript용으로 출시된 모든 최신 기능은 다음에서 지원됩니다. TypeScript그리고 그 외에도 TypeScript 인터페이스, 주변 선언, 클래스 상속과 같은 객체 지향 기능을 가지고 있어 개발에 도움이 됩니다.ping 그렇지 않으면 구축하기 어려운 대규모 애플리케이션 JavaScript.

관계는 일방향적입니다. 모든 유효한 Java스크립트 파일이 이미 유효합니다. TypeScript하지만 그 역은 성립하지 않습니다. 왜냐하면 타입 어노테이션은 오직 에만 존재하기 때문입니다. TypeScript 컴파일 과정에서 삭제됩니다.

왜 사용 TypeScript?

사용함으로써 얻을 수 있는 중요한 이점은 다음과 같습니다. TypeScript:

규모가 크고 복잡한 프로젝트 Java스크립트는 코딩하고 유지 관리하기 어렵습니다.
TypeScript 코드 정리에 큰 도움이 되며, 런타임 오류가 아닌 컴파일 중에 대부분의 오류를 제거합니다.
TypeScript JS 라이브러리와 API 문서를 지원합니다.
이 언어는 타입 지정이 선택적인 스크립팅 언어이므로 타입은 점진적으로 도입할 수 있습니다.
TypeScript 코드는 일반 코드로 변환될 수 있습니다. Java모든 브라우저를 대상으로 하는 스크립트 코드입니다.
더 나은 코드 구조화와 객체 지향 프로그래밍 기법을 제공합니다.
이를 통해 자동 완성 및 안전한 리팩토링을 포함한 개발 시간 단축 도구 지원이 가능해집니다.
이 기능은 데코레이터와 같은 기능을 통해 표준을 넘어 언어를 확장할 수 있습니다.

실질적인 가장 큰 이점은 에디터 지원입니다. 컴파일러가 모든 값의 형태를 알고 있기 때문에 에디터는 프로젝트 전체에서 속성 이름을 변경하고 더 이상 일치하지 않는 모든 위치를 보고할 수 있습니다.

TypeScript 연혁

역사 속 중요한 이정표들을 살펴보겠습니다. TypeScript:

XNUMX년간의 내부 개발 끝에 Microsoft, TypeScript 0.9 버전은 2013년에 출시되었습니다.
TypeScript 제네릭에 대한 추가 지원이 포함된 1.0 버전이 Build 2014에서 출시되었습니다.
2014년 XNUMX월에는 새로운 TypeScript 컴파일러가 도착했는데, 이전 버전보다 5배나 빨랐습니다.
2015년 7월, ES6 모듈, 네임스페이스 키워드, for…of 및 데코레이터에 대한 지원이 추가되었습니다.
2016년 11월에는 매핑된 유형, 키 및 조회 유형, 객체의 나머지 부분 및 스프레드 형식이 추가되었습니다.
2018년 3월 27일, 조건부 타입과 교집합 타입을 지원하는 개선된 keyof 함수가 추가되었습니다.
TypeScript 2023년 3월에 출시된 5.0 버전은 데코레이터를 현대화하고 패키지 크기를 줄였습니다.
TypeScript 6.0 버전은 2026년 3월에 출시되었으며, 이는 이전 버전을 기반으로 한 최종 릴리스입니다. Java스크립트 코드베이스.
TypeScript 7.0 버전에서는 컴파일러가 네이티브 Go 구현으로 변경되었습니다. Microsoft 보고서에 따르면 속도는 6.0 버전보다 약 10배 빠릅니다.

누가 사용 TypeScript?

TypeScript 더 이상 틈새 시장의 선택이 아닙니다. 가장 널리 사용되는 여러 프런트엔드 및 백엔드 도구의 기반이 되며, 아래 목록은 초보자가 이를 가장 많이 접하게 될 곳을 보여줍니다.

모난: Angular 프레임워크는 다음으로 작성되었습니다. TypeScript또한, 응용 프로그램 코드도 해당 형식으로 작성되어야 합니다.
React 및 Vue 프로젝트: 두 생태계 모두 공식 서비스를 제공합니다. TypeScript 템플릿의 경우, 대부분의 최신 스타터 프로젝트는 기본적으로 이 기능을 활성화합니다.
Node.js 백엔드: NestJS와 같은 서버 프레임워크는 다음과 같은 것들을 기반으로 구축됩니다. TypeScript 수업 및 장식가.
편집기 도구: Visual Studio Code 그 자체로 큰 것입니다 TypeScript 코드베이스가 그렇기 때문에 언어 지원이 매우 완벽합니다.
대기업용 프런트엔드: 많은 참여자가 있는 팀은 배포 전에 통합 오류를 잡아내기 위해 이 도구를 사용합니다.

다운로드 및 설치 방법 TypeScript

다운로드 및 설치를 위한 단계별 프로세스는 다음과 같습니다. TypeScript:

1단계) Nodejs 다운로드 및 설치

Nodejs 공식 사이트로 이동하세요. https://nodejs.org/en/download/그리고 사용하시는 운영체제에 맞는 Nodejs를 다운로드하여 설치하세요. 자세한 지침은 가이드에서 확인하실 수 있습니다. Node.js를 다운로드하고 설치하는 방법.

2단계) Nodejs 및 npm 버전 확인

Nodejs와 npm이 설치되었는지 확인하려면 명령 프롬프트에서 버전을 확인하세요.

D:\typeproject>node --version
v22.14.0

D:\typeproject>npm --version
10.9.2

현재 Node LTS 릴리스라면 모두 작동합니다. TypeScript 컴파일러를 실행하는 데 필요한 것은 지원되는 Node 버전뿐입니다.

단계 3) TypeScript 설치

아래와 같이 프로젝트 디렉토리(typeproject\)를 생성하고 npm init을 실행하세요.

npm init

4단계) 설치 시작

이렇게 하면 프로젝트의 종속성을 저장할 package.json 파일이 생성됩니다.

완료되면 설치하세요. TypeScript 다음과 같이 :

npm -g install typescript

위의 명령은 설치를 처리합니다 TypeScript. npm install에 "-g"를 추가하면 설치됩니다. TypeScript 전 세계적으로 사용할 수 있습니다. -g 옵션을 사용하면 다음과 같은 이점을 누릴 수 있습니다. TypeScript TSC 전역적으로 설치되므로 어느 디렉토리에서든 명령어를 실행할 수 있습니다. 만약 전역 설치를 원하지 않으시면, TypeScript 전역적으로 사용하려면 아래 명령어를 사용하십시오.

npm install --save-dev typescript

프로젝트 디렉터리에 src\ 폴더를 만들고, src\ 폴더 안에 다음 파일을 생성하세요. TypeScript test.ts 파일을 작성하고 코드를 작성하세요.

예 : test.ts

function add(x:number, y:number) {
	return x+y;
}

let sum = add(5,10);
console.log(sum);

편집하다 TypeScript 코드 Javascript

위 코드를 컴파일하려면 다음 명령어를 사용하십시오.

If TypeScript 전역적으로 설치하려면 아래 명령어를 사용하십시오.

tsc test.ts

If TypeScript 프로젝트에 로컬로 설치하려면 해당 경로를 사용해야 합니다. TypeScript 아래 그림과 같이 node_modules에서 가져오거나 npx를 통해 실행하세요.

node_modules\typescript\bin\tsc test.ts

OR

npx tsc test.ts

위 명령어를 실행하면 컴파일된 코드가 포함된 test.js 파일이 생성됩니다. Java스크립트.

예 : test.js

function add(x, y) {
    return x + y;
}
var sum = add(5, 10);
console.log(sum);

실행하다 Javascript Nodejs를 사용하여

이제 다음과 같이 Nodejs에서 test.js를 실행해 보겠습니다.

D:\typeproject\src>node test.js
15

console.log에 전달된 값은 test.js가 실행될 때 표시됩니다.

실행하다 Java브라우저의 스크립트

예:

<html>
<head></head>
<body>
<script type="text/javascript" src="test.js"></script>
</body>
</html>

편집하다 TypeScript 코드 Javascript EcmaScript 버전 사용

TypeScript 이 브라우저는 출시된 모든 ECMAScript 기능을 지원하며, 개발자는 코딩 시 이러한 기능을 사용할 수 있습니다. 하지만 모든 새로운 기능이 구형 브라우저에서 지원되는 것은 아니므로, 경우에 따라 이전 버전의 ECMAScript로 컴파일해야 할 수도 있습니다. TypeScript 이러한 기능을 수행하는 컴파일러 옵션을 제공합니다.

예 : test.ts

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

선택한 ES 버전으로 컴파일하려면 다음과 같이 명령에 target 또는 t 옵션을 사용할 수 있습니다.

tsc --target ES6  test.ts

OR

tsc -t ES6 test.ts

기본적으로 클래식 컴파일러의 대상은 ES3입니다. 변경하려면 위의 명령어를 사용하면 됩니다.

현재로서는 ES6를 목표로 삼겠습니다.

tsc --target ES6  test.ts

test.ts에서 test.js로

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

사용한 화살표 함수는 ES6 기능이므로 ES6로 컴파일될 때 변경되지 않기 때문에 코드는 그대로 유지됩니다.

기본적으로 대상은 ES3이므로 대상을 지정하지 않으면 test.js 파일은 다음과 같이 생성됩니다.

var addnumbers = function (a, b) {
    return a + b;
};
addnumbers(10, 20);

여기서 굵은 화살표는 일반적인 익명 함수로 변경되었습니다.

💡 팁: 매번 명령줄에서 옵션을 전달하는 대신, 다음 명령을 실행하세요. tsc --init tsconfig.json 파일을 생성합니다. 그런 다음 컴파일러는 해당 파일에서 전체 프로젝트에 대한 대상, 출력 디렉터리 및 엄격도 설정을 읽습니다.

변수 TypeScript

변수 값을 저장하는 데 사용되며 값은 문자열, 숫자, 부울 또는 표현식일 수 있습니다. 변수에 관해서는 TypeScript, 그들은 유사하다 JavaScript그럼 변수를 선언하고 값을 할당하는 방법을 배워봅시다. TypeScript.

변수는 정의되지 않으면 코드에서 사용할 수 없습니다. 변수를 선언하려면 다음을 사용할 수 있습니다.

였다 예어,

하자 키워드는

const를 키워드는

변수 작업 TypeScript 와 유사하다 Java스크립트 및 사용자들은 이에 익숙합니다. Java스크립트는 아주 쉽게 처리할 수 있을 겁니다. 최신 코드에서는 말이죠. 하자 const를 보다 선호됩니다 였다왜냐하면 블록 범위 때문에 특정 유형의 버그를 완전히 방지할 수 있기 때문입니다.

var를 사용하여 변수 선언

구문 :

var firstname = "Roy";

몇 가지 예를 살펴보겠습니다. TypeScript var 키워드의 작동 방식과 이를 사용하여 선언된 변수의 범위를 이해하기 위한 예제입니다. 였다 예어.

예 1 :

var k = 1; // variable k will have a global scope

function test() {
    var c = 1; // variable c is local and accessible only inside function test
    return k++;
}

test(); // output as 1
test(); // output as 2
alert(c); // will throw error, Uncaught ReferenceError: c is not defined

예 2 :

var t = 0; // variable t is declared in global scope
function test() {
    var t = 10; // t is redeclared inside the function, so changes stay local
    return t;
}
test(); // will return 10
console.log(t); // will console 0

예 3 :

var i = 0;
function test() {
    if (i > 0) {
      var t = 1;
    }
    return t;
}

test(); // returns undefined. The if block did not run, yet t is still declared
        // because var declarations are hoisted to the whole function.
i++;    // value of i is incremented
test(); // since i > 0 the if block runs and the value returned is 1

let을 사용하여 변수 선언하기

The TypeScript let의 구문은 다음과 같습니다.

구문 :

let name = "Roy";

의 작업 하자 변수는 거의 동일합니다 였다하지만 한 가지 중요한 차이점이 있는데, 아래 예시에서 이를 확인할 수 있습니다.

예:

let i = 1;
function test() {
    if (i > 0) {
	  let t = 1;
    }
    return t;
}

test(); // throws an error: Cannot find name 't'

위의 TypeScript 이 예제는 오류를 발생시키지만, 동일한 코드는 다른 방법으로 실행하면 정상적으로 작동했을 것입니다. 였다 키워드. 변수를 사용하여 선언합니다. 하자 변수 t는 선언된 블록 내에서만 사용할 수 있습니다. 이 예시에서 t는 if 블록 내에서만 존재하고 함수 전체에서는 사용할 수 없습니다.

함수, for 루프, while 루프, switch 블록 내부에서도 마찬가지입니다. let 변수는 해당 블록 내부에서만 사용할 수 있으며, 블록 외부에서 참조하면 오류가 발생합니다. 이것이 var와 let의 주요 차이점입니다.

const를 사용하여 변수 선언

`const`는 상수 변수를 의미합니다. `let` 변수와 유사하지만, 한 번 값이 할당되면 변경할 수 없다는 점이 다릅니다. 따라서 `const` 선언은 반드시 같은 줄에서 초기화되어야 합니다.

구문 :

const name = "Roy";

예:

const age = "25";
age = "30"; // error: Cannot assign to 'age' because it is a constant

const total; // error: 'const' declarations must be initialized

따라서 할당된 값이 다시 할당되지 않을 것을 알 때는 항상 `const`를 사용하십시오. `const`는 바인딩의 재할당을 방지하는 것이지, 바인딩이 가리키는 객체의 수정을 방지하는 것은 아니라는 점에 유의하십시오.

유형 TypeScript

TypeScript 는 강력한 타입 시스템을 사용하는 언어인 반면, Java스크립트는 그렇지 않습니다. 값이 문자열로 정의된 변수는 아무 문제 없이 숫자로 변경할 수 있습니다. Java대본. 동일한 행위는 용납되지 않습니다. TypeScript. 에 TypeScript변수의 타입은 처음에 정의되며, 실행 과정 내내 해당 타입을 유지해야 합니다. 타입이 변경될 경우 컴파일 오류가 발생합니다. Java스크립트.

기본 유형은 다음과 같습니다.

타입	수락	예시 선언
번호	정수, 부동소수점, 분수	a: number = 10으로 설정하세요.
현	텍스트 값만	let s: string = “hello”;
부울	참 또는 거짓만	b: boolean = true로 설정하세요;
어떤	어떤 값이든, 검사는 적용되지 않습니다.	x: any = 123으로 설정하세요.
무효화	반환값이 없음	함수 f(): void {}

번호

정수, 부동소수점, 소수 및 이와 유사한 숫자 값만 허용합니다.

구문 :

let a :number = 10;
let marks :number = 150;
let price :number = 10.2;

다음은 숫자 유형에 사용할 수 있는 몇 가지 중요한 메서드입니다.

toFixed () - 이 함수는 숫자를 문자열로 변환하고 메서드에 전달된 소수점 이하 자릿수를 유지합니다.

toString () 이 메서드는 숫자를 문자열로 변환합니다.

valueOf () – 이 방법은 숫자의 기본 값을 반환합니다.

to정밀() – 이 방법은 숫자를 지정된 길이로 형식화합니다.

예시: 모든 숫자 계산 방법을 사용하여

let _num :number = 10.345;
_num.toFixed(2);      // "10.35"
_num.valueOf();      // 10.345
_num.toString();     // "10.345"
_num.toPrecision(2); // "10"

끈

문자열: 문자열 값만 허용됩니다.

구문 :

let str :string = "hello world";

다음은 문자열 타입에 사용할 수 있는 몇 가지 중요한 메서드입니다.

분열() – 이 메서드는 문자열을 배열로 분할합니다.
문자() – 이 메서드는 지정된 인덱스의 문자를 반환합니다.
인덱스의() – 이 메서드는 주어진 값의 첫 번째 발생 위치를 반환합니다.
교체() – 이 메서드는 두 개의 문자열을 입력받습니다. 첫 번째 문자열에서 첫 번째 값을 찾고, 있으면 두 번째 값으로 바꾸어 새로운 문자열을 반환합니다.
손질() – 이 메서드는 문자열 양쪽의 공백을 제거합니다.
하위 문자열() – 이 메서드는 시작 위치와 주어진 길이에 따라 문자열의 일부를 반환합니다.
부분 문자열() – 이 메서드는 시작 위치와 끝 위치에 따라 문자열의 일부를 반환합니다. 끝 위치의 문자는 제외됩니다.
대문자로() - 문자열을 대문자로 변환합니다.
소문자로() - 문자열을 소문자로 변환합니다.

예:

let _str:string = "Typescript";

_str.charAt(1);                // y
_str.split("");                // ["T","y","p","e","s","c","r","i","p","t"]
_str.indexOf("s");             // 4, gives -1 if the value does not exist
_str.replace("Type", "Coffee"); // "Coffeescript"
_str.trim();                    // "Typescript"
_str.substr(4, _str.length);   // "script"
_str.substring(4, 10);         // "script"
_str.toUpperCase();             // "TYPESCRIPT"
_str.toLowerCase();             // "typescript"

부울

불리언은 참과 거짓이라는 논리값만 허용합니다. 일반 변수와는 달리 Java스크립트에서 숫자 0과 1은 숫자 유형이므로 허용되지 않습니다.

구문 :

let status :boolean = true;
let isDone :boolean = false;

let bflag :boolean = 1;
// error: Type 'number' is not assignable to type 'boolean'

모든 품종

구문 :

let a :any = 123
a = "hello world"; // changing type will not give any error.

변수는 다음을 사용하여 선언됩니다. 어떤 type 타입은 문자열, 숫자, 배열, 부울 또는 void 값을 가질 수 있습니다. TypeScript 컴파일 시간 오류가 발생하지 않으며, 이는 변수와 유사합니다. Java스크립트에서 `any type`은 해당 변수에 연결될 값의 유형을 확신할 수 없을 때만 사용하세요. `any type`을 사용하면 해당 값에 대한 모든 검사가 비활성화됩니다.

빈

void 타입은 주로 아무것도 반환하지 않는 함수의 반환 타입으로 사용됩니다.

구문 :

function testfunc():void{
 //code here
}

TypeScript 배열

An 배열 in TypeScript 배열은 여러 값을 저장할 수 있는 데이터 형식입니다. 배열을 선언하고 값을 할당하여 배열 연산을 수행하는 방법을 알아보겠습니다. TypeScript.

이후 TypeScript 강력한 타입 언어이기 때문에 배열에 담을 값의 데이터 타입을 명시적으로 지정해야 합니다. 그렇지 않으면 임의의 타입으로 처리됩니다.

배열 선언 및 초기화

구문 :

let nameofthearray : Array<typehere>

예시

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; // array with all string values

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; // array with all numbers

let month_year: Array<string | number> = ["Jan", 2015, "Feb", 2016]; // mixed

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; // any type

배열의 요소에 액세스하는 다양한 방법

배열에서 요소를 가져오려면 인덱스 0부터 배열 길이에서 1을 뺀 값까지 값을 가져옵니다.

let years: Array<number> = [2016, 2017, 2018, 2019];
years[0]; // output will be 2016
years[1]; // output will be 2017
years[2]; // output will be 2018
years[3]; // output will be 2019

배열에서 요소를 가져오는 또 다른 방법은 다음과 같습니다. TypeScript 을 통한 고리, 아래 그림과 같이.

사용 TypeScript for 루프

let years: Array<number> = [2016, 2017, 2018, 2019];
for (let i = 0; i < years.length; i++) {
     console.log(years[i]);
}

출력:

⚠️ 경고: 반복 조건은 다음과 같아야 합니다. i < years.length. 글쓰기 i <= years.length 한 번의 추가 반복을 실행하고 출력합니다. undefined왜냐하면 마지막으로 유효한 인덱스는 항상 길이에서 1을 뺀 값이기 때문입니다.

for-in 루프 사용

let years: Array<number> = [2016, 2017, 2018, 2019];
for (let i in years) {
     console.log(years[i]);
}

출력:

for-of 루프 사용

let years: Array<number> = [2016, 2017, 2018, 2019];
for (let i of years) {
     console.log(i);
}

출력:

forEach 루프 사용

let years: Array<number> = [2016, 2017, 2018, 2019];
years.forEach(function(yrs, i) {
  console.log(yrs);
});

출력:

TypeScript 배열 메서드

The TypeScript 배열 객체는 개발자가 배열을 쉽고 효율적으로 다룰 수 있도록 도와주는 다양한 속성과 메서드를 가지고 있습니다. 속성 값은 배열 이름.속성(arrayname.property)으로 지정하여 얻을 수 있고, 메서드의 출력은 배열 이름.메서드()(arrayname.method())로 지정하여 얻을 수 있습니다.

회원	목적	반품
길이	배열의 요소 수	번호
역전()	Reverse제자리에 있는 항목들의 순서	동일한 배열
종류()	물건들을 제자리에 정렬합니다	동일한 배열
팝()	마지막 항목을 제거합니다	제거된 항목
옮기다()	첫 번째 항목을 제거합니다	제거된 항목
푸시()	마지막 항목으로 값을 추가합니다.	새로운 길이
연결()	두 배열을 하나로 합칩니다.	새로운 배열

길이 속성의 예

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];

console.log(months.length);  // 12

역방향 방법의 예

console.log(months.reverse());
// ["Dec","Nov","Oct","Sept","Aug","July","June","May","April","March","Feb","Jan"]

정렬 방법의 예

console.log(months.sort());
// ["April","Aug","Dec","Feb","Jan","July","June","March","May","Nov","Oct","Sept"]

팝 방식의 예

console.log(months.pop()); // Dec

교대방식의 예

console.log(months.shift()); // Jan

푸시 방법의 예

let years: Array<number> = [2015, 2016, 2017, 2018, 2019];
console.log(years.push(2020)); // 6, the new length
years.forEach(function(yrs, i) {
  console.log(yrs); // 2015, 2016, 2017, 2018, 2019, 2020
});

연결 방법의 예

let array1: Array<number> = [10, 20, 30];
let array2: Array<number> = [100, 200, 300];
console.log(array1.concat(array2)); // [10, 20, 30, 100, 200, 300]

수업 TypeScript

TypeScript 의 상위 집합입니다 Java스크립트, 그러니까 가능한 모든 것 Java스크립트도 가능합니다 TypeScript클래스는 ES6부터 추가된 기능입니다. 앞서 Java스크립트와 클래스와 유사한 기능은 프로토타입 메서드를 가진 함수를 사용하여 코드 재사용성을 높임으로써 구현되었습니다. 클래스를 사용하면 코드를 특정 언어와 유사하게 작성할 수 있습니다. Java, C# 및 Python코드를 쉽게 재사용할 수 있는 환경입니다.

클래스 정의 TypeScript

다음은 기본 클래스 구문입니다. TypeScript:

class nameofclass {
     //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class
}

예: 클래스에 대한 실제 예

class Students {
    age : number;
    name : string;
    roll_no : number;

    constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

    getRollNo(): number {
        return this.roll_no;
    }

    getName() : string {
        return this.name;
    }

    getAge() : number {
        return this.age;
    }
}

위 예시에는 Students라는 클래스가 있습니다. 이 클래스는 age, name, roll_no라는 속성을 가지고 있습니다.

생성자 TypeScript 클래스

위에 정의된 Students 클래스는 아래와 같은 생성자를 가지고 있습니다.

constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

생성자 메서드는 age, name, roll_no라는 매개변수를 받습니다. 생성자는 클래스가 인스턴스화될 때 속성을 초기화하는 역할을 합니다. 이러한 속성은 다음과 같은 방식으로 접근할 수 있습니다. 이 예를 들어 `this.age`를 사용하면 나이에 접근할 수 있고, `this.roll_no`를 사용하면 학번에 접근할 수 있는 키워드를 사용할 수 있습니다. 아래와 같이 기본 생성자를 사용할 수도 있습니다.

constructor () {}

내부 메소드 TypeScript 클래스

Students 클래스에는 getRollNo(), getName(), getAge()와 같은 메서드가 정의되어 있으며, 이 메서드들은 각각 학번, 이름, 나이 속성의 값을 반환합니다.

getRollNo(): number {
        return this.roll_no;
}

getName() : string {
	return this.name;
}

getAge() : number {
	return this.age;
}

클래스의 인스턴스 생성 TypeScript

In TypeScript클래스의 인스턴스를 생성하려면 `new` 연산자를 사용합니다. `new`로 인스턴스를 생성하면 아래와 같이 해당 클래스의 속성과 메서드에 접근할 수 있는 객체를 얻게 됩니다.

let student_details = new Students(15, "Harry John", 33);
student_details.getAge();  // 15
student_details.getName(); // Harry John

컴파일 중 TypeScript 클래스 Java스크립트

아래와 같이 tsc 명령어를 사용하여 컴파일할 수 있습니다. Java스크립트.

Command: tsc  Students.ts

의 출력 Java스크립트 코드 컴파일 결과는 아래와 같습니다.

var Students = /** @class */ (function () {
    function Students(age, name, roll_no) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }
    Students.prototype.getRollNo = function () {
        return this.roll_no;
    };
    Students.prototype.getName = function () {
        return this.name;
    };
    Students.prototype.getAge = function () {
        return this.age;
    };
    return Students;
}());

In Java스크립트에서 클래스는 자체 호출 함수로 변환됩니다.

클래스 상속

클래스는 다음을 사용하여 상속될 수 있습니다. 확장하다 키워드 TypeScript.

클래스 상속 구문:

class A {
     //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class

}

class B extends A {
 //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class

}

클래스 B 공유할 수 있을 것이다 클래스 A 메서드와 속성.

다음은 상속을 사용하는 클래스의 작동 예시입니다.

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24);
_std1.getAge();      // output is 24
_std1.setMarks(500);
_std1.getMarks();    // output is 500

Person과 Student라는 두 개의 클래스가 있습니다. Student는 Person을 상속하며, Student에서 생성된 객체는 자신이 상속하는 클래스의 메서드와 속성뿐만 아니라 자신의 메서드와 속성에도 접근할 수 있습니다.

이제 위의 클래스에 몇 가지 변경 사항을 추가해 보겠습니다.

예:

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);
        this.tmarks = tmarks; // the derived property must be assigned too
    }
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getAge();   // output is 24
_std1.getMarks(); // output is 500

이전 예제와 비교했을 때 달라진 점은 Student 클래스에 생성자가 정의되어 있다는 것입니다. 이 생성자는 기본 클래스와 동일한 매개변수를 받으며, 추가 매개변수도 받을 수 있습니다.

In TypeScript 모든 기본 클래스 매개변수를 사용하여 super를 호출해야 합니다. super는 확장된 클래스의 생성자를 실행하므로, 이 호출은 생성자 내부의 첫 번째 문장이어야 합니다. 파생 클래스에서 선언된 tmarks와 같은 속성은 명시적으로 값을 할당해야 하며, 그렇지 않으면 getMarks는 undefined를 반환합니다.

액세스 수정자 TypeScript

TypeScript 이 클래스는 메서드와 속성에 대해 public, private, protected 접근 제어자를 지원합니다. 기본적으로 접근 제어자가 지정되지 않은 경우 해당 메서드 또는 속성은 public으로 간주되어 클래스의 객체에서 쉽게 접근할 수 있습니다.

private 접근 제한자가 있는 경우, 해당 멤버는 클래스의 객체에서 접근할 수 없으며 클래스 내부에서만 사용하도록 되어 있습니다. 상속받은 클래스에서는 해당 멤버에 접근할 수 없습니다.

protected 접근 제어자가 사용된 경우, 해당 멤버는 클래스 내부와 상속된 클래스 내부에서만 사용 가능하며, 클래스의 객체에서는 접근할 수 없습니다.

예:

class Person {
    protected name: string;
    protected age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    private getName(): string {
        return this.name;
    }

    getDetails(): string {
        return "Name is " + this.getName();
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);
        this.tmarks = tmarks;
    }
    getMarks(): number {
        return this.tmarks;
    }

    getFullName(): string {
        return this.name;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getMarks();    // output is 500
_std1.getFullName(); // output is Sheena
_std1.getDetails();  // output is Name is Sheena

편집	같은 수업	파생 클래스	클래스의 객체
공개	가능	가능	가능
보호	가능	가능	아니
사설	가능	아니	아니

인터페이스 TypeScript

의 핵심 기능 중 하나 TypeScript 인터페이스는 인터페이스를 사용하는 객체가 구현해야 하는 규칙 집합입니다. 객체는 클래스, 함수 또는 변수일 수 있습니다. 인터페이스는 속성과 메서드로 구성될 수 있으며, "?" 구문을 사용하여 속성이나 메서드를 선택 사항으로 표시할 수 있습니다. 인터페이스는 인터페이스를 구현하는 모든 함수, 변수 또는 클래스에 강력한 타입 검사를 추가합니다.

인터페이스 구문 TypeScript

interface Dimension {
    width: string;
    height: string;
}

Dimension이라는 인터페이스를 정의했는데, 이 인터페이스는 width와 height라는 두 가지 속성을 가지고 있으며, 두 속성 모두 문자열 형식입니다.

이 인터페이스는 변수, 함수 또는 클래스로 구현할 수 있습니다. 다음은 Dimension 인터페이스를 구현하는 변수의 예입니다.

예:

interface Dimension {
    width: string;
    height: string;
}

let _imagedim: Dimension = {
    width: "100px",
    height: "200px"
};

Dimension 인터페이스의 시그니처는 width와 height 속성으로 구성되며, 두 속성 모두 필수입니다. 속성이 누락되거나 타입이 변경될 경우, 코드 컴파일 시 컴파일 오류가 발생합니다. Java스크립트.

위 코드는 컴파일될 때 다음과 같은 결과를 나타냅니다. Java스크립트는 다음과 같습니다.

var _imagedim = {
    width: "100px",
    height: "200px"
};

이제 함수와 함께 인터페이스를 사용하는 방법을 살펴보겠습니다.

함수의 반환 타입으로 인터페이스를 사용하는 방법

interface Dimension {
    width: string;
    height: string;
}

function getDimension() : Dimension {
    let width = "300px";
    let height = "250px";
    return {
        width: width,
        height: height
    }
}

위 예시에서는 Dimension 인터페이스가 getDimension() 함수의 반환 타입으로 사용되었습니다. 반환 값은 인터페이스에 선언된 속성 및 타입과 일치해야 합니다.

컴파일된 Java스크립트 코드는 다음과 같습니다.

function getDimension() {
    var width = "300px";
    var height = "250px";
    return {
        width: width,
        height: height
    };
}

컴파일 중에 반환 형식이 인터페이스와 일치하지 않으면 오류가 발생합니다.

함수 매개변수로서의 인터페이스

interface Dimension {
    width: string;
    height: string;
}

function getDimension(dim: Dimension) : string {
    let finaldim  = dim.width + "-" + dim.height;
    return finaldim;
}

getDimension({width:"300px", height:"250px"}); // "300px-250px"

위 예시에서는 Dimension 인터페이스를 getDimension() 함수의 매개변수로 사용했습니다. 이 함수를 호출할 때 전달되는 매개변수는 인터페이스에 정의된 규칙과 일치해야 합니다.

컴파일된 Java스크립트 코드는 다음과 같습니다.

function getDimension(dim) {
    var finaldim = dim.width + "-" + dim.height;
    return finaldim;
}
getDimension({ width: "300px", height: "250px" });

인터페이스를 구현하는 클래스

클래스에서 인터페이스를 사용하려면 키워드를 사용해야 합니다. 구현하다.

인터페이스를 구현하는 클래스의 구문:

class NameofClass implements InterfaceName {
}

다음 예시는 클래스와 연동되는 인터페이스의 작동 방식을 보여줍니다.

interface Dimension {
    width : string,
    height: string,
    getWidth(): string;
}

class Shapes implements Dimension {
    width: string;
    height: string;
    constructor (width:string, height:string) {
        this.width = width;
        this.height = height;
    }
    getWidth() {
        return this.width;
    }
}

위 예제에서는 width와 height라는 두 개의 문자열 타입 속성과 문자열을 반환하는 getWidth()라는 메서드를 가진 Dimension 인터페이스를 정의했습니다.

컴파일된 Java스크립트 코드는 다음과 같습니다.

var Shapes = /** @class */ (function () {
    function Shapes(width, height) {
        this.width = width;
        this.height = height;
    }
    Shapes.prototype.getWidth = function () {
        return this.width;
    };
    return Shapes;
}());

기능 TypeScript

함수는 작업을 수행하기 위해 실행되는 일련의 명령입니다. Java스크립트에서 대부분의 코드는 함수 형태로 작성되며, 이 함수들은 중요한 역할을 합니다. TypeScript 클래스, 인터페이스, 모듈, 네임스페이스를 사용할 수 있지만 함수는 여전히 중요한 역할을 합니다. 함수와 다른 개념의 차이점은 다음과 같습니다. Java스크립트와 TypeScript 매개변수 및 반환 유형을 사용할 수 있습니까? TypeScript 기능.

Java스크립트 기능:

function add (a1, b1) {
   return a1+b1;
}

TypeScript 기능:

function  add(a1 : number, b1: number) : number {
    return a1 + b1;
}

위 함수에서 함수 이름은 add이고 매개변수는 다음과 같습니다. a1 b1두 변수 모두 숫자 타입이며, 반환 타입 또한 숫자입니다. 함수에 문자열을 전달하면 컴파일 오류가 발생합니다. Java스크립트.

함수 호출하기: add

let x = add(5, 10);   // will return 15
let b = add(5);       // error TS2554: Expected 2 arguments, but got 1
let c = add(3,4,5);   // error TS2554: Expected 2 arguments, but got 3
let t = add("Harry", "John");
// error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'

매개 변수 a1 b1 필수 매개변수이며, 입력하지 않으면 오류가 발생합니다. 매개변수 유형과 반환 유형은 모두 중요하며, 한 번 정의되면 변경할 수 없습니다.

함수에 대한 선택적 매개변수

In Java스크립트에서는 함수의 모든 매개변수가 선택 사항이며 전달되지 않으면 정의되지 않은 것으로 간주됩니다. 하지만 그렇지 않은 경우도 있습니다. TypeScript매개변수를 정의한 후에는 반드시 해당 매개변수를 제공해야 합니다. 매개변수를 선택 사항으로 만들려면 아래와 같이 매개변수 이름 뒤에 물음표(-)를 추가하십시오.

function getName(firstname: string, lastname?: string): string {
    return firstname + lastname;
}

let a = getName("John");              // returns Johnundefined
let b = getName("John", "Harry");     // returns JohnHarry
let c = getName("John", "H", "Harry"); // error TS2554: Expected 1-2 arguments, but got 3

선택적 매개변수는 반드시 마지막에 정의해야 한다는 점에 유의하십시오. 첫 번째 매개변수는 선택적이고 두 번째 매개변수는 필수적일 수 없습니다. 컴파일러가 어떤 값이 제공되었는지 알 수 없기 때문입니다.

매개변수에 기본값 할당

아래와 같이 매개변수에 기본값을 지정할 수 있습니다.

function getName(firstname: string, lastname = "Harry"): string {
    return firstname + lastname;
}

let a = getName("John");      // will return JohnHarry
let b = getName("John", "H"); // will return JohnH

선택적 매개변수와 마찬가지로 기본값으로 초기화된 매개변수도 매개변수 목록의 끝에 있어야 합니다.

휴식 매개변수

당신은 방법을 보았습니다 TypeScript 필수 매개변수, 선택적 매개변수 및 기본값 매개변수를 처리합니다. 이제 나머지 매개변수에 대해 살펴보겠습니다. 나머지 매개변수는 세 가지 매개변수를 사용하여 함께 정의된 선택적 매개변수 그룹입니다. 점(…) 그 뒤에는 매개변수 이름이 오는데, 이는 배열입니다.

나머지 매개변수 구문:

function testFunc(a: string, ...arr: string[]) :string {
    return a + arr.join("");
}

위에서 보셨듯이, 나머지 매개변수는 점 세 개로 시작하는 배열입니다. 이 배열에는 함수에 전달되는 나머지 모든 인수가 저장됩니다.

예:

let a = testFunc("Monday", "Tuesday", "Wednesday", "Thursday");
// output is MondayTuesdayWednesdayThursday

화살표 함수

화살표 기능은 ES6에 출시된 중요한 기능 중 하나이며 다음에서 사용할 수 있습니다. TypeScript 또한 그렇습니다. 구문에 굵은 화살표가 있는데, 그것이 이름의 유래입니다.

화살표 함수 구문:

var nameoffunction = (params) => {
 // code here
}

화살표 함수는 어떤 용도로 사용되나요?

화살표 함수의 사용 사례를 이해하기 위해 예제를 살펴보겠습니다.

예:

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(function () {
            console.log(this.score);    // gives undefined
        }, 1000);
    }
}

var a = new ScoreCard();
a.getScore();

`score` 속성을 0으로 초기화한 함수를 만들었고, `getScore` 메서드는 내부적으로 `setTimeout`을 사용하여 1초 후에 `this.score`를 출력합니다. 그런데 `this.score`는 정의되고 초기화되었음에도 불구하고 출력되는 값은 `undefined`입니다. 문제는 `setTimeout` 메서드에 있습니다. 이 키워드입니다. setTimeout 함수 내부의 함수는 자체적인 this를 가지고 있는데, score가 정의되어 있지 않으므로 결과는 undefined입니다.

아래와 같이 화살표 함수를 사용하여 동일한 문제를 처리할 수 있습니다.

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(() => {
            console.log(this.score);   // you get 0
        }, 1000);
    }
}

var a = new ScoreCard();
a.getScore();

화살표 함수에는 자체 속성이 없습니다. 이`this`는 상위 스코프의 `this`를 공유하므로, 외부에서 선언된 변수도 화살표 함수 내부에서 `this`를 사용하여 접근할 수 있습니다. 이러한 방식은 구문이 간결할 뿐만 아니라 콜백, 이벤트 핸들러, 타이밍 함수 등에 유용하게 사용됩니다.

TypeScript 열거 형

A TypeScript enum은 서로 관련된 값들을 모아놓은 컬렉션을 담고 있는 객체입니다. Java스크립트는 열거형을 기본적으로 지원하지 않습니다. 대부분의 프로그래밍 언어는 다음과 같은 기능을 제공합니다. Java, C 및 C++ 열거형을 지원합니다. TypeScript 또한 사용 가능하게 해줍니다. 열거형은 enum 키워드를 사용하여 정의됩니다.

Enum을 선언하는 방법은 무엇입니까?

구문 :

enum NameofEnum {
   value1,
   value2,
    ..
}

예: 열거형

enum Directions {
    North,
    South,
    East,
    West
}

위 예시에서는 Directions라는 열거형을 정의했으며, 값은 North, South, East, West입니다. 값은 첫 번째 항목의 경우 0부터 시작하여 이후 항목마다 1씩 증가합니다.

숫자 값을 가진 열거형을 선언하세요.

기본적으로 열거형 멤버에 값이 지정되지 않으면 0부터 시작하는 숫자가 사용됩니다. 다음 예는 명시적인 숫자 값을 가진 열거형을 보여줍니다.

enum Directions {
North = 0,
South = 1,
East = 2,
West = 3
}

시작 값을 지정할 수도 있으며, 이후 멤버들은 순차적으로 증가하는 값을 받습니다. 예를 들면 다음과 같습니다.

enum Directions {
North = 5,
South, // will be 6
East,  // 7
West   // 8
}

북쪽은 5부터 시작하므로 남쪽은 6, 동쪽은 7, 서쪽은 8입니다.

기본값 대신 원하는 값을 지정할 수도 있습니다. 예를 들면 다음과 같습니다.

enum Directions {
North = 5,
South = 4,
East = 6,
West = 8
}

Enum에 액세스하는 방법은 무엇입니까?

다음 예시는 코드에서 열거형을 사용하는 방법을 보여줍니다.

enum Directions {
    North,
    South,
    East,
    West
}

console.log(Directions.North);      // output is 0
console.log(Directions["North"]); // output is 0
console.log(Directions[0]);       // output is North

컴파일된 Java스크립트는 다음과 같습니다.

var Directions;
(function (Directions) {
    Directions[Directions["North"] = 0] = "North";
    Directions[Directions["South"] = 1] = "South";
    Directions[Directions["East"] = 2] = "East";
    Directions[Directions["West"] = 3] = "West";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

이후 Java스크립트는 열거형을 지원하지 않으므로 컴파일러가 위와 같이 열거형을 자체 호출 함수로 변환합니다. 이중 대입이 역맵을 생성하는 원인입니다.ping 숫자에서 이름으로.

문자열 값을 가진 열거형을 선언하세요.

아래 예시와 같이 원하는 문자열 값을 할당할 수 있습니다.

예:

enum Directions {
    North = "N",
    South = "S",
    East = "E",
    West = "W"
}

console.log(Directions.North);      // output is N
console.log(Directions["North"]); // output is N
console.log(Directions[0]);       // output is undefined

컴파일된 Java스크립트는 다음과 같습니다.

var Directions;
(function (Directions) {
    Directions["North"] = "N";
    Directions["South"] = "S";
    Directions["East"] = "E";
    Directions["West"] = "W";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

⚠️ 경고: 문자열 열거형에는 역맵이 없습니다.ping위의 두 컴파일된 출력을 비교해 보세요. 숫자 열거형은 이름과 값 사이의 양방향 정보를 모두 저장하는 반면, 문자열 열거형은 이름과 값 사이의 정보만 저장합니다. 이것이 바로 그 이유입니다. Directions[0] 문자열 열거형에 대해 undefined를 반환합니다.

모듈은 무엇입니까? TypeScript?

생성된 파일 TypeScript 전역 변수는 한 파일에서 선언된 변수를 다른 파일에서도 접근할 수 있다는 의미입니다. 이러한 전역적인 특성으로 인해 코드 충돌 및 런타임 문제가 발생할 수 있습니다. 모듈 내보내기 및 가져오기 기능을 사용하면 전역 변수 및 함수 충돌을 방지할 수 있습니다. 이 기능은 2023년에 도입되었습니다. JavaES6 릴리스에 포함된 스크립트이며 다음에서도 지원됩니다. TypeScript.

모듈이 필요한 이유 TypeScript?

다음 예시는 모듈 없이 발생하는 문제를 보여줍니다.

예 test1.ts

let age : number = 25;

test1.ts에 숫자 유형의 변수 연령을 정의했습니다.

예 test2.ts

test2.ts 파일에서는 해당 변수에 접근할 수 있습니다. 나이 test1.ts에 정의된 내용을 아래와 같이 수정합니다.

age = 30; // changed from 25 to 30.
let _new_age = age;

이는 변수들이 전역적으로 접근 가능하고 어디서든 수정될 수 있기 때문에 많은 문제를 야기할 수 있습니다.

와 모듈작성된 코드는 파일 내에만 남아 있으며 파일 외부에서는 접근할 수 없습니다. 파일의 내용을 공유하려면 `export` 키워드를 사용하여 내보내야 합니다. 수출 `--` 연산자는 변수, 클래스, 함수 또는 인터페이스를 다른 파일에서 사용하려는 경우에 사용됩니다. 수입 내보낸 항목에 접근하려는 경우에 사용됩니다. 이렇게 하면 파일 내의 코드가 그대로 유지되며, 동일한 변수 이름을 정의하더라도 섞이지 않습니다.

내보내기 및 가져오기 사용

내보내기 및 가져오기에는 여러 가지 방법이 있습니다. 여기서는 가장 일반적으로 사용되는 구문에 대해 설명하겠습니다.

가져오기 및 내보내기 1의 구문:

export  nameofthevariable or class name or interface name etc

//To import the above variable or class name or interface you have to use import as shown below:

import {nameofthevariable or class name or interfacename} from "file path here without .ts"

다음은 내보내기 및 가져오기를 사용한 실제 예제입니다.

test1.ts

export let age: number = 25;

`export` 키워드는 나이 변수를 다른 파일과 공유하는 데 사용됩니다.

test2.ts

import { age } from "./test1"
let new_age :number = age;

import 키워드는 접근하는 데 사용됩니다. 나이 변수이며 위와 같이 파일 위치를 지정해야 합니다.

가져오기 및 내보내기 구문 2:

내보내기 및 가져오기를 위한 또 다른 방법이 있으며, 구문은 다음과 같습니다.

export = classname;

import classname = require("file path of modulename")

사용할 때 수출 = 모듈을 내보내려면 가져오기 시 `require(“모듈 이름의 파일 경로”)`를 사용해야 합니다.

다음은 해당 사례를 보여주는 작동 예시입니다.

Customer.ts

class Customer {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }
}

export = Customer;

testCustomer.ts

import Customer = require("./Customer");

let a = new Customer("Harry", 30);
alert(a.getName());

모듈 로더

모듈은 단독으로 작동할 수 없으므로, 다음에서 볼 수 있듯이 가져오기 종속성을 찾으려면 모듈 로더가 필요합니다. TypeScript 위의 예시들을 참고하세요. 사용 가능한 모듈 로더로는 Nodejs용 CommonJS와 브라우저 실행용 Require.js가 있습니다.

CommonJS 모듈 형식을 사용하여 코드를 컴파일하려면 다음 명령을 사용하십시오.

tsc --module commonjs testCustomer.ts

Requirejs 모듈 형식을 사용하여 코드를 컴파일하려면 다음 명령을 사용하십시오.

tsc --module amd testCustomer.ts

위 명령어를 사용하면 종속 파일들이 자바스크립트 파일로 변환됩니다.

Requirejs를 사용하여 testCustomer.ts를 testCustomer.js로 변환하는 예시

define(["require", "exports", "./Customer"], function (require, exports, Customer) {
    "use strict";
    exports.__esModule = true;
    var a = new Customer("Harry", 30);
    alert(a.getName());
});

Requirejs를 사용하여 Customer.ts를 Customer.js로 변환하는 예시

define(["require", "exports"], function (require, exports) {
    "use strict";
    var Customer = /** @class */ (function () {
        function Customer(name, age) {
            this.name = name;
            this.age = age;
        }
        Customer.prototype.getName = function () {
            return this.name;
        };
        return Customer;
    }());
    return Customer;
});

require.js를 사용하여 테스트하려면 다음과 같이 종속성을 참조하는 main.js라는 파일을 생성해야 합니다.

폴더 구조는 다음과 같습니다.

src/
    Customer.js
    testCustomer.js
    main.js
    require.js  // you can get this file from github or npm install requirejs
    test.html

메인.js

define(function (require) {
    var customer = require("./Customer");
    var testCustomer = require("./testCustomer");
});

테스트.html

<!DOCTYPE html>
<html>
<head>
    <title>TypeScript Module testing using Requirejs</title>
    <script data-main="main" src="require.js"></script>
</head>
<body>
    <h3>Testing modules using Requirejs</h3>
</body>
</html>

네임스페이스 TypeScript

네임스페이스는 클래스, 인터페이스, 변수 및 함수의 모음을 하나의 파일에 담아둡니다.

네임스페이스 구문

namespace name{

export class {
}

export interface {
}

export const constname;

}

관련 코드는 하나의 네임스페이스 아래에 있습니다.

네임스페이스 작업 예: testnamespace.ts

namespace StudentSetup {

    export interface StudDetails {
        name: string;
        age: number;
    }

    export function addSpace(str) { // will add space to the string given
        return str.split("").join(" ");
    }

    export class Student implements StudDetails {
        name: string;
        age: number;

        constructor(studentdetails: StudDetails) {
            this.name = studentdetails.name;
            this.age = studentdetails.age;
        }

        getName(): string {
            return this.name;
        }
    }
}

네임스페이스의 이름은 학생 설정그리고 StudDetails라는 인터페이스, addSpace라는 함수, 그리고 Student라는 클래스를 추가했습니다.

네임스페이스에 접근하기

다음은 네임스페이스를 사용하는 코드입니다. 학생 설정.

testStudentSetup.ts

let a = new StudentSetup.Student({ name: "Harry", age: 20 });

console.log("The name is :" + StudentSetup.addSpace(a.getName()));

네임스페이스 내의 클래스, 인터페이스 또는 함수를 참조할 때는 반드시 네임스페이스 이름을 사용해야 합니다. 예를 들어, StudentSetup.addSpace 함수에 접근하기 위해 학생설정.학생 클래스에 액세스합니다.

아래와 같이 두 파일을 하나의 자바스크립트 파일로 컴파일할 수 있습니다.

tsc --outFile namespace.js testnamespace.ts  testStudentSetup.ts

아래 명령어를 사용하여 명령 프롬프트에서 출력을 확인하십시오.

node namespace.js

출력:

The name is :H a r r y

앰비언트 선언 TypeScript

TypeScript 타사 서비스를 사용할 수 있도록 허용합니다. Java주변 선언을 사용하는 스크립트 파일. 이 기능의 장점은 라이브러리를 다시 작성할 필요 없이 모든 기능을 타입 검사와 함께 사용할 수 있다는 것입니다. TypeScript.

주변 구문

주변 모듈을 선언하려면:

declare module moduleName {
   //code here
}

주변 환경 파일은 다음과 같은 형식으로 저장해야 합니다.

filename.d.ts

파일을 사용하려면 파일 이름.d.ts .ts 파일에서 다음과 같이 참조해야 합니다.

/// <reference path="filename.d.ts"/>

앰비언트 유형 선언 TypeScript 이는 타사 라이브러리를 참조하고 필요한 함수를 자체 유형으로 다시 선언합니다. 예를 들어, 작은 것을 생각해 보세요. Java아래는 스크립트 라이브러리입니다.

타사 Java스크립트 파일: testString.js

var StringChecks = {
    isString: function (str) {
        return typeof str === "string";
    },

    convertToUpperCase: function (str) {
        return str.toUpperCase();
    },

    convertToLowerCase: function (str) {
        return str.toLowerCase();
    },

    convertToStringBold: function (str) {
        return str.bold();
    }
};

StringChecks라는 객체가 있는데, 이 객체에는 isString, convertToUpperCase, convertToLowerCase, convertToStringBold 함수가 있습니다.

앰비언트 모듈 생성하기 TypeScript

이제 우리는 다음을 참조하는 주변 모듈을 만들겠습니다. Java위의 스크립트 함수는 필요에 따라 타입 검사를 추가합니다.

파일명 : tstring.d.ts

declare module TestString {

    export interface StringsFunc {
        isString(str: string): boolean;
        convertToUpperCase(str: string): string;
        convertToLowerCase(str: string): string;
        convertToStringBold(str: string): string;
    }
}

declare var StringChecks: TestString.StringsFunc;

TestString이라는 모듈을 정의하고 StringsFunc 인터페이스를 내보냅니다. 각 함수 시그니처는 함수가 받는 인수와 반환 값을 명시합니다.

isString(str: 문자열): 부울 문자열을 입력받아 불리언 값을 반환합니다. 숫자나 다른 유형의 값을 전달하면 컴파일 오류가 발생합니다.
convertToUpperCase(str: 문자열): 문자열 – 문자열을 입력받아 문자열을 반환합니다.
convertToLowerCase(str: 문자열): 문자열 – 문자열을 입력받아 문자열을 반환합니다.
ConvertToStringBold(str: 문자열): 문자열 – 문자열을 입력받아 문자열을 반환합니다.

이후 Java스크립트 파일은 StringChecks라는 객체 이름을 노출하고, 최종적으로 .d.ts 파일에서 동일한 이름을 참조합니다.

declare var StringChecks: TestString.StringsFunc;

Ambient 모듈을 사용하여 TypeScript

다음은 주변 파일인 tstring.d.ts를 사용하는 test.ts 파일입니다.

/// <reference path="tstring.d.ts"/>
let str1 = StringChecks.isString("Hello World");
console.log(str1);
let str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
let str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
let str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

tsc test.ts 명령어로 컴파일하여 test.js 파일을 생성하세요.

/// <reference path="tstring.d.ts"/>
var str1 = StringChecks.isString("Hello World");
console.log(str1);
var str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
var str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
var str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

이제 HTML 파일에서 test.js 파일과 라이브러리 파일 testString.js를 함께 사용할 수 있습니다.

<html>
<head>
    <title>Test TypeScript Ambient</title>
    <script src="testString.js"></script>
    <script src="test.js"></script>
</head>
<body>
</body>
</html>

출력:

true
HELLO WORLD
hello
<b>Hello World</b>

💡 팁: 널리 사용되는 라이브러리의 경우 .d.ts 파일을 직접 작성할 필요는 거의 없습니다. 대신 커뮤니티에서 관리하는 타입을 설치하세요. 예를 들어, npm install --save-dev @types/lodash컴파일러가 이를 자동으로 인식합니다.

이어서 두 언어를 직접 비교해 보겠습니다. TypeScript vs Java스크립트, 다시 방문 Java스크립트 배열 메서드 여기에 사용된 형식이 지정되지 않은 동등한 표현에 대해서는 연구해 보세요. 루프 Java스크립트 내부적 인 그리고 외부적인 Java스크립트 컴파일된 출력은 브라우저 기본 사항에 의존합니다.

자주 묻는 질문

아니요. 브라우저가 실행합니다. Java스크립트 전용이므로 .ts 파일을 tsc 또는 번들러를 사용하여 먼저 컴파일해야 합니다. 타입 어노테이션은 이 단계에서 삭제되며 런타임 비용이 발생하지 않습니다.

네. tsconfig.json에서 allowJs를 활성화하고 파일을 하나씩 이름을 바꾸세요. 왜냐하면 모든 파일이 Java스크립트 파일이 이미 유효합니다. TypeScript프로젝트는 마이그레이션 과정 내내 계속 컴파일됩니다.

인터페이스는 다시 열고 확장할 수 있으며, 객체 형태를 표현하는 데 일반적으로 사용되는 방식입니다. 타입 별칭은 인터페이스로는 표현할 수 없는 공용체, 튜플, 기본형 데이터 유형도 포함합니다.

내보내기 및 가져오기 기능을 사용하여 모듈을 활용하세요. 네임스페이스는 ES 모듈보다 먼저 등장했으며, 주로 선언 파일이나 기존 스크립트 기반 코드베이스에서 유용하게 사용됩니다.

네, 확실히 그렇습니다. 컴파일러는 잘못된 속성이나 잘못된 인자 유형을 즉시 거부하므로, 생성된 코드 조각은 유형 검사를 통과하거나 오류가 있는 부분을 정확하게 보고합니다.

에디터 통합 기능은 주변 타입과 .d.ts 파일을 모델 컨텍스트에 제공합니다. 따라서 더 풍부한 어노테이션은 느슨한 타입의 코드보다 더 정확한 자동 완성 기능을 제공합니다.

TypeScript?

왜 사용 TypeScript?

TypeScript 연혁

누가 사용 TypeScript?

다운로드 및 설치 방법 TypeScript

편집하다 TypeScript 코드 Javascript

실행하다 Javascript Nodejs를 사용하여

실행하다 Java브라우저의 스크립트

편집하다 TypeScript 코드 Javascript EcmaScript 버전 사용

관련 기사

변수 TypeScript

var를 사용하여 변수 선언

let을 사용하여 변수 선언하기

const를 사용하여 변수 선언

유형 TypeScript

번호

끈

부울

모든 품종

빈

TypeScript 배열

배열 선언 및 초기화

배열의 요소에 액세스하는 다양한 방법

사용 TypeScript for 루프

출력:

for-in 루프 사용

출력:

for-of 루프 사용

출력:

forEach 루프 사용

출력:

TypeScript 배열 메서드

길이 속성의 예

역방향 방법의 예

정렬 방법의 예

팝 방식의 예

교대방식의 예

푸시 방법의 예

연결 방법의 예

수업 TypeScript

클래스 정의 TypeScript

예: 클래스에 대한 실제 예

생성자 TypeScript 클래스

내부 메소드 TypeScript 클래스

클래스의 인스턴스 생성 TypeScript

컴파일 중 TypeScript 클래스 Java스크립트

클래스 상속

클래스 상속 구문:

액세스 수정자 TypeScript

인터페이스 TypeScript

인터페이스 구문 TypeScript

함수의 반환 타입으로 인터페이스를 사용하는 방법

함수 매개변수로서의 인터페이스

인터페이스를 구현하는 클래스

기능 TypeScript

함수 호출하기: add

함수에 대한 선택적 매개변수

매개변수에 기본값 할당

휴식 매개변수

화살표 함수

화살표 함수는 어떤 용도로 사용되나요?

TypeScript 열거 형

Enum을 선언하는 방법은 무엇입니까?

숫자 값을 가진 열거형을 선언하세요.

Enum에 액세스하는 방법은 무엇입니까?

문자열 값을 가진 열거형을 선언하세요.

모듈은 무엇입니까? TypeScript?

모듈이 필요한 이유 TypeScript?

내보내기 및 가져오기 사용

가져오기 및 내보내기 1의 구문:

가져오기 및 내보내기 구문 2:

모듈 로더

Requirejs를 사용하여 testCustomer.ts를 testCustomer.js로 변환하는 예시

Requirejs를 사용하여 Customer.ts를 Customer.js로 변환하는 예시

네임스페이스 TypeScript

네임스페이스 구문

네임스페이스에 접근하기

출력:

앰비언트 선언 TypeScript

주변 구문