320x100 front-end/TypeScript10 [TS]08 제네릭+다형성+클래스+인터페이스 다형성: 다른모양의 코드를 가질수 있게 해준다. 다형성을 이루 수 있는 방법은 제네릭을 사용하는 것이다. 제네릭은 placehoder타입을 쓸 수 있도록 해준다. 예시-모든타입에 쓸 수 있는 로컬스토리지 API 시뮬레이션 interface SStorage { // Storage는 이미 내장되어 있는것이기 때문에 사용하게 되면 override가된다 그렇기 때문에 SStorage라고 할것임. [key: string]: T } class LocalStorage { private storage: SStorage = {} set(key:string, value:T){ this.storage[key] = value; } remove(key:string){ delete this.storage[key] } get(ke.. 2022. 5. 17. [TS]07 type과 interface type - 타입스크립트에게 오브젝트의 모양을 설명해 줄 수 있다. - 여러방면으로 쓰일 수 있다. (오브젝트의 모양을 알려주는데 쓸 수도 있고 타입이 string이라고 알려줄 수도 있다. 또 타입 alias(대체명)를 쓸 수 있다. 등등 여러종류의 타입을 설명할 수 있다.) // 예시1: Alias를 알려줌 type Nickname = string type Health = number // 예시2: 오브젝트의 모양을 알려줌 type Player = { nickname:Nickname, helthBar:Health } const tom:Player = { nickname:'tom', helthBar:10 } // 예시3: 타입이 string이라는것을 알려줌 type Food = string; const .. 2022. 5. 16. [TS]06 클래스 / 추상클래스 클래스 Classes 타입스크립트에서는 파라미터들을 써주기만 하면 알아서 constructor함수를 만들어준다. class Player { constructor( private firstName: string, //JS에서는 private 부분이 보이지 않는다. private lastName: string, public nickName: string, ){} } const player = new Player('firstName', 'last' , 'Tom'); player.firstName // -> class에서 private로 해주었기 때문에 오류가 나며 컴파일이 되지 않는다. 추상클래스, 추상메소드, private, protected, public 타입스크립드에서 제공하는 기능 추상클래스: 다른 클.. 2022. 5. 12. [TS]05 다형성 / 제네릭 다형성 Polymorphism 이란? '여러 모양'을 의미하는 그리스 단어이고 다형성에서 형은 타입(type)을 의미한다. 프로그래밍 언어에서 다형성이란, 여러 타입을 받아들임으로써 여러 형태를 가지는 것을 의미한다. generic이란? - 타입의 placeholder같은것이다. *concrete type대신 쓸 수 있다. (*concrete type이란? : number, boolean, string, unknown, void 등 을 일컬음) - 타입스크립트로 placeholder를 작성할 수 있고 그게 뭔지 추론해서 함수를 사용하는것. - call signature를 작성할때 들어갈 확실한 타입을 모를 때 제네릭을 사용한다. - 보통은 다른 라이브러리 또는 패키지를 사용하기때문에 직접 제네릭을 작성할.. 2022. 5. 11. [TS]04 call Signatures / overloading(오버로딩) call Signatures 함수 위에 마우스를 올렸을때 보게되는것. 함수를 어떻게 호출해야하는지 알려준다. 인자(arguments)의 타입과 함수의 반환타입을 알려준다. type Add = (a:number, b:number) => number; // -> Call Signatures 생성 const add:Add = (a, b) => a + b const add:Add = (a, b) => {a + b} // 이런식으로 잘못 썼을경우 에러가 난다. overloading 오버로딩 function overloading 이나 method overloading이라고도 불린다. 함수가 서로다른 여러개의 call signatures를 가지고 있을 때 발생시킨다. 패지나 라이브러리를 디자인할 때 많은 사람들이 사.. 2022. 5. 10. [TS]03 unKnown / void / never unKnown 변수의 타입을 미리 알지 못할 때 사용한다. 만약 API로 부터 응답을 받는데 그 응답의 타입을 모른다면 'unknown'타입을 쓸 수 있다. any와 차이점: any타입처럼 모든 값을 허용하지만 차이점은 할당된 값이 어떤 타입인지 알기전까진 프로퍼티 또는 연산을 하는경우 컴파일러가 체크한다. let a:unknown; //if문으로 타입체크를 하면 동작시킬수 있다. if(typeof a === 'number'){ let b = a + 1 } void void: 아무것도 return하지 않는 함수를 의미한다. 보통 void를 따로 지정해줄 필요는 없다. void는 '비어 있는 것'을 말한다. function hello(){ // void는 생략 가능 console.log('x') } nev.. 2022. 5. 10. [TS]02 readonly / Tuple / any 타입 readonly - 읽기전용속성. js에서는 없는 속성이다. type Player = { readonly name: string, // 앞에 readonly를 적어주면 읽기전용으로 바뀐다. age?: number } const playerMaker = (name:string) : Player => ({name}) const player = playerMaker("Tom") player.name = 'Jay' // 위에서 readonly속성을 주었기 때문에 수정하려고 시도하면 오류가 난다. //배열에서 readonly 사용하기 const numbers: readonly number[] = [1, 2, 3] number.push(1) // readonly속성을 가졌기 때문에 추가가 안되고 오류표시가 생긴다... 2022. 5. 10. [TS] 01 문법 / object, 함수 return의 타입지정 기본 문법 // 변수명 뒤에 ': 타입이름' 을 적어준다 let a : number = 1; let b : string = 'string'; let c : boolean = true; //array로 바꾸기 let aa : number[] = [1, 2]; let bb : string[] = ['string', 'hello']; let cc : boolean[] = [true]; // 타입은 자동으로 추론하는게 좋다. 굳이 명시할 필요 없음. 오브젝트 타입지정방법 & 옵셔널 // (1) 문제상황: age의 타입을 지정해줬지만 player안에 age가 없다면? -> age뒤에 '?'를 추가해서 옵셔널로 준다. const player : { name: string, age?: number } = { name.. 2022. 5. 10. [TypeScript] 리액트에서 타입스크립트 적용하기 01. 설치하기 (1) 타입스크립트를 전역으로 설치해준다. 설치할때 에러가 나서 찾아보니 sudo를 앞에 붙이면 해결이 된다. 컴퓨터 패스워드를 입력해주면 설치가 실행이 된다. npm install -g typescript sudo npm install -g typescript //위에 것이 오류난다면 sudo를 붙이고 다시 해보기! (2) Typescript의 필수 설정파일인 tsconfig.json을 생성하자. *tsconfig.json은 프로젝트를 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정한다. tsc --init 위의 패키지를 설치해도 되고 파일을 만들어도 된다. { "compilerOptions": { "outDir": "./dist/", "sourceMap": true, "noIm.. 2022. 5. 8. [Typescript]리엑트에서 타입스크립트 사용하기 1. 터미널에서 타입스크립트를 설치해준다 npm install typescript @types/node @types/react @types/react-dom @types/jest @types/react-router-dom 2. 파일 확장자명 변경하기 js파일 → .ts jsx 파일 → .tsx 3. 인터페이스 만든 뒤 props타입을 만들어준 인터페이스로 선언하기 *인터페이스란 타입을 정의한 규칙을 의미한다. //(1) interface 만들기 interface IProps { //word: any; any는 절대로 남발하면 안된다. word: IWord } interface IWord{ //프로퍼티들에게 타입을 지정할 수 있다. day: string; isDone: boolean; id: number;.. 2022. 4. 29. 이전 1 다음 320x100
