TypeScript

[개인프로젝트] Nostanding 팀프로젝트 typescript로 리빌딩 - 2~5일차

현재까지의 진행사항 지난주에 이런저런 일들이 있어서 조금 지체되기도 했고, 블로그에 글 작성을 하지 못하게 된거 같다. 프로젝트는 짬 날때마다 꾸준히 작업을 했다. 팀 프로젝트 때, sequelize-auto로 데이터베이스 기반을 다져놨었는데 MySQL Workbench를 사용해서 데이터 관리 및 ER다이아그램으로 스키마를 만드는 등 너무 유용하게 사용해서 이번 ts 리빌딩에서도 sequelize-auto를 사용했는데, 생각치 못한 문제들에 직면하게되었다. 우선, 첫째로 models폴더에 index.js 파일을 만들어서 mysql 데이터를 가지고왔었는데 이걸 .ts로 변경하니 계속 'Error: No Sequelize instance passed' 이 에러를 만나게되었다. 약 2일~3일간 계속 검색을 하..

[개인프로젝트] Nostanding 팀프로젝트 typescript로 리빌딩 - 1일차

타입스크립트에서 require보다 import로 모듈을 불러오는 경우가 많은거 같아, package.json에 "type": "module" 을 입력해두게 되면, ts-node를 사용해서 파일을 실행 시키면 Unknown file extension ".ts" for 이 오류가 발생하게 되는데, stackoverflow에 솔루션 중 하나인 // tsconfig.json { "compilerOptions": { "module": "ESNext", "moduleResolution": "Node", /* ... your props ... */ }, "ts-node": { "esm": true } } 을 입력해주니까 모든 오류가 해결이 됐다. *여기서 문제가 compilerOptions 중 module : ESN..

[TypeScript] Nomad Coder - TypeScript 2주 챌린지(9일차)

타입스크립트 프로젝트 설정 명령어들 npm i -D typescript // devDependencies에 설치 tsconfig.json 파일 생성 // tsconfig.json { "include" : [ // 자바스크립트로 컴파일하고 싶은 모든 디렉터리 "src" ], "compilerOptions": { "outDir": "build", // 자바스크립트 파일이 생성될 디렉토리를 지정 "target": "ES3", // 어떤 버전의 자바스크립트로 타입스크립트를 컴파일하고 싶은지를 나타냄 "lib": ["ES6", "dom"], // 어떤 API를 사용하고 어떤 환경에서 코드를 실행하는지 알려줌, 배열에 넣어두면 해당 기능의 자동완성 기능을 사용할 수 있게 해줌 "strict": true, // 모든..

[TypeScript] Nomad Coder - TypeScript 2주 챌린지(7일차)

다형성, 제네릭, 클래스, 인터페이스를 모두 합쳐보자. 다형성은 다른 모양의 코드를 가질 수 있게 해주는 것, 다형성을 이룰 수 있는 방법은 제네릭을 사용해야한다! interface SStorage { [key:string]: T // key가 제한되지 않은 오브텍트를 정의하게 해줌 } class localStorage { private storage: SStorage = {} set(key:string, value:T){ this.storage[key] = value; } remove(key:string){ delete this.storage[key] } get(key:string):T { return this.storage[key] } clear(){ this.storage = {} } } const..

[TypeScript] Nomad Coder - TypeScript 2주 챌린지(6일차)

type에 특정값을 넣어서 지정해줄 수 있다. type Team = "red" | "blue" | "yellow" // 타입에 특정값을 넣을 수 있다. type Health = 1 | 5 | 10 interface Player { nickname: string, team:Team, health: Health } const nico : Player = { nickname: 'nico', team : "red", // 미리 지정해둔 특정값이 아닌 다른 값을 넣게되면 오류가 발생한다. health : 5 } interface? 인터페이스는 오직 오브젝트의 모양을 특정해주는 용도만을 가지고 있다. (TypeScript에서만 사용) React.js를 이용해 작업할 때 많이 사용된다. 또한, 인터페이스는 클래스 형..

[TypeScript] Nomad Coder - TypeScript 2주 챌린지(5일차)

TypeScript로 객체지향 프로그래밍하기 abstract class User { // 추상 클래스 constructor ( protected firstName:string, // protected, private, public의 차이를 잘 이해하자 private lastName:string, public nickname:string ) {} abstract getNickName():void // 추상 메소드 call signature만 가지고 있다 getFullName(){ // 메소드에도 protected, private, public을 넣어줄 수 있다. 안적었다면, public 상태 return `${this.firstName} ${this.lastName}` } } class Player ext..

[TypeScript] Nomad Coder - TypeScript 2주 챌린지(4일차)

다형성(polymorphism) poly = many, several, much, multy를 의미 morphos, morphic = form, structure를 의미 이것을 합쳐서 polymorphism은 여러가지 다른 구조들, 여러가지 다른 형태들이란 의미다. type SuperPrint = { (arr : number[]) : void (arr : boolean[]) : void (arr : string[]) : void } const superPrint : SuperPrint = (arr) => { arr.forEach(i => console.log(i)) } superPrint([1, 2, 3, 4]) superPrint([true, false, true]) superPrint(["a", "b..

[TypeScript] Nomad Coder - TypeScript 2주 챌린지(3일차)

Call Signatures 함수에 대한 타입을 만들 수 있고, 함수가 어떻게 작동하는 지 서술할 수 있다. 즉, 함수의 인자(arguments)의 타입과 함수의 반환 타입을 정해줄 수 있다. type Add = (a:number, b: number) => number // 이러한 형식을 call signatures 라고 불림 const add:Add = (a,b) => a+b Overloading 오버로딩은 함수가 여러개의 Call Signatures를 가지고 있을 때 발생시킨다. 예시1. type Config = { path: string, state: object } type Push = { (path: string): void (config: Config): void } const push:Pus..