포시코딩

추상 클래스 (Abstract class) 추상 클래스 사용 예시 abstract class User { constructor ( protected firstName: string, protected lastName: string ) {} abstract sayHi(name: string): string abstract fullName(): string } class Player extends User { fullName(): string { return `${this.firstName} ${this.lastName}` } sayHi(name: string): string { return `Hello ${name}. My name is ${this.fullName()}` } } 추상 클래스인 User 클..

readonly TypeScript type Words = { [key: string]: string } class Dict { private words: Words constructor() { this.words = {} } add(word: Word) { if (this.words[word.term] === undefined) { this.words[word.term] = word.def; } } def(term: string) { return this.words[term]; } } class Word { constructor ( public term: string, public def: string ) {} } const kimchi = new Word('kimchi', '한국의 음식'); cons..

Class 심화 Constructor에서 직접 초기화 되지 않는 property 만들기 type Words = { [key: string]: string } class Dict { private words: Words // Error! } 위 코드는 에러가 발생한다. words는 initializer가 없고 Constructor에서 정의된 sign이 아니라는 에러인데 Constuctor에 포함시켜주지 않다보니 발생하는걸 볼 수 있다. type Words = { [key: string]: string } class Dict { private words: Words constructor() { this.words = {} } } 하지만 이렇게 작성할 경우 에러가 사라지는걸 볼 수 있다. 예제 type Wor..

@types/~~의 한계? TypeScript를 쓰다보면 추가로 사용할 라이브러리에 대해 @types/라이브러리 와 같이 설치해줘야 해당 라이브러리 타입을 사용 가능한데, 만약 @types/~~ 를 했는데 없다면 어떻게 될까? 컴파일? 트랜스파일? 컴파일은 코드를 기계가 읽기 쉽게 변환해주는거고 TypeScript에서 JavaScript로의 변환은 트랜스파일이라고 배웠는데 왜 자꾸 가르치는 영상들에서 (내배캠 튜터뿐만 아니라 노마드코더의 니꼬쌤마저!) '컴파일'이라고 말하는걸까 -> 그냥 대충 퉁치는건가? 기존 JavaScript 파일 -> TypeScript 적용하기 tsconfig.json "strictNullChecks": true, "noImplicitAny": true 두 설정이 적용될 시 an..

Class 클래스 TypeScript에서 Class를 만들 때 기존 JavaScript에서 하던 행동들을 줄일 수 있다. 예시 TypeScript Class Player { constructor ( private firstName: string, private lastName: string ) } 변환된 JavaScript class Player { constructor (firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } } 하지만 private 선언을 한게 사라졌는데 위에서 private 키워드는 오로지 TypeScript가 보호해주기 위해서만 사용하는 것이고 JavaScript에서는 사용되지 않는다. TypeS..

다형성(Polymorphism) poly: 많은, 다수의 morphos or morphic: form(형태), structure(구조) 즉, 형태나 구조, 모양 polymorphous: 여러가지 다른 형태, 구조, 모양들 Generic type type SuperPrint = { (arr: number[]): void (arr: booleanp[): void } const suerPrint: SuperPrint = (arr) => { arr.forEach(i => console.log(i)) } superPrint([1, 2, 3, 4]) superPrint(true, false, true) superPrint(["a", "b", "c"] 위의 코드에서 superPrint로 오게될 파라미터들에 대해 계속..

Call Signature type Add = (a: number, b: number) => number; const add:Add = (a, b) => a + b; 먼저 함수의 타입을 설명하고 나서 코드를 구현하는 방법 Overloading(오버로딩) 오버로딩은 함수가 여러 개의 call signature를 가지고 있을 때 발생시킨다. 그냥 여러 개가 아닌 서로 다른 여러 개의 call signature을 가졌을 때! type Add = { (a: number, b: number) => number (a: number, b: string) => number } const add:Add = (a, b) => a + b; // Error! b가 number or string이라 string과 number를..

개요 TypeScript 처음 사용 시 tsc --init 했음에도 console에 대해 빨간 밑줄이 쳐지면서 에러가 생기는 분들이 있을 것이다. 이대로 tsc하여 트랜스파일을 시도하면 lib에 dom을 포함시켜야 한다고 나온다. tsconfig.json { "compilerOptions": { "lib": ["ES2021", "dom"], // dom 추가 "esModuleInterop": true, "target": "ES2021" } } 이렇게 해결하는 방법도 있지만 다른 방법이 있다. 해결 방법 npm init -y npm i @types/node 원인은 기존 JavaScript에서 쓰는 console에 대해 타입을 알지 못해 에러가 나는 거였는데 @types/node를 설치하여 node 전용 T..

TypeScript에만 존재하는 타입 unknown let a: unknown; let b = a + 1; // Error! if (typeof a === 'number') { let b = a + 1 } let b = a.toUpperCase(); // Error! if (typeof a === 'string') { let b = a.toUpperCase(); } void 아무것도 return하지 않는 함수 타입 // function hello(): void { // 이렇게 써도 되지만 생략 가능 function hello() { console.log(); // return 하지 않는다. } never nerver는 함수가 절대 return하지 않을 때 발생 function hello(): never ..

참고로 티스토리에서도 TypeScript 코드블럭을 지원한다. 변수의 타입 basic let a = 1; let b = "123"; let c = true; let a: number = 1; let b: string = "123"; let c: boolean = true; 타입을 명시해줘도 되지만 TS에서 알아서 추론하여 지정해주기 때문에 웬만하면 직접 명시해주지 않는걸 추천한다. let a = [1, 2]; let b: string[] = ["123", "abc"]; // let b = ["123", "abc"] let c: boolean[] = [true]; // let c = [true] let d: number[] = []; 배열도 마찬가지. 다만 d처럼 명확히 알 수 없을 경우에는 명시해주는 것..