성장에 목마른 코린이

밑바닥부터 프로젝트 설정 지금까지는 타입스크립트 공식 웹사이트에서 제공하는 온라인 playground를 썼습니다. 하지만 우리는 타입스크립트 프로젝트를 설정하는 방법에 대해 알아야 합니다. 타입스크립트 프로젝트가 뭔지, 설정은 어디에 작성해야 하고, 어떤 것을 설정할 수 있는지를 포함한 다양한 것에 대해서 알아볼겁니다. 우리가 하는 것이 알아두어야 하는 것이긴 하지만, 그렇게 자주 사용하게 되진 않을 겁니다. NestJS, NextJS, Create-React-App (CRA)를 사용하는 대부분의 사람들은, 수동으로 타입스크립트 프로젝트를 설정할 일이 거의 없습니다. 왜냐하면, 이런 프레임워크랑 라이브러리, 패키지들이 우릴 위해 타입스크립트 프로젝트를 만들어주기 때문이죠. 쟤네들이 우리가 이 섹션에서 배..

Polymorphism (다형성) 다형성은 다른 모양의 코드를 가질 수 있게 해 주는 것 입니다. 다형성을 이룰 수 있는 방법은, 제네릭을 사용하는 것입니다. 제네릭은 placeholder 타입을 쓸 수 있도록 해줍니다. 때가 되면, 타입스크립트가 placeholder 타입을 concrete 타입으로 바꾸어 줄 것입니다. concrete 타입을 쓸 필요없이, placeholder 타입만 쓰면됩니다. 같은 코드를 다른 타입에 대해서 쓸 수 있도록 해줍니다. 이제부터 브라우저에서 쓰는 로컬 스토리지 API와 비슷한 API를 만들어 볼 것입니다. call signature와 클래스를 만들 거지만, 실제로 구현하지는 않을 것입니다. 일반적인 자바스크립트에서 사용한 로컬 스토리지 API와 같은 API를 가지는 클..

Interfaces 시작하기전에, 추상 클래스에 대해 한번 더 복습해보자고 한다. 왜냐하면 여기서 추상화를 원할 때 클래스와 인터페이스를 사용할 때의 차이점에 대해 알아보려하기 때문이다. 추상 클래스는 그것으로부터 인스턴스를 만드는걸 허용하지 않습니다. new User를 만들수 없습니다. 추상 클래스는 상속받는 클래스가 어떻게 동작해야할 지 알려주기 위해 사용됩니다. 추상 클래스를 사용하는 것이 멋있다고 생각하는데 클래스를 어떻게 구현할지에 대해서는 말해주지 않지만, 무엇을 구현해야 할지에 대해서는 알려줄 수 있기 때문이다. 추상 클래스의 문제점은, 자바스크립트에는 abstract의 개념이 없다는 것이다. 그럼 왜 추상 클래스를 사용하냐면, 표준화된 property와 메소드를 갖도록 해주는 청사진을 만들..

Interfaces team이 일반적인 string이 아니라 특정 string이 되게 하는 법 그리고 이렇게 type으로 작성한 player을 interface를 사용해 한번 만들어 볼겁니다. 거의 똑같이 생겼죠. 하는 역할도 거의 똑같습니다. Interface는 오로지 오브젝트의 모양을 타입스크립트에게 설명해 주기 위해서만 사용되는 키워드입니다. Interface는 오로지 이 한가지의 목적만 가집니다. Interface는 객체 지향 프로그래밍의 개념을 활용해서 디자인되었고, type은 유연합니다. type으로는 여러가지 일을 할 수 있지만, Interface로는 이것만 할 수 있죠. 이렇게도 사용가능한데, 인터페이스는 클래스와 닮았습니다. 타입으로 작성한다면 이렇게 작성할 수 있습니다. 인터페이스로 만..

type Words = { // object의 Type을 선언해야할 때 [key:string] : string, // Words 타입이 string만을 property로 가지는 오브젝트라고 말해줌 } class Dict { public words:Words // words를 initializer 없이 선언 constructor() { this.words = {} // Constructor에서 수동으로 초기화 시켜줌 } add(word:Word) { // Word 클래스를 타입처럼 사용 가능 if(this.words[word.term] === undefined) { this.words[word.term] = word.def; } } delete(word:Word) { // Word 클래스를 타입처럼 사용 ..

Classes 왼쪽 예시는, TypeScript로 만든 Class이고 오른쪽 예시는, JavaScript로 만든 Class입니다. 보시면 TypeScript는 private 키워드가 있는데, 이 키워드는 오로지 TypeScript가 개발자를 보호해주기 위해서만 사용하는 것이고, JavaScript에서는 사용되지 않습니다. TypeScript에서 nico.firstName을 했을때, 에러가 뜨는 이유는 private 키워드를 사용해 만들었기 때문입니다. private 위 캡쳐에서 보실 수 있다시피 private하게 만들면, 외부에서 접근이 불가능해집니다. 하지만 Javascript에서는 private 키워드가 없기때문에, 잘 작동이 되죠. 그럼 어디서 private하게 선언한 firstName과 lastN..

Generic 위의 예시는 일일이 필요한 Call Signature를 만들어 주는데, Generic하게 사용하는 방법을 알려주겠다. 이 예시처럼 사용하면, 일일이 Call Signature를 지정해줄 필요가 없이 사용할 수 있다. 이런 식으로, 많이 사용하게 될 것이다. 이렇게 말고, any를 써도 되지 않나? 라는 생각이 들 수 있지만, 위의 예시처럼 만약 .toUpperCase() 메소드를 사용했을때, 숫자를 uppercase로 만들수 없기에 에러를 남겨줘야하지만 타입스크립트의 보호를 해제하기 때문에 아무런 에러를 남기지 않습니다. 만약 Generic 하게 사용하게 된다면, any의 예시와는 다르게 에러를 출력하는 것을 볼 수 있습니다. Generic은 요구한 대로 signature를 생성해줄 수 있..

Call Signature 타입스크립트는 함수를 쓸때마다 타입을 지정해줘야한다. Call Signatures: 함수를 구현하기전에, 타입을 만들 수 있고, 함수가 어떻게 작동할지 서술해둘 수 있다 하지만 Call Signature를 사용하면, 이미 어떤 타입을 쓸지, 어떻게 작동할지 서술해두었기 때문에 위의 예시처럼 꺼내서 사용하면 된다. 오버로딩: 함수가 서로 다른 call signatures를 가지고 있을 때 발생시킨다. 이건 매우 소수의 함수만 이런식으로 할 수 있어 매우 나쁜 예시로써, 아무 의미가 없지만 오버로딩의 핵심을 보여준다. 이건 Next.js 를 사용하면서 실제로 겪을만한 예시입니다. 이번 예시는 다른 두가지의 call signature가 다른 개수의 파라미터를 가질때 어떻게 해야하는지..

any any라는 속성은 말그대로 아무거나 들어갈 수 있다는 것인데, 이를 통해 typescript의 모든 보호장치를 비활성화 시킵니다. 예시에서 볼 수 있다시피 배열과 boolean을 더해주는데도 에러가 뜨지 않습니다. unknown unknown은 말그대로 알려지지않았다는 뜻입니다. 알려지지 않았기 때문에 에러가 뜨고있는 걸 볼 수가 있죠. void void는 아무것도 리턴하지 않는 함수입니다. 아무것도 리턴하지 않고 있기 때문에 a.toUpperCase()가 작동하지 않고있죠. never never은 함수가 절대 return하지 않을 때 발생합니다. 위의 예시처럼 에러를 보내고싶을때 사용됩니다. 혹은 위의 예시처럼 절대 실행되지 않는 코드 / 작동하지 않는 코드에 never이라고 표시됩니다.

선택적 타입 (?) name: string 처럼 어떤 타입이 들어가야할지 :를 이용해 지정해 줄 수 있습니다. (선택적 타입) 그리고 age뒤에있는 ?는 age가 있어도되고 없어도된다 라는 의미로 사용됩니다. ?가 없으면 age가 없는 nico때문에 에러가 나겠죠. readonly Player라는 타입을 함수에도 지정해줄 수 있습니다. name:string을 가지는 playerMaker도 Player이라는 타입을 가지게 되는거죠. 이렇게 하지않으면, player 타입을 가지지 않은 nico는 age를 갖지 못하게되는겁니다. 이번엔 readonly라는 속성인데, 이 속성을 부여하면 말그대로 읽는것 밖에 되지않고 위의 예시처럼 push를 할 수 없습니다. Tuple 이번엔 tuple이라는 것인데, 예시에서 ..

TypeScript 는 무엇인가? 왜 사용하는가? Javascript와의 차이 타입스크립트는 자바스크립트를 기반으로 만들어진 언어인데, 자바스크립트가 가지고 있는 여러 문제를 해결하고 보완하기 위해 만들어진 언어입니다. 그 뿐만 아니라 더 나은 개발자가 될 수 있게 해주고, 더 나은 개발자 경험을 제공합니다. 타입스크립트는 개발자를 멍청한 실수로부터 보호해주고, 더 생산적인 개발자가 되게 도와줍니다. Javascript 에서는 배열에 false를 더하는데, 배열이 사라지고 string 값으로 변하는 아이러니한 상황이 벌어집니다. 다른 언어에서는, 말도 안되는 일이지만 자바스크립트는 이런 말도 안되는 상황을 허용합니다. 이상한 예이긴하지만, 자바스크립트가 개발자를 이해해주려고 엄청난 노력을 하고 있다는 걸..