프론트엔드/타입스크립트 (4) 썸네일형 리스트형 데코레이터 데코레이터는 기존코드의 형태를 유지하면서 메타데이터나 비즈니스로직을 추가하는 기능입니다. 아래와 같이 타입이라는 같은 속성에 동일한 값을 가지는 여러 클래스가 존재할 때, 해당 속성을 데코레이터를 통해 설정하게 되면 코드의 중복을 줄일 수 있습니다. 사용하기 타입스크립트에서 데코레이터는 아직 테스트 중인 기능으로 옵션에서 설정을 해 주어야 사용가능합니다. 아래 명령어를 커맨드라인에 입력하고 실행합니다. npx tsc --init 실행이 완료되면 아래와 같이 'tsconfig.json'파일이 생성됩니다. 설정된 옵션이 많은데 데코레이션 사용과 무관하므로 모두 삭제하고 아래 옵션을 추가하고 저장합니다. { "compilerOptions": { "experimentalDecorators": true } } 이.. 지네릭 타입제한은 오류를 사전에 발견할 수 있게 하여 안정성을 높이지만 반대로 정해진 타입만 사용가능하므로 코드의 재사용성을 감소시킵니다. 지네릭은 타입제한을 통한 안정성과 코드의 재사용성을 함께 제공하는데요. 코드를 통해 어떻게 지네릭이 사용되는지 보겠습니다. 타입제한 없음 먼저, 아무런 타입제한이 없는 경우의 코드입니다. 타입의 제한이 없기 때문에 배열에 아무런 값이나 들어갈 수 있습니다. // generic.ts class storage { private data:any[] = []; addData(newData) { this.data.push(newData) } } const data = new storage(); data.addData('new') data.addData(1) 타입제한 하지만, 해당 배.. 인터페이스 인터페이스는 지정할 타입만 분리하여 지정할 수 있게 해 주는 기능으로 클래스와 비슷하게 생겼지만 다른 점은 타입지정만 가능하고 값을 지정할 수 없다는 점입니다(다른 언어와 동일). 사용하기 아래와 같이 객체에 지정된 타입을 인터페이스를 활용하여 분리해 보겠습니다. let object: { name: string; age: number; married?: boolean } = { name: 'tom', age: 20, } 먼저 인터페이스를 생성하고 값과 타입을 지정합니다. 인터페이스도 메서드를 가질 수 있는 데 예시를 위해 메서드도 추가하였습니다. interface Person { name: string age: number married?: boolean walk?: () => void // method.. 타입스크립트 자바스크립트는 타입변형이 자유로운 언어입니다. 코드를 작성할 때 타입을 지정하지 않아도 자동으로 타입을 변경해 주기 때문에 코드작성은 쉬우나 동시에 발견하기 어려운 로직에러로 이어질 수 있는데요. 타입스크립트는 자바스크립트와 모든 기능과 문법을 사용하지만 타입제한을 강화한 언어로 개발과정에서 상기 언급한 에러의 가능성을 사전에 차단해 줍니다(자바스크립트의 모든 코드는 타입스크립트에서 사용가능하며 타입스크립트는 타입만 체크). 설치하기 타입스크립트를 브라우저가 인식하기 위해서는 타입스크립트를 자바스크립트로 컴파일해야 합니다. 타입스크립트 컴파일러는 타입스크립트 공식페이지(https://www.typescriptlang.org/)에서 가능한데요. 메인페이지에서 하얀 버튼을 누르면 로컬환경에 설치 (선택 시 .. 이전 1 다음
