Frontend/Typescript

Typescript class 🏛

es6에서는 class가 등장하였습니다. class는 syntatic sugar로서 이를 babel로 변환하면 prototype으로 변환되는 것을 볼 수 있습니다. syntatic sugar란 alias와 같은 개념으로 이해하시면 좋습니다. 복잡한 기능을 간단하게 사용할 수 있도록 도와줍니다. React의 jsx도 대표적인 Syntatic sugar입니다. Typescript에서 class를 사용하는 경우 어떠한 것들을 적용해야 하는지 알아보려 합니다. js class class Person { constructor(name){ this.name = name } sayName() { console.log(this.name) } } ts class typescript에서는 변수를 미리 선언해주어야 합니다...

Typescript 사용 이유

typescript를 처음 사용할 때는 주위에서 대세라고 하니까 한번 써봐야 겠다 라는 생각이 있었습니다. 하지만 지금은 typescript를 필수로 사용하려 합니다. js -> ts -> js -> ts 식으로 개발을 진행했었었는데 두번째 js로 개발을 할때는 많은 불편함을 느꼈었던것 같습니다. typescript를 왜 사용해야 할까요?? 타입 스크립트 장점 정적 타입 지원 function sum(a, b) { return a + b; } sum(1, 2) // 3 sum("1", "2") // "12" 위의 코드를 작성한 의도는 숫자 두개를 입력받아 더해준 값을 return 하기 위해 작성하지 않았을까 싶습니다. 하지만 string 값을 넣으면 "12" 값이 출력되게 됩니다. 이는 Javascript..

Typescript enum, enum vs object

Typescript에는 enum 타입이 있습니다. enum 타입은 열거형 타입으로 의미가 명확한 코드와 코드의 가독성을 제공하기 위해 존재합니다. enum에는 숫자형 타입과 문자형 타입이 존재합니다. 숫자형 타입 enum DirectionNumber { UP, DONW, RIGHT, LEFT, } enum DirectionNumberWithNumber { UP = 0, DONW = 1, RIGHT = 2, LEFT = 3, } 숫자형 타입에서는 value의 할당을 생략할 수 도 있습니다. 할당을 생략하게 되면 값은 0 부터 차례대로 할당됩니다. (ex. UP = 0, DOWN = 1, RIGHT = 2, LEFT = 3) 문자형 타입 enum DirectionString { UP = "up", DONW ..

Typescript type vs interface

타입과 인터페이스의 차이를 아나요? 프로젝트 진행 시에 어떤 상황에서 타입을 쓰고 어떤 상황에서 인터페이스를 썼나요? type과 interface는 객체의 타입의 이름을 지정하는 것입니다. 둘의 기능은 거의 비슷하지만 몇 가지 차이점이 있습니다. 상속 받는 법 interface는 extends를 type에서는 &를 이용해 상속을 통한 확장을 진행합니다. interface interface1 { a: string; } interface interface2 extends interface1 { b: string; } const interfaceConst: interface2 = { a: 'a', b: 'b' } type type1 = { a: string; } type type2 = type1 & { b: ..

Typescript 유틸리티 타입 [Utility Types]

타입스크립트에서는 여러가지 유틸리티 타입을 제공해 줍니다. 잘 사용하게 되면 이미 선언한 타입들에서 입맛에 맞게 원하는 타입만 입력받을수 있게 해주어 유용할 때가 있었습니다. 전체 유틸리티 타입중 자주 사용하는 것들 위주로 정리를 해보려 합니다. Partial 타입의 모든 타입들을 optional로 만들어 줍니다. 아래의 이미지와 코드에서는 type People에서 name, age, job은 필수 입력 요소입니다. 하지만 Partial로 인해 전부 optional property로 바뀐것을 확인할 수 있습니다. // Partial type People = { name: string; age: number; job: string; house?: boolean; } type 백수 = Partial cons..

Typescript '<variable>' is declared but its value is never read.

제목과 이미지에 나와있는 error는 typescript를 사용하면서 발생할 수 있습니다. 위와 같은 에러 상황이 나올수 있는 경우는 두가지 입니다. 1. 선언후에 사용하지 않는 변수가 있으면 Typescript compiler가 에러를 뱉어내게 됩니다. 2. functional Component에서 인자로 받은 변수를 사용하지 않으면 에러를 뱉어내게 됩니다. 가장 좋은 방법은 지시하는 대로 따르는 것이라 생각해요. 사용하지 않는 변수는 지워주고 사용하지 않는 인자도 지워주는 것이 좋지 않을까 싶습니다. 이 에러가 발생하는 원인과 해결책은 tsconfig.json에 있습니다. 아래와 같이 변경해주면 compile 해주는데 문제는 발생하지 않습니다. 아래 두개의 property가 true이면 위의 사진과 ..