Typescript
자바스크립트의 모든 기능을 포함하면서 정적 타입을 지원하는 언어
정적타입언어
코드의 양이 많을 때 생산성이 높다.
- 타입으로 연결되어 있는 코드 간 이동이 쉽고, 변수명과 함수명을 변경하기 쉽다.
- import하지 않고 작성해도 IDE가 자동으로 코드를 넣어 준다.
- 함수를 호출하기 위해 함수 이름과 괄호를 입력하면 매개변수 종류와 반환값의 타입을 확인할 수 있다.
타입스크립트 장점
마이크로소프트에서 개발하고 꾸준하게 업데이트 버전이 나오고 있다. 자바스크립트 새로운 표준, 리액트 문법을 반영한다.
마이크로소프트에서 개발하고 있는 IDE: vscode과 찰떡궁합
- 리액트 컴포넌트를 사용할 때 props에 무엇을 전달해줘야 하는 지 JSX를 작성하는 과정에서 바로 알 수 있다.
- 리덕스 스토어 안에 어떤 상태가 들어있는지 바로 조회할 수 있다.
기본타입
특정 변수 또는 상수의 타입을 지정할 수 있다.
사전에 지정한 타입이 아닌 값을 설정하면 에러가 발생한다. (= 컴파일이 되지 않는다.)
let num = 1;
num += 1;
num = '문자열'; // error
const str: string = 'Tommy';
const numArr: number[] = [1, 2, 3];
const numArr: Array<number> = [1, 2, 3];
const strArr: string[] = ["tommy", "naeun"];
styArr.push(100); // error
let strUndefined: string | undefined = undefined; // 유니온타입: 문자열이거나 undefined
let cat: 'russian blue' | 'korean short hair' = 'russian blue';
cat = 'korean blue'; //errorenum 열거형 타입
첫 번째 원소에 값을 할당하지 않으면 자동으로 0이 할당된다.
각 원소에 숫자 또는 문자열을 할당할 수 있고, 값을 입력하지 않으면 이전 원소에서 1만큼 증가한 값이 할당된다.
열거형 타입은 객체이기 때문에 일반적인 객체처럼 다룰 수 있다.
- 원소의 이름과 값이 양방향 매핑되어 있어 값을 이용해서 이름을 가져올 수 있다.
- 원소에 문자열을 할당하는 경우에는 단방향으로 매핑된다.
enum Fruit {
Apple,
Banana = 5,
grape,
}
console.log(Fruit.Apple, Fruit.Banana, Fruit.Orange); // 0, 5, 6
console.log(Fruit[5]); // Banana함수타입
코드를 작성하는 과정에서 함수의 파라미터로 어떤 타입을 넣어야 하는지 바로 알 수 있고, 함수의 결과물을 명시할 수 있다.
- 아무것도 반환하지 않는 함수의 반환 타입 :
void - 비정상적으로 종료되거나 무한 루프로 종료되지 않는 함수의 반환 타임 :
never
function sumArr(numbers: number[]): number {
return numbers.reduce((acc, cur) => acc + cur, 0);
}
const total = sumArr([1, 2, 3, 4, 5])인터페이스
클래스 또는 객체를 위한 타입을 지정할 때 사용되는 문법
- readonly 읽기전용 속성
interface Cat {
name: string;
age?: number; // 설정을 해도 되고 안해도 되는 값
}
/* 상속받기 전 인터페이스 선언방식
interface Person {
name: string;
age?: number;
sex: female;
}
*/
interface Person extends Cat {
sex: female;
}
const cat: Cat = {
name: 'Tommy',
age: 10
}상속을 통해 확장이 필요하다면 인터페이스
Type Alias
type Cat = {
name: string;
age?: number
}
const cat: Cat = {
name: "tommy"
};인터페이스로 표현할 수 없거나 유니온 또는 튜플을 사용해야 한다면 Type Alias
Generics
여러 종류의 타입에 대해 호환을 맞춰야 할 때 사용하는 문법
- 객체 A와 객체 B를 합쳐주는 merge 함수를 만든다.
함수에서 Generics를 사용하면 파라미터로 다양한 타입을 넣을수도 있고, 타입 유추도 가능하다.
React+Ts
npx create-react-app ts-react-practice --template typescript
-
진행중인 프로젝트에 적용할 경우
npm install --save typescript @types/node @types/react @types/react-dom @types/jest -
tsc --inittsconfig.json 생성
// tsconfig.json
{
"jsx": "react",
"outDir": "./dist", // 변환된 JSX코드(=컴파일 결과)를 모아놓는 폴더
}// App.tsx
import React from 'react';
const App: React.FC = () => {
return <div className="App" />
}
export default App;npx tsc컴파일
Next+Ts
프로젝트 폴더에 tsconfig.json 파일이 있으면 타입스크립트 개발 환경이라고 인식한다.
touch tsconfig.json
npx next
Reference
- 타입스크립트 공식문서
- CRA-adding-ts
- 실전 리액트 프로그래밍 / 인사이트 / 이재승
- 벨로퍼트와 함께하는 모던 리액트 - 타입스크립트
