TypeScript 인터페이스에서 배열 정의

1. 새 프로젝트 만들기
2. TypeScript 구성 파일 생성
3. 데이터용 JSON 파일 생성
4. 도서 클래스 정의
5. 책 배열에 대한 인터페이스 정의
6. 배열을 사용하여 JSON 데이터 사용
7. 결론

JSON 데이터의 개체 표현을 만드는 것은 NoSQL 데이터베이스를 사용하는 개발자를 위한 일반적인 개발 접근 방식입니다. 그 이유는 NoSQL 데이터베이스가 JSON을 사용하여 데이터를 저장하기 때문입니다.

이러한 데이터는 데이터 상태에 따라 문자열, 숫자 및 사용자 지정 개체와 같은 다양한 유형의 데이터 유형을 사용하여 프로그래밍 언어로 나타낼 수 있습니다.

이 자습서에서는 인터페이스에서 배열을 만들고 이 배열을 JSON 파일에 저장된 데이터로 채우는 방법을 배웁니다. JSON 파일에는 데이터 배열이 포함되어 있으며 이러한 데이터는 애플리케이션의 사용자 지정 TypeScript 개체에 매핑됩니다.

새 프로젝트 만들기

WebStorm IDEA를 열고 파일 > 새로 만들기 > 프로젝트를 선택합니다. 열리는 창 왼쪽에서 Node.js를 선택하고 프로젝트 이름을 untitled에서 array-of-strings로 변경하거나 원하는 이름을 입력합니다.

프로젝트를 생성하기 전에 노드 런타임 환경을 설치해야 노드 인터프리터 및 패키지 관리자 섹션이 자동으로 채워질 수 있습니다. 마지막으로 만들기 버튼을 눌러 프로젝트를 생성합니다.

TypeScript 구성 파일 생성

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

~/WebstormProjects/array-of-strings$ tsc --init

tsconfig.json을 열고 noEmitOnError: true 및 resolveJsonModule: true 속성을 추가합니다. 첫 번째 속성은 트랜스파일 오류가 있는 경우 JavaScript 파일이 생성되지 않도록 하고 두 번째 속성은 데이터가 포함된 JSON 파일을 읽을 수 있도록 합니다.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "noEmitOnError": true,
    "resolveJsonModule": true,
    "strict": true,
    "noFallthroughCasesInSwitch": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  }
}

데이터용 JSON 파일 생성

array-of-strings 폴더 아래에 books.json이라는 파일을 만들고 다음 JSON 데이터를 복사하여 파일에 붙여넣습니다.

[
  {
    "name": "Introduction to Java",
    "author": "john doe"
  },
  {
    "name": "Advanced databases",
    "author": "peter parker"
  }
]

JSON 데이터는 개체 배열을 보유하며 각 개체에는 이름 및 저자 속성이 있습니다. 간단히 말해서 JSON 데이터의 각 개체는 다음 섹션에서 정의할 Book 인스턴스를 나타냅니다.

도서 클래스 정의

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

class Book{
    constructor(private name: string,private author: string) {
        this.name = name
        this.author = author
    }
}

이 코드에서는 JSON 데이터에서 동일한 속성인 name 및 author 속성을 사용하여 Book 클래스를 정의했습니다. 다음 섹션에서는 Book 클래스를 사용하여 인터페이스에서 책 배열을 정의합니다.

책 배열에 대한 인터페이스 정의

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

export interface BookService{
    books: Book[];
}

이 파일에서 books라는 이름을 사용하여 책 배열을 정의하는 BookService라는 인터페이스를 만들었습니다. 이 인터페이스를 구현하는 모든 클래스는 books 배열을 구현해야 하며 다음 섹션에서는 이를 수행하는 방법을 보여줍니다.

배열을 사용하여 JSON 데이터 사용

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

import bookSource from "./books.json"
import {BookService} from "./BookService";

class BookServiceImpl implements BookService{
    books: Book[] = JSON.parse(JSON.stringify(bookSource));

    logBooks(): void{
        this.books.forEach(book => console.log(book));
    }
}

function main(){
    const bookService = new BookServiceImpl();
    bookService.logBooks();
}
main();

이 파일에서 BookService를 구현하는 BookServiceImpl이라는 클래스를 만들었습니다. 이전 섹션에서 언급한 요구 사항인 books 배열을 구현해야 합니다.

배열은 books.json 파일의 데이터를 사용하고 bookSource라는 이름의 import 문을 사용하여 데이터에 액세스합니다. stringify() 메서드는 bookSource를 JSON 문자열로 변환하고 parse() 메서드는 반환된 JSON 문자열을 사용하여 책 배열을 만듭니다.

logBooks() 메서드는 forEach() 메서드를 사용하여 테스트 목적으로 책 개체 배열을 콘솔에 기록합니다. main() 메소드는 BookServiceImpl 클래스의 인스턴스를 생성하고 이 인스턴스를 사용하여 logBook() 메소드를 호출합니다.

다음 명령을 사용하여 이 코드를 실행합니다.

~/WebstormProjects/array-of-strings$ tsc && node BookServiceImpl.js

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

{ name: 'Introduction to Java', author: 'john doe' }
{ name: 'Advanced databases', author: 'peter parker' }

결론

이 기사에서는 TypeScript 인터페이스에서 배열을 정의하고 배열을 사용하여 JSON 파일의 데이터를 사용하는 방법을 배웠습니다. 사용자와 상호 작용하는 애플리케이션을 개발할 때 일반적으로 파일이 아닌 데이터베이스를 사용합니다.

이 자습서에서는 사용자 지정 개체를 사용했지만 문자열, 숫자 등을 비롯한 다른 유형을 사용할 수 있습니다.