0927 TIL TS Typescript

타입스크립트를 쓰는 이유 

 

미리 버그를 방지해준다 

 

배포전에 에러 , 버그 방지 

 

코드의 안정성, 자동완성으로 코드작성 속도가 빨라짐 

 

협업하기 쉽다 유지보수가 쉽다 

 

타입스크립트는 컴파일이후 자바스크립트로 번역한다  (컴파일러가 코드를분석)

 

오류가없다면 자바스크립트로 변경됨 

 

타입스크립트는 자바스크립트랑 비슷하다 . 다른것은 타입을 적는 것이다 

 

타입스크립트는 

 

타입스크립트 프로젝트생성 하는 방법 

npm create vite@latest (//my-react-ts-app폴더명입력) -- --template react-ts

하고 y 눌러서 설치 

 

 

json sever 설치 방법

 

npm install json-server

 

 

tsconfig.json: TypeScript 컴파일러 옵션을 설정하는 파일.

 

이 프로젝트는 TS 로 되어있다 라고 생각 하면 된다 

 

 

개발 서버 여는 방법 

npm run dev

yarn dev

---

 

함수에 타입을 지정 하는 방법 

 

매개변수 (파라미터) 리턴 return 

 

방법: 타입 

 

1.함수의 매개 변수에 타입을 지정할수있다 

 

2.함수가 아무것도 돌려주지 않을 시(return이 없을 때 ) void 를 쓴다 

 

예시 

 

function add(a: number, b: number): number {
  return a + b;
}

---

비동기 ts 

 

 

async await 가 있을 떄 

 

promise 로 감싸주고 가져와야한다 

 

리턴부분=promise<todo> 

 

 

api 가져올때 , fetch 쓰고 promise 로감싸주고 <타입 > 가져온다 

: promise<number>

:promise<string>

---

 

제네릭 사용하기 

useState<타입>(0);

 

제네릭은 함수나 클래스를 작성할 때,

 

그 안에서 사용할 타입을 나중에 결정할 수 있도록 해줌

 

 함수가 호출될 때 어떤 타입이 들어올지 미리 지정하지 않아도 됨

 

제네릭 : 타입을 마치 클래스나 함수 등에서 파라미터처럼 사용하는 것

 

재사용 가능 한 코드를 작성할때 좋다 

 

 

제네릭 사용 하는 이유 

 

코드의 재사용성: 여러 타입을 처리하는 함수를 한 번에 만들 수 있다

 

타입 안정성: 어떤 타입이 들어오고 나가는지 정확히 알 수 있어 실수를 줄일 수 있다

 

유연성: 다양한 상황에서 여러 타입을 쉽게 처리할 수 있다

 

함수 옆에 <T> 

매개변수옆에  <T> 

리턴에   <T>

---

 

type 와 interface는

 

주로 객체를 지정할때 쓴다 

 

예시

interface Person {
    name: string;
    age: number;
}

let p1: Person = { name: "Alice", age: 25 };
let p2 = { name: "Bob", age: 30 };

p1 = p2; // 성공: p2는 Person과 동일한 구조를 가짐

 

 

type alias 

 

은 = 를 붙혀준다 

 

예시 

// Type alias
type ExampleType = {};
type StringType = string;
type UnionType = string | number

// interface

interface ExampleInterface {
example : string;
}

 

 

type alias 와 interface 의 차이점 

 

interface ;확장 가능 

 

type alias : 유니언 타입이나 기본 타입도 정의 가능  , 확장 불가능  || 가능 | 가능

---

type 

 

유니언 타입이나 기본 타입도 정의할 수 있다

확장 불가능: 다른 타입을 상속할 수는 없지만, 유니언 타입 등으로 여러 타입을 결합할 수 있다

 

 

 

interface 

 

확장 가능: 다른 인터페이스를 상속하거나, 여러 인터페이스를 결합할 수 있다

중복 선언 가능: 동일한 이름으로 여러 번 선언할 수 있고, 이 선언들이 합쳐져서 동작함

 

 

컴포넌트 props 타입지정시 interface 사용 , 객체의 구조를 정의하는데 사용

 

나머지 type 사용 

 

차이점 

 

Type Alias는 기본 타입(문자열, 숫자, 유니언 타입 등)도 정의할 수 있다.

Interface는 주로 객체만 다룸.

Interface는 확장 가능하고, 같은 이름으로 여러 번 정의할 수 있다.

하지만 Type Alias는 재정의나 확장이 어렵다 

 

---