[React] TypeScript

타입스크립트는 자바스크립트의 superset 언어로 자바스크립트를 기반으로 하되, 보다 더 확장된 프로그래밍 언어

대신 타입스크립트는 리액트와 달리, 자바스크립트 라이브러리가 아니기 때문에 자바스크립트의 기존 기능을 기반으로 새로운 기능을 만들거나 기능을 확장하진 않는다.

대신 자바스크립트의 주요 문법보다 확장된 문법을 가진다.

 

** 타입스크립트는 정적타입(Statically Typed)을 가진다는 것

자바스크립트는 동적인 언어라, 변수 타입을 따로 지정해주지 않아도 자동으로 인식해서 결과값을 출력한다.

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

const result = add(2,5);

console.log(result);
//7

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

const result = add('2',5);

console.log(result);
//25

 

문자일 경우 알아서 문자로 인식하고, 숫자일 경우 알아서 숫자로 인식해 결과값을 출력한다.

 

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

const result = add(2 , 5);

console.log(result);

 

타입스크립트에서는 타입을 따로 지정해줄 수 있음 !

 

 

* 타입스크립트 설치 

npm install typescript

npm install -g typescript
//전역으로 설치하고 싶을 때 -g 추가

 

** 타입스크립트 코드는 브라우저에서 실행되지 않는다.

브라우저에서 타입스크립트 코드를 실행하기 위해서는 자바스크립트 형태로 컴파일 해야한다.

컴파일이 진행되는 동안, 타입표기는 전부 지워짐 !

 

컴파일러를 실행하려면, 

npx tsc

명령어를 사용해야하는데, 명령어를 실행하려면 타입스크립트 구성 파일을 프로젝트 폴더에 추가해

타입스크립트에게 컴파일할 파일을 알려줘야 한다.

 

Primitives : number, string, boolean

More complex types : arrays, objects

Function types : parameters

 

Primitives(기본형) number, string, boolean

let age: number;

age = 12;

let userName: string;

userName = "Max";

let isInstructor: boolean;

isInstructor = true;

 

More Complex types arrays, objects

let hobbies: string[];

hobbies = ["Sports", "Cookking"];

 

any는 예비적으로 사용하는 타입이므로, 사용하지 않는 것이 좋다

let person: any;

 

하나의 구조만 가지는 객체를 저장하고 싶을 때

let person: {
  name: string;
  age: number;
};

person = {
  name: "Max",
  age: 32,
};

person 객체 중 name과 age를 가지는 객체만 저장하겠다고 타입 지정해준다.

 

let people: {
  name: string;
  age: number;
}[];

people에 name, age 구조를 가진 객체 하나를 저장하는 것이 아니라 객체 배열을 저장하겠다고 표시.

 

let people: {}[];