Today I Learned/TypeScript

[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..

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

타입스크립트의 타입들 우선 object의 타입을 정의해줄 때, 선택적 변수를 지정하는 방법은 아래 예시와 같다. const player : { name: string, age?: number, // optional하게 사용하고 싶은 값에 ?를 붙여준다. } = { name: "nico", } age의 경우 number | undefined 값을 주어주는데 if (player.age && player.age ({name}) const nico = playerMaker("nico") nico.age = 12 // optional한 값을 지정해줄 수 있다. readonly 속성 readonly 속성은 요소들을 '읽기 전용'으로 만들어 주는 것이다. JavaScript에서는 없는 동작으로 TypeScript에서..

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

TypeScript? 타입스크립트는 strongly typed(엄격한 자료형) 프로그래밍 언어다. 타입스크립트는 작성한 코드가 자바스크립트로 변환된다. 변환하는 이유는 브라우저가 타입스크립트가 아닌 자바스크립트를 이해하기 떄문이다 strongly typed? 함수/메서드에 전달하는 객체나 값의 타입이 프로그래머의 의도와 다를 때, 컴파일러가 에어를 내거나 컴파일을 거부하는 식으로 타입을 엄격하게 맞춘다는 의미 타입스크립트를 사용하는 이유 자바스크립트는 매우 유연한 언어로 허용되서는 안되는 코드들이 존재하는데, 자바스크립트 내에선 실행되는 경우가 많다. 예시로, 1) [1, 2, 3, 4] + false // '1, 2, 3, 4false' 2) function divide(a, b) { return a ..