본문 바로가기

타입스크립트5

Type Script 기초 배우기 5[Generics] 제네릭(Generics)은 타입스크립트에서 function, class, interface, type을 사용하게 될 때 여러 종류의 타입에 대하여 호환을 맞춰야 하는 상황에서 사용하는 문법입니다. A 와 B 가 어떤 타입이 올 지 모르기 떄문에 이런 상황에서는 any라는 타입을 쓸 수도 있습니다. function merge(a: any, b: any): any{ return { ...a, ...b } } const merged = merge({foo:1}, {bar:1}); 그런데 이렇게 하면 타입추론이 모두 깨진거나 다름이 없습니다. 결과가 any라는 것은 즉 merged안에 어떤 타입이 들어있는지 알 수 없다는 것입니다. 이런 상황에 generic을 사용하면 됩니다. 제네릭은 다음과 같이 사용합니다... 2021. 10. 14.
Type Script 기초 배우기 4[interface] interface는 클래스 또는 객체를 위한 타입을 지정 할 때 사용되는 문법입니다. 우리가 클래스를 만들 때, 특정 조건을 준수해야 함을 명시하고 싶을 때 interface를 사용하여 클래스가 가지고 있어야 할 요구사항을 설정합니다. 그리고 클래스를 선언 할 때 implements키워드를 사용하여 해당 클래스가 특정 interface의 요구사항을 구현한다는 것을 명시합니다. 다음 코드를 작성해봅시다. // Shape 라는 interface 를 선언 interface Shape { getArea(): number; // Shape interface 에는 getArea 라는 함수가 꼭 있어야 하며 해당 함수의 반환값은 number입니다. } class Circle implements Shape { // `.. 2021. 10. 11.
Type Script 기초 배우기 3[함수] 이어서 타입스크립트의 함수에 대해 알아보겠습니다. function sum(x: number, y: number): number { //파라미터 옆에 타입 지정, 함수 옆에 return타입 지정 return x + y; } sum(1, 2); 타입스크립트에서는 파라미터와 리턴 타입을 지정할 수 있습니다. 만약 함수를 호출할 때 타입이 맞지 않은 파라미터를 넣거나 함수 안에서 지정한 리턴 타입이 아닐 경우 아래와 같이 에러가 발생합니다. 타입스크립트를 사용하면 함수를 잘못 호출하는 것을 사전에 방지할 수 있습니다. 다음에는 아래와 같이 함수를 작성해봅시다. function sumArray(numbers: number[]): number { return numbers.reduce((acc, current) =.. 2021. 10. 8.
Type Script 기초 배우기 2[변수] 이제 본격적으로 Type Script를 배워보도록 합시다. 타입스크립트는 궁극적으로 JavaScript로 컴파일 되기 때문에 컴파일을 할 수 있는 모듈이 필요합니다. 그래서 nodejs를 통해서 타입스크립트 모듈을 설치해 보겠습니다. nodejs 설치가 안되어 있는 분은 여기를 참고하세요. 우선 명령 프롬프트 창을 실행시킵니다. (저는 보통 git bash를 사용하기 때문에 git bash로 실행시켰습니다. cmd로 실행시켜도 무방합니다.) 아래와 같이 npm에서 typescript 모듈을 다운로드 합니다. 타입스크립트 모듈을 전역변수로 설치했습니다. 그리고 디렉토리를 하나 생성해서 해당 디렉토리로 이동합니다. 디렉토리에서 명령프롬프트를 실행 후 tsc --init을 입력하면 tsconfig.json파일.. 2021. 10. 5.
Type Script 기초 배우기 1 타입스크립트란? 타입스크립트는 자바스크립트에 타입을 부여한 언어입니다. 자바스크립트의 확장된 언어라고 볼 수 있습니다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야 합니다. 이 변환 과정을 우리는 컴파일(complile) 이라고 부릅니다. 타입스크립트를 써야하는 이유 자바스크립트도 충분히 복잡하고 어려운데 왜 또 다른 언어를 배워야 할까요? 단지 최신 기술이라서? 혹은 다른 회사도 많이 사용하니까 우리도 써야 하는 걸까? 라는 고민을 하게 됩니다. 타입스크립트는 2가지 관점에서 자바스크립트 코드의 품질과 개발 생산성을 높일 수 있습니다. 1. 에러의 사전 방지 타입스크립트는 에러를 사전에 미리 예방할 수 있습니다. 2. 코드 자동 완성과 가이드 타입스크립트의 또 다른.. 2021. 10. 2.