TypeScript에서 빈 배열 만들기

1. 새 프로젝트 만들기
2. TypeScript 구성 파일 생성
3. 배열에 대한 클래스 유형 생성
4. 명시적 유형 선언을 사용하여 TypeScript에서 빈 배열 만들기
5. Type Assertion을 사용하여 TypeScript에서 빈 배열 만들기
6. 배열 생성자를 사용하여 TypeScript에서 빈 배열 만들기
7. 결론

배열은 선형 접근 방식을 사용하여 요소를 저장하는 데이터 구조입니다. 이는 요소의 순서가 순차적이고 현재 요소의 이전 요소와 다음 요소에 액세스할 수 있기 때문입니다.

배열은 다른 데이터 구조에 비해 응용 프로그램을 개발할 때 일반적으로 사용됩니다. 예를 들어, 데이터베이스나 서비스에서 데이터 항목 모음을 가져와 애플리케이션에 표시하려는 경우 일반적으로 이를 위해 배열을 사용합니다.

먼저 소스에서 가져온 유형에 대한 배열을 선언하고 배열을 observable에 구독합니다. Observable은 소스에서 가져온 항목을 배열에 추가한 다음 배열 항목이 애플리케이션에 표시됩니다.

이 튜토리얼에서는 나중에 데이터로 채울 수 있는 TypeScript에서 빈 배열을 만드는 방법을 보여줍니다.

새 프로젝트 만들기

WebStorm IDEA를 열고 파일 > 새로 만들기 > 프로젝트를 선택합니다. 열리는 프레임에서 프레임 왼쪽에 있는 Node.js 섹션을 선택합니다.

오른쪽 Location 섹션에서 프로젝트 이름을 untitled에서 empty-array로 변경합니다.

노드 인터프리터 및 패키지 관리자 섹션을 시스템에서 자동으로 읽을 수 있도록 이 프로젝트를 생성하기 전에 노드 런타임 환경을 설치해야 합니다.

TypeScript 구성 파일 생성

프로젝트가 생성되면 단축키 ALT+F12를 사용하여 새 터미널 창을 열고 다음 명령을 사용하여 tsconfig.json 파일을 생성합니다.

~/WebstormProjects/empty-array$ tsc --init

출력:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "noEmitOnError": true
  }
}

구성 파일에 대한 유일한 변경 사항은 트랜스파일 오류의 경우 JavaScript 파일이 생성되지 않도록 하는 noEmitOnError: true 속성을 추가하는 것입니다.

배열에 대한 클래스 유형 생성

empty-array 폴더 아래 Phone.js라는 파일을 만들고 다음 코드를 복사하여 파일에 붙여넣습니다.

export class Phone{
    constructor(private id: number,
                private make: string,
                private name: string,
                private price: number) {
    }
}

이 코드에서는 id, make, name 및 price 속성을 포함하는 Phone이라는 클래스를 만들었습니다. 이 클래스를 배열 유형으로 활용하지만 문자열이나 숫자와 같은 데이터 유형을 자유롭게 사용할 수 있습니다.

export 키워드는 이 파일이 모듈임을 나타내며 Phone 클래스는 다음 섹션과 같이 다른 애플리케이션 모듈에서 사용됩니다.

명시적 유형 선언을 사용하여 TypeScript에서 빈 배열 만들기

empty-array 폴더 아래 Main.js라는 파일을 만들고 다음 코드를 파일에 복사하여 붙여넣습니다.

import {Phone} from "./Phone";

function usingExplicitType(): Phone[]{
    return [];
}

function main(){
    if (usingExplicitType().length == 0){
        console.log("The array has no phone instances");
    }
}
main();

이 코드에서 전화 개체 Phone[]의 배열을 반환하는 usingExplicitType()이라는 메서드를 만들었습니다. 빈 배열을 반환하려고 하므로 메서드 내부의 코드는 객체를 생성하지 않고 명시적으로 빈 배열을 반환합니다.

메서드가 배열을 반환한다는 것을 알고 있으므로 배열의 length 속성을 호출하여 길이를 확인할 수 있습니다. 배열의 길이가 0이면 배열에 요소가 없습니다.

이 모듈에서 Phone 클래스를 사용하기 위해 import 키워드를 사용했습니다.

코드가 예상대로 작동하는지 확인하려면 다음 명령을 사용하여 구체적인 구현을 정의하는 main() 함수를 실행하십시오.

~/WebstormProjects/empty-array$ tsc && node Main.js

tsc 명령은 TypeScript 코드를 JavaScript 코드로 변환하고 node 명령은 Main.js 파일을 실행합니다. 출력이 아래와 같은지 확인합니다.

The array has no phone instances

Type Assertion을 사용하여 TypeScript에서 빈 배열 만들기

usingExplicitType() 메소드 뒤에 아래 코드를 복사하여 Main.js 파일에 붙여넣습니다.

function usingTypeAssertion(): Phone[]{
    return [] as Phone[]; // return <Phone[]>[];

}

function main(){
    if (usingTypeAssertion().length == 0){
        console.log("The array has no phone instances");
    }
}
main();

이 코드에서는 전화 개체 Phone[]의 빈 배열을 반환하는 usingTypeAssertion()이라는 메서드를 만들었습니다.

이 메서드는 전화 개체의 빈 배열을 반환하는 목적을 달성하기 위해 형식 어설션을 사용합니다. 유형 어설션은 as 키워드를 사용하여 표시됩니다.

main() 메서드는 이전 예제와 동일한 방식으로 작동합니다.

이전 예제에서 사용한 명령을 사용하여 이 코드를 실행하고 출력이 아래와 같은지 확인합니다.

The array has no phone instances

배열 생성자를 사용하여 TypeScript에서 빈 배열 만들기

usingTypeAssertion() 메서드 뒤에 아래 코드를 복사하여 Main.js 파일에 붙여넣습니다.

function usingArrayConstructor(): Phone[]{
    return new Array<Phone>();
}

function main(){
    if (usingArrayConstructor().length == 0){
        console.log("The array has no phone instances");
    }
}
main();

이 코드에서는 이전 예제에서 수행한 것처럼 Phone[] 전화 개체 배열을 반환하는 usingArrayConstructor()라는 메서드를 만들었습니다.

TypeScript의 배열은 객체이므로 요소를 전달하지 않고 new 키워드를 사용하여 생성자 new Array<Phone>()를 호출하여 빈 배열을 반환합니다. Array 인터페이스는 이를 달성하기 위해 일반 구현 중 하나를 사용하므로 일반 매개변수의 인수로 Phone을 전달하여 빈 전화 개체만 반환되도록 했습니다.

이전 예제에서 사용한 명령을 사용하여 이 코드를 실행하고 출력이 아래와 같은지 확인합니다.

The array has no phone instances

결론

이 튜토리얼은 TypeScript에서 빈 배열을 만드는 방법을 알려줍니다. 우리가 다룬 접근 방식에는 명시적 형식 선언, 형식 어설션 및 배열 생성자를 사용하는 것이 포함됩니다.