TypeScript10 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. Polymorphism 문가가 공부한 기록입니다. 부정확한 내용은 편히 지적 부탁드립니다. 자자 이번에는 다형성(Polymorphism)과 타입스크립트가 어떻게 다형성을 제공하는지(Generic) 알아보자~ 다형성(Polymorphism)이 뭔데? 그리스어로 poly는 many, much, several, multi이다. polygon(다각형)과 같은 단어를 생각하면 된다. 그리고 morphos는 form(형태), structure(구조)란 뜻을 가지고 있다. 이것들을 조합하면 many(poly), structure(morphos)가 된다. 즉 여러 가지 다른 구조들이라는 의미다. 기본적으로 함수는 여러가지 다른 모양 또는 형태를 가지고 있다. 이번에는 타입과 관계없이 배열을 받고, 그 배열의 요소를 하나씩 출력해주는 함수를 .. 2022. 12. 16. Overloading 문가가 공부한 기록입니다. 부정확한 내용은 편히 지적 부탁드립니다. 개발을 하면서 실제로 많은 오버로딩된 함수를 직접 작성하진 않을 것이다. 그 대신 다른 사람들이 만든 외부 라이브러리를 사용할 텐데 이런 패키지와 라이브러리들은 오버로딩을 엄청 많이 사용한다. 그래서 우리는 오버로딩이 어떻게 생겨먹은 놈인지 알고 있어야 한다. type Add = (a: number, b: number) => number; 위 코드를 우리는 Call signature라고 부르기로 했다. 우리가 타입스크립트에게 이 함수가 어떻게 호출되는지 설명해주는 부분이다.(파라미터의 타입은 무엇인지, 함수의 리턴 타입은 무언인지!) 위와 같은 방식은 Call signature를 만드는 가장 간단하고 빠른 방법이다. 우리는 아래와 같은 .. 2022. 12. 16. Call Signatures 문가가 공부한 기록입니다. 부정확한 내용은 편히 지적 부탁드립니다. function add(a, b) { return a + b; } 타입스크립트에서 위와 같이 함수를 선언하면 Arguments가 이상하다고 불평을 한다. 그 이유는 a와 b의 타입을 추론할 수 없기 때문이다.(위 경우 a, b는 any타입을 갖고 있고 타입스크립트는 any 타입을 좋아하지 않는다.) function add(a: number, b: number) { return a + b; } // 아래와 같이 함수에 number를 표시하는 것은 필수는 아니다. // function add(a: number, b: number): number { // return a + b; // } const add = (a: number, b: num.. 2022. 12. 16. 이전 1 다음
