기록하며 성장하기

Class Typescript를 통해 Javascript의 객체지향 코드를 더 안전하고 좋은 코드로 만들 수 있다. 파라미터만 써주면 constructor가 알아서 컴파일된다. 접근제어자를 통해 접근 가능한 범위를 설정해줄 수 있다. class Player { constructor ( private firstName: string, // class 내부에서만 사용 가능 public lastName: string, // 모두 사용 가능 ){} } const jessie = new Player('jessie', 'Y') // 인스턴스 생성 jessie.firstName // 🚨 접근불가 jessie.lastName // 👍🏻 접근가능 Abstract Class 추상클래스는 다른 클래스가 상속받아 사용할 수 ..

Call signature 함수의 파라미터와 리턴값의 타입을 모두 미리 선언하는 것이다. 예를들어 React에서 함수로 prop을 보낼때, 어떻게 작동할지 미리 설계 해놓을 수 있다. type Add = (a: number, b: number) => number // this is a Call signature const add: Add = (a, b) => { return a + b } Overloading 오버로딩은 함수가 여러개의 call signature를 가지고 있을때 사용한다. 이런 경우의 타입을 직접 정의하는 일은 거의 없고, 라이브러리나 패키지들이 오버로딩 개념을 많이 사용하므로 알고있자. type Add = { (a: number, b: number): number (a: number, ..

Types of Typescript 기본적으로는 Implict type으로 변수의 타입을 추측해서 제공하지만, 제대로된 타입스크립트 활용을 위해서는 변수를 선언할때 타입을 명시적(Explicit type) 으로 할당한다. 다음과 같이 변수에 타입을 할당하며, 할당한 타입과 다른 데이터를 재할당 하려고하면 오류를 발생시킨다. let favorite: string = 'Apple' let age: number = 30 let isAdult: boolean = true any는 어떤 타입의 자료든 할당할 수 있도록 한다. Javascript에서는 기본적으로 변수에 any가 할당된 것과 같다. // 명시적 any 타입 지정 let id: any = 123 id = 'text도 할당 가능' // 암시적 any 타..

강의를 들으면서 README 파일에 내용을 기록했으나, 잠깐 vue를 체험하고 오는 사이 낯설어져서 다시 해보는 복습 정리. Why Typescript? 자바스크립트 만으로는 코드의 의도를 명확히 반영할 수 없다. function add (a, b) { return a + b } add('10', '20') 위 코드를 자바스크립트로 실행하는 경우, 의도는 30을 받는 것이었겠지만, 의도와 다른 데이터 타입(string)을 파라미터로 받았기 때문에 1020이라는 값을 받게된다. 이렇게 자바스크립트는 의도치 않은 오류를 발생시키기도 하고, 다 실행되고나서야 잘못된 지점이나 에러를 보여주기때문에 런타임에러(사용자가 만나는 에러)를 발생시킨다는 문제가 있다. 타입스크립트를 활용하면 이런 문제점을 보완할 수 있다..