클라이언트/TypeScript (7) 리스트형 [타입스크립트(TypeScript)] 제네릭(Generic) // 제네릭, Generic - 함수, 클래스, 배열 등을 다양한 타입으로 재사용할 수 있게 해주는 기능 - 타입 안전성이 높고, 재사용성과 유지보수성이 뛰어나다. // 제네릭 함수 생성 function identity(매개변수1: T, 매개변수2: U) { //처리 } - T나 U 타입의 인자를 받게 된다. function identity(매개변수1: T, 매개변수2: U) { //처리 } - extends를 사용하여 제약 조건을 추가할 수 있다. function extractAndConvert( obj: T, key: U, ) { return 'Value: ' + obj[key]; } extractAndConvert({ name: 'Hana' }, 'name'); // 제네릭 클래스 생성 class .. [타입스크립트(TypeScript)] 고급 타입(Advanced Types) // 고급 타입(Advanced Teypes) - 타입 중에서도 더 복잡하거나 특정 용례를 다루기 위한 타입 // 인터섹션 타입, Intersection Type - 두 개 이상의 타입을 결합하여 새로운 타입을 정의하는 것. - 여러 타입의 속성을 모두 가지고 있게 된다. - & 연산자를 사용한다. - 유니언 타입을 교차시킨다면 공통적인 것만 교차된다.(교집합) type 타입명1 = { prop1: string; prop2: number; }; type 타입명2 = { prop3: boolean; prop4: Date; }; type 타입명3 = 타입명1 & 타입명2; - 타입3는 prop1, prop2, prop3, prop4 속성을 모두 가진다. type Admin = { name: string; p.. [타입스크립트(TypeScript)] 인터페이스(Interface) // 인터페이스, Interface - 객체의 구조를 정의한다. - 객체의 타입을 정의할 때는 커스텀 타입보다 명확하게 나타낼 수 있는 인터페이스를 주로 사용한다. - 여러 클래스에서 기능을 공유하기 위해서도 인터페이스를 사용한다. // 인터페이스 정의 interface 인터페이스명 { property명:타입; 메소드명: 반환타입; } - interface 키워드를 붙인다. - interface 명은 대문자로 시작하는 것이 관례이다. - property에 값을 할당할 수 없고 타입만 정의한다. // 인터페이스 사용 // 객체 let 변수명: 인터페이스명; 변수명 = { property명: 타입에 맞는 값, 메소드명() {} }; 변수명.메소드명(); // 클래스 class 클래스명 implements 인.. [타입스크립트(TypeScript)] 클래스(Class) // Class - 개념은 자바스크립트와 같기 때문에 타입스크립트로 클래스 작성하는 것에 초점을 맞출 예정이다. - 참고 : https://sorrel012.tistory.com/349 [자바스크립트(JavaScript)] 클래스 // class - 객체를 생성하는 공장 class 클래스명 { constructor() { } } - constructor 함수를 이용하여 객체의 초기 값을 설정할 수 있다. (항상 추가하기) > 자바스크립트는 객체 생성 시 자동으로 constructor sorrel012.tistory.com class 클래스명 { 멤버필드명: 타입; constructor(매개변수명: 타입) { this.멤버필드명 = 매개변수명; } } new 클래스명(타입에 맞는 값); - 멤버 필드의 타.. [타입스크립트(TypeScript)] 웹스톰(Webstorm) 타입스크립트 컴파일 app을 실행하기 위해서는 타입스크립트 파일을 컴파일해서 자바스크립트 파일을 생성해야 한다. 타입스크립트 파일 수정할 때마다 다시 tsc 명령을 하는 건 너무나 귀찮은 일이다. CLI에 tsc 명령 시 뒤에 --watch를 추가할 수도 있고, IDE에서 제공하는 기능을 사용할 수도 있다. 나는 웹스톰의 File Watchers를 설정해서 컴파일했다. 1. typescript를 설치한다. tsc 명령어 경로를 지정해야 하기 떄문에 설치가 필요하다. npm install typescript @types/node --save-dev 2. Settings > Tools > File Watchers에 들어가서 Template을 추가한다. 3. 컴파일 상세 설정을 해준다. 주로 설정해야 할 것은 Tool to Ru.. [타입스크립트(TypeScript)] Types // Types - 원시 타입(Primitive Type) number string boolean - 참조 타입(Reference Type) Object Array Tuple Function - 기타 enum any void unknown never null, undefined - 공식 문서: https://www.typescriptlang.org/docs/handbook/basic-types.html Handbook - Basic Types Step two in learning TypeScript: The basic types. www.typescriptlang.org // number - 정수와 소수 등을 포함한 모든 숫자 - Integer, float이 따로 존재하지 않고 모두 number이다. ~.. [타입스크립트(TypeScript)] 타입스크립트란? // 타입스크립트, TypeScript - 자바스크립트에 새로운 기능을 더한 언어 - 개발 시점에 정적 타입 검사를 지원한다. - 코드를 작성해서 실행하면 자바스크립트 코드로 변환해주는 컴파일러로, 런타임 오류를 미리 발견하기 쉽다. - 변수, 함수의 매개변수, 객체 속성 등 타입을 명시적으로 선언할 수 있다. - ES6+ 자바스크립트를 지원한다. - IDE를 사용하면 코드 자동 완성, 인터페이스 정보 표시, 직접적인 오류 표시 등의 기능 등이 지원된다. - 적용 React 프로젝트에서 사용 Node.js 프로젝트에서 사용 1. React 프로젝트에서 사용 - Vite로 생성 npm create vite@latest 프로젝트명 -- --template react-ts - Create React App으로.. < 1 >
