본문 바로가기

Front-End/Typescript12

Void 문가가 공부한 기록입니다. 부정확한 내용은 편히 지적 부탁드립니다. Void에 대해서 알아보기전에 잠깐 하나만 알고 넘어가자! interface A { a: string; } // 잉여 속성 검사 const obj1: A = { a: "hello", b: "world" }; 타입스크립트에는 잉여 속성 검사라는게 존재하는데 위 코드는 아래와 같이 에러를 뱉어낸다. 그런데 조금 웃긴것이 obj1에 할당된 객체를 변수로 빼면 interface A { a: string; } // 잉여 속성 검사 const obj = { a: "hello", b: "world" }; const obj1: A = obj; 에러를 뱉지않는다!! 이건 뭐야 :( 이게 타입스크립트에서 많이 헷갈리는 특성중에 하나라고 하는데 const .. 2023. 1. 2.
Type Aliases, Interface extends 문가가 공부한 기록입니다. 부정확한 내용은 편히 지적 부탁드립니다. // &를 '그리고'의 개념 보다는 상속의 개념으로 생각하자. type Animal = { breath: true }; type Mammal = Animal & { breed: true }; type Human = Mammal & { think: true }; const moonga: Human = { breath: true, breed: true, think: true }; interface A { breath: true; } interface B extends A { breed: true; } const b: B = { breath: true, breed: true }; +참고자료 https://github.com/ZeroCho/ts.. 2022. 12. 28.
enum과 object 문가가 공부한 기록입니다. 부정확한 내용은 편히 지적 부탁드립니다. // enum은 변수들을 하나의 그룹으로 묶고싶을 때 주로 사용한다. // enum은 JS로 변환될 때 사라진다. const enum EDirection { Up, Down, Left, Right, } const ODirection = { Up: 0, Down: 1, Left: 2, Right: 3, } as const; // as const를 사용하지 않으면 TS가 타입추론을 넓게 하게 된다. EDirection.Up; // 0 (enum member) EDirection.Up = 0 ODirection.Up; (property) Up: 0 // Using the enum as a parameter function walk(dir: E.. 2022. 12. 28.
Polymorphism2 문가가 공부한 기록입니다. 부정확한 내용은 편히 지적 부탁드립니다. 이번에는 다형성, 제네릭, 클래스 그리고 인터페이스를 모두 사용해보자. 기억하자. 다형성은 다른 모양의 코드를 가질 수 있게 해주는 것이다. 다형성을 이룰 수 있는 방법은 제네릭이다. 제네릭은 placeholder 타입을 쓸 수 있도록 해준다. (concrete 타입이 아니라 placeholder 타입이다!) 때가되면 TS가 placeholder 타입을 concrete 타입으로 변환해줄 것이다. 우리는 이제부터 브라우저에서 쓰이는 로컬 스토리지 API와 비슷한 API를 만들어볼건데 실제로 구현은 하지않고 타입만좀 끄적여 볼 것이다.(call signature랑 class 등등) //Storage 인터페이스는 이미 존재하니 SStorage.. 2022. 12. 21.
Type & Interface recap 문가가 공부한 기록입니다. 부정확한 내용은 편히 지적 부탁드립니다. type PlayerA = { name: string } type PlayerAA = PlayerA & { lastName:string } // type에서는 불가능하다. // type PlayerAA = PlayerA & { // health: number // } const playerA : PlayerAA = { name: "moon", lastName : "xxx" } //// interface PlayerB { name: string } interface PlayerBB extends PlayerB { lastName: string } // interface에서는 가능하다. interface PlayerBB { health: n.. 2022. 12. 21.
Interfaces 2 문가가 공부한 기록입니다. 부정확한 내용은 편히 지적 부탁드립니다. 지난 포스팅에서는 타입스크립트에서 타입과 인터페이스의 차이를 알아보았다. 사실 객체지향 나오고 인터페이스 나오면 추상 클래스 바로 나와줘야 하는 게 국룰아니겠습니까 들어가 봅시다 abstract class User { constructor( protected firstName: string, protected lastName: string ) {} abstract sayHi(name:string): string abstract fullName():string } 추상 클래스를 하나 만들었다. 보다시피 아무것도 구현하지 않았다. 단지 다른 클래스(추상 클래스를 상속받는)가 따라야 할 청사진(설계도)만을 제시했을 뿐이다. 만약 User 클래.. 2022. 12. 20.
Interfaces 문가가 공부한 기록입니다. 부정확한 내용은 편히 지적 부탁드립니다. 인터페이스(Interface)를 알아보기 전에 접근 제한자 readonly에 대해서 먼저 알아보고 시작하자! 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.. 2022. 12. 20.
Classes 문가가 공부한 기록입니다. 부정확한 내용은 편히 지적 부탁드립니다. 타입스크립트는 우리의 객체지향 코드들을 더 안전하고 좋게 만들 수 있도록 도와준다. 기존 JS에서 우리가 Class를 만들 때 우리는 아래와 같은 코드를 작성해야 했다. //Javascript 코드 "use strict"; class Player { constructor(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } } 생성자에 this.뭐시기 ~ this.거시기 ~~ 하지만 TS를 활용하면 전혀 그럴 필요가 없다. //Typescript 코드 class Player { constructor( private firstName:string, pr.. 2022. 12. 19.
Generics Recap 문가가 공부한 기록입니다. 부정확한 내용은 편히 지적 부탁드립니다. //call signature type SuperPrint = (a: T[]) => T const superPrint: SuperPrint = (a) => a[0] const a = superPrint([1, 2, 3, 4]); const b = superPrint([true, false, false]); const c = superPrint(["1", "2", "3"]); const d = superPrint([1, 2, true, false, "무야호"]); console.log(a, b, c, d); // 1 true 1 1 제네릭(Generics)은 기본적으로 placeholder를 사용해 코드의 타입을 우리가 작성한 코드의 타입.. 2022. 12. 16.
Polymorphism 문가가 공부한 기록입니다. 부정확한 내용은 편히 지적 부탁드립니다. 자자 이번에는 다형성(Polymorphism)과 타입스크립트가 어떻게 다형성을 제공하는지(Generic) 알아보자~ 다형성(Polymorphism)이 뭔데? 그리스어로 poly는 many, much, several, multi이다. polygon(다각형)과 같은 단어를 생각하면 된다. 그리고 morphos는 form(형태), structure(구조)란 뜻을 가지고 있다. 이것들을 조합하면 many(poly), structure(morphos)가 된다. 즉 여러 가지 다른 구조들이라는 의미다. 기본적으로 함수는 여러가지 다른 모양 또는 형태를 가지고 있다. 이번에는 타입과 관계없이 배열을 받고, 그 배열의 요소를 하나씩 출력해주는 함수를 .. 2022. 12. 16.

티스토리툴바