Typescript (4) 썸네일형 리스트형 [새싹 프론트엔드] 9주차 - 5 제네릭 타입 제네릭 타입 사용하는 이유 • printArray 함수에 숫자 타입의 배열을 전달 function printArray(arr: number[]): void { console.log(arr); } const arr1 = [10, 20, 30]; printArray(arr1); • printArray 함수에 문자열 타입의 배열을 전달 function printArray(arr: number[] | string[]): void { console.log(arr); } const arr2 = ["a", "b", "c"]; printArray(arr2); • printArray 함수에 불리언 타입의 배열을 전달 function printArray(arr: number[] | string[] | boolean[]):.. [새싹 프론트엔드] 9주차 - 4 인터페이스와 클래스 인터페이스 인터페이스를 사용하는 이유 • 타입이 객체인 p1, p2, p3 객체를 생성하는 예 인터페이스를 사용하는 이유 🤔 코드마다 중복되는 객체 타입을 하나로 만들 수 있다면? 인터페이스 특징 • 코드의 재사용성을 높임 • 작성중인 코드에 대한 더 많은 정보를 타입스크립트에 제공하기 위해 사용 - 인터페이스는 자바스크립트 코드로 컴파일 되지 않음 이름 규칙 • 첫글자를 대문자로 표기 • 인터페이스 이름 앞에 대문자(I)를 붙이지 않음 인터페이스 • 객체의 타입을 지정 • 예시 인터페이스 타입이 인터페이스인 p1, p2, p3 객체를 생성하는 예 실습) 인터페이스 function App() { interface Language{ name : string; level : number completed? .. [새싹 프론트엔드] 9주차 - 3 TypeScript 함수 함수 함수 선언문 function 함수이름(매개변수1: 타입1, 매개변수2: 타입2): 반환값_타입 { // 작업 } 반환값이 숫자 타입인 함수 function add(a: number, b: number): number { return a + b; } let result = add(1, 2); console.log(result); 반환값이 문자열 타입인 함수 function add(a: string, b: string): string { return a + b; } let result = add("Hello", "SOOA"); console.log(result); 반환값이 문자열 배열 타입인 함수 function add(a: string, b: string): string[] { return [a, b.. [새싹 프론트엔드] 9주차 - 3 TypeScript TypeScript 타입이 필요한 이유 특징 • 변수 값에 데이터 타입 지정 가능 ✔ 예측 가능한 코드 작성 가능 ✔ 디버깅(에러를 고쳐가는 과정) 편리 • 객체지향 프로그래밍 가능 ✔ 클래스 기능 제공 동작 과정 브라우저는 ts를 해석하지 못함 따라서 컴파일러 과정을 거쳐 자바스크립트로 변경 필요 리액트에서 타입스크립트 사용 시 .tsx 나 .ts로 파일명 저장 해야함 컴파일이란? 특정 언어의 코드를 다른 언어로 바꿔주는 과정 (ts를 js로 바꿔주는 것) - 별도의 컴파일 과정이 없다면 브라우저가 인식하지 못함 프로젝트 생성 TypeScript 설치 TypeScript 컴파일러 설치 $ npm install -g typescript -g는 글로벌로 설치하겠다는 뜻 (전역으로 설치 폴더 밖에서도 작동).. 이전 1 다음
