main-프로젝트 준비 / typescript

typescript

타입스크립트 코드는 브라우저에서 실행되지 않음
-> 자바스크립트 형태로 컴파일 해야함

1. 타입스크립트 설치 npm install typescript
   • package.json 파일 설치 npm init -y
2. 컴파일러 실행 (특정 파일 지정해주기) npx tsc + 파일명

• 컴파일 하는 시점에 어디서 오류가 났는지 보여줌
  
• 오류 유무와 상관없이 js 파일은 생성됨
  

3. 리액트 + typescript install
   npx create-react-app my-app --template typescript
4. 실행 npm start

typescript 주요 기능

functions & types

함수의 타입을 정할 때는 매개변수의 타입만 생각할 것이 아니라 반환값의 타입도 생각해야함

• void : null과 undefined와 비슷하지만 항상 함수와 결합해서 사용한다는 특징이 있음 return 문이 없다는 것을 뜻함
  

generic types

insertAtBeginning 함수를 받아 demoArray에 -1을 추가한 updatedArray를 생성하는 경우,

insertAtBeginning의 배열 타입이 이미 any[]로 지정되어있기 때문에 demoArray의 값 또한 number로 인식하지 못하고, 결국 updatedArray의 타입도 any[]로 추론되어진다.

이렇게 되면 typescript에서 제공하는 기능을 제대로 활용하지 못하게 되어버린다.

그렇기 때문에 사용하는것이 generic types이다

아래와 같이 지정하는 순간 (<식별자>에서 식별자는 아무거나 상관없음) 타입을 specific하게 지정해주지 않은 상황이 되므로(타입이 any라고 지정해주지 않았으므로) 타입스크립트는 실제 들어온 인수의 정확한 값을 살펴보게 된다

function insertAtBeginning<T>(array: T[], value: T) {...}