Typescript

정적 타입을 가진다. (자스는 동적타입이다)
코드가 많아지고 다른 사람들과 함께 작업을 하다보면 함수를 사용할 때 잘못된 타입의 인자를 사용하게 될지도 모른다. (자스는 이 때 잘못 사용했음을 인지하지 못한다.)

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

function add(1,'1'); // js는 오류로 인식하지 않음. >> 11

사용 방법

기본 타입

변수: 타입;

function add(a: number, b: number){
	return a+b;
}
function add(1,'1'); 
>> TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

복합 타입

array

변수: 타입[];

let names : string[];
names = ['yejin', 'choonsik']

object

변수: {
   키: 타입;
   ...
   }
해당 키에 해당 타입만 들어올 수 있게함

let person: {
	name: string;
    age: number;
}
person = {
	name : 'Choonsik;,
    age : 10,
    isEmployee: ture // 불가능!!!!정의안된키.
};

let people: {
	키: 타입;
	name: string;
	age: number;
	}[]; //배열 각각에 들어갈 object 타입 지정해두고 뒤에 [] 붙여서 배열타입임을 명시

유니온

변수: 타입 | 타입 | 타입 ....

let name: string | number = "yejin";
name = 123 //가능

타입추론

let name = "yejin";

이렇게 변수를 만들고 바로 초기화하면
타입스크립트가 할당된 값의 타입을 보며 추론을 할 수 있다. 굳이 : string 안해도 됨.

타입 별칭 (Type Alias)

반복되는 타입 선언을 별칭으로 만들어두기

type Person = {
	name: string;
    age: number;
	...
}
...


let person: Person[];

let people: Person[];

함수와 타입

function 함수명(파라미터: 타입): 반환타입{
...
}
// 유니온타입 가능
// 타입추론이 있기 때문에 반환타입 굳이 지정안해도 된다면 안해도 됨.

제네릭

생성할 땐 파라미터만 적어두고 실행할 때 사용할 타입을 적는다.
"타입을 변수로 받을 수 있는 기능"

function 함수명<제네릭타입>(파라미터: 타입){
..
}

훅 타입

const [num, setNum] = useState<number>(0);

훅뒤의 <>안에 해당 state가 어떤 타입을 가질지 정해줄 수 있다.

설치

특정 프로젝트에서만 설치할 땐 npm install typescript

타입스크립트 -> 자스로 컴파일 해야함.
타입스크립트는 브라우저에 실행되지 않기때문.

기존프로젝트에 + Typescript

현재 프로젝트에 ts 추가할땐
npm install --save typescript @types/node @types/react @types/react-dom @types/jest

https://ko.reactjs.org/docs/static-type-checking.html#typescript
https://create-react-app.dev/docs/adding-typescript/

테라피아 에 참고 - https://haerang94.tistory.com/155