typescript 5

유데미 【한글자막】 Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS 강의와 inpa님 블로그를 참고하여 작성..! inpa님 블로그 | 링크 1. 데코레이터 데코레이터는 코드 조각을 장식해주는 역할을 하며 타입스크립트에서 그 기능을 함수로 구현할 수 있다. 예를들어 메소드 / 클래스 / 프로퍼티 / 파라미터 위에 @함수 를 장식해줌으로써, 코드가 실행(런타임)이 되면 데코레이터 함수가 실행되어, 장식한 멤버를 보다 파워풀하게 꾸며주는 것으로 이해하면 된다. TypeScript 공식 문서 설명 「TypeScript 및 ES6에 클래스가 도입됨에 따라, 클래스 및 클래스 멤버에 어노테이션을 달거나 수정하기 위해 추가 기능이 필요한 특정 시나리오가 있습니다. 데코레이터는 ..

1. 인터섹션 타입 두가지의 타입을 결합하여 다른 타입을 만들 수 있다. type 사용 type Admin = { name: string; privileges: string[]; }; type Employee = { name: string; startDate: Date; }; type ElevatedEmployee = Admin & Employee; const e1: ElevatedEmployee = { name: "Max", privileges: ["create-server"], startDate: new Date(), }; interface 사용 interface Admin { name: string; privileges: string[]; }; interface Employee { name: str..

제네릭 타입 TypeScript는 정적 타입 언어이기 때문에 함수 또는 클래스를 정의하는 시점에 매개변수나 반환값의 타입을 선언하여야 한다. 그런데 함수 또는 클래스를 정의하는 시점에 매개변수나 반환값의 타입을 선언하기 어려운 경우가 있다. 만약 printArray 함수에 경우에 따라 숫자 타입, 문자열 타입, 불리언 타입... 각기 다른 종류의 배열이 전달된다고 할 때, 이 타입들을 전부 처리하기 위해서는 함수 선언부에 들어올 수 있는 타입들을 모두 명시해야 한다. 이런 경우, 제네릭 타입으로 선언하면 함수 선언부를 간단하게 작성 가능하다. // 제네릭 타입을 쓰지 않으면 모든 경우의 수를 다 선언해야 한다 function printArray(arr: number[] | string[] | boolea..

1. 인터페이스 타입이 객체인 객체를 생성할 때, 코드마다 중복되는 객체 타입을 하나로 만들기 위해 사용한다. 코드의 재사용성을 높일 수 있고 작성 중인 코드에 대한 더 많은 정보를 타입 스크립트에 제공하기 위해 사용된다. 클래스나 객체가 특정 구조를 갖추도록 하고, 객체의 형태에 대한 개념을 명확하게 설명하는 강력한 기능. ※ 인터페이스는 자바스크립트 코드로 컴파일 되지 않음 규칙 첫 글자를 대문자로 표기 인터페이스 이름 앞에 대문자(I)를 붙이지 않음 (다른 알파벳 대문자는 가능. 절대 붙이지 말라는 건 아니지만...그래도 웬만하면 다른 대문자로 이름을 만들자) 객체에서만 사용할 수 있다! interface 인터페이스이름 { 속성이름: 속성타입 함수이름(){} string; getInfo(string..

1. TypeScript type이 있는 JavaScript. 변수를 만들 때 별도의 타입을 선언하는 것 개발자가 작성한 프로그램과 사용자 입력 간의 변수 타입이 다르게 되면 오류가 나기 때문에 타입이 필요하다. (내부적으로 의도하지 않은 오류 발생) ex.) function person(name, age){} 에서 age로 숫자 값이 저장되길 원하는데, 사용자 입력이 ("길동", "20") 이면 age 자리에 문자가 들어가는 것이기 때문에 오류가 발생 따라서 TypeScript를 활용하여 function person(name:string, age:number){} 로 타입을 선언해줄 수 있다. 변수 값에 데이터 타입 지정 가능 예측 가능한 코드 작성 가능 디버깅 편리 객체지향 프로그래밍 가능 클래스 기..