FE/TypeScript4 [TypeScript] Class class Q1이 가장 기본 형태입니다. constructor 안에서 사용할 값을 밖에다 선언을 해 줘야 하며, 함수와 같이 매개변수를 받을 때 타입을 지정해줘야 합니다. Q2처럼 class 안에 함수 생성 또한 가능합니다. 2022. 9. 14. [TypeScript] 그 외 타입 union 타입도 여러 개가 지정이 가능합니다. 이미지처럼 user의 이름이 당연히 string 타입이겠지만, 숫자로 불릴 수도 있기 때문에 number 타입도 같이 지정이 가능합니다. | 기호는 OR 연산자 ||의 모양과 흡사합니다. void void는 함수에서, return 값이 없거나 하는 경우에 사용할 수 있는 타입입니다. 함수가 아닌 변수에 타입을 지정해주면, undefined와 null을 할당합니다. narrowing narrowing이란 '타입의 범위를 좁힌다'는 의미인데요. 아래는 narrowing 중 조건문으로 타입의 범위를 좁히는 타입 가드의 패턴입니다. 매개변수 x가 숫자가 들어올 수도, 문자가 들어올 수도 있는 상황인데요. 이때 조건문을 통해 숫자라면, 다음을 반환하고, 문자라면 다.. 2022. 9. 14. [TypeScript] Type Alias, Interface type alias 객체나 자주 사용하는 타입은 type alias라는 타입 변수를 통해 필요할 때마다 가져다 쓰는 게 가능합니다. 함수에도 type alias 타입 변수 사용이 가능합니다. 이때 함수선언식이 아닌 함수표현식으로 선언을 해야 하고 중괄호 생략이 가능합니다. Interface Interface도 보면 앞서 설명드린 type alias와 크게 다를 게 없습니다. 실제로도 기능은 거의 비슷하며, 가장 큰 차이점은 확장 가능/불가능 여부입니다. interface extends 아래의 이미지를 보시면, 두 개의 interface가 있지만, 안에 name이 겹치는 것을 알 수 있습니다. 여기서 저 name을 가지고 올 수 있다면, name이 중복될 일도 없을 것이고, 코드도 훨씬 간단해질 겁니다. .. 2022. 9. 14. [TypeScript] 기본 타입 설치 # 기본 npm install -g typescript # 리액트에서 설치 시 # 신규 프로젝트 npx create-react-app 프로젝트명 --template typescript # 기존 프로젝트 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 문자형, 숫자형 타입 이미지와 같이, 문자형에는 :string을, 숫자엔 :number을 작성해 줘야 합니다. 당연히 string으로 타입을 지정해 줬는데, 숫자가, number로 타입 지정을 해 줬는데 문자가 들어가면 에러가 발생하게 됩니다. boolean 타입 객체 타입 객체의 경우는, 객체를 그대로 복사하여 사용하면 됩니다. 이게 너무 길 경우, .. 2022. 9. 14. 이전 1 다음
