코딩애플 유튜브 영상을 보고 정리한 내용입니다.

1. 타입스크립트를 쓰는 이유

타입스크립트는 새로운 언어가 아닙니다. 기존 자바스크립트 언어에서 타입부분을 업그레이드해서 사용하는 언어입니다. (TypeScript = JavaScript + Type 문법) 자바스크립트는 Dynamic Typing 을 지원해서 아래처럼 숫자와 문자를 빼도 오류가 나지 않는데,

// javascript

5 - "3" // 문자 3을 숫자로 인식해서 계산을 해주는

이게 편리할 순 있지만 이렇게 자유도가 높은 것은 규모가 커질수록 오류를 찾기 어려워서 위험합니다. 타입 스크립트를 쓰면 이런 에러를 확인해 주는 데, 엄격하게 타입을 체크하므로 에러 메시지를 비교적 정확하게 알려줍니다. 그래서 타입스크립트를 언어보다는 언어 오류를 잡아주는 에디터 부가기능의 역할로 보기도 합니다.

2. 타입스크립트 설치하기

2-1. 바닐라 js 로 개발시 타입스크립트를 사용하려면

Nodejs 최신버전을 설치하고 터미널에서 아래 명령어로 타입스크립트 컴파일러를 설치합니다. (에러가난다면 앞에 sudo 를 붙여서 진행하세요.)

npm install -g typescript

이제 작업 폴더에서 .ts 파일을 만들어서 타입스크립트를 작성할 수 있습니다. 이때 또 만들어야 할 것이 .tsconfig.json 파일로 ts 를 js 로 컴파일 할 때 옵션을 넣어둡니다.

// .tsconfig.json

{
    "compilerOptions": {
        "target": "es5", // 버전
        "module": "commonjs", 
    }
}

ts 파일로 돌아가서 작성한 코드는 브라우저로 인식을 못하므로 js 파일로 변환해야 합니다. 터미널에서 아래 명령어를 입력하면 됩니다. 해당 기능을 끄지 않으면 ts 를 자동으로 js 로 컴파일 해줍니다.

tsc -w 

2-2. 리액트에서 사용하려면

이미 있는 리액트 프로젝트에 설치한다면 터미널에서 아래 명령어를 실행합니다.

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

리액트 프로젝트를 새로 만든다면 새로운 작업폴더를 만들고 에디터와 터미널을 오픈하고 아래 명령어를 실행합니다.

npx create-react-app my-app --template typescript

3. 타입스크립트 문법

3-1. 변수 타입 지정

변수명 오른쪽에 : type 을 지정할 수 있습니다. 해당 타입이 아닐 때 에러가 납니다.

let name : string = 'kim'; 

변수 타입으로 들어갈 수 있는 것들은 string number boolean null undefined bigint [] {} 등이 있습니다.

// 배열인데 배열안에 string 만 담을 수 있음
let name : string[] = ['kim', 'park'] 

// 객체는 아래처럼, name 의 value 로 string 만 올 수 있음
let name : {name : string} = {name : "kim"}

// name 속성을 옵션이라고 표기하고 싶다면, ? 추가
let name : {name? : string} = {name : "kim"}

다양한 타입이 들어올 수 있게 하려면, Union type 으로 지정합니다.

// string 또는 number를 사용
let name : string | number = 123 

// string이 가득 담긴 배열이라면
let name : string[] | number = 123

타입은 변수에 담아서 쓸 수도 있습니다. 타입 명은 보통 첫글자를 대문자로 합니다.

type Phone = string | number;

let num : Phone = 010222020;

함수를 만들 때도 타입 지정이 가능합니다. 파라미터와 리턴값이 있을 때 각각 타입 지정을 할 수 있습니다. 파라미터는 괄호 안에 리턴값의 타입 지정은 괄호 바깥 오른쪽에 콜론을 넣고 지정합니다.

// number 가 들어와서 number 가 나와야 하는 함수라면

function typeAction(x : number) : number {
    return x * 2;
}

배열은 tuple 타입으로 인자를 지정할 수 있습니다.

// 해당 배열의 첫 번째는 무조건 number, 둘 째는 무조건 boolean 

type Member = [number, boolean]; 타입 지정을 배열로 해주면,

let john : Member = [123, true];

객체를 만들 때 타입 지정할 속성이 많다면, 한번에 지정할 수 있습니다.

// key 가 string 인 모든 값의 value 는 string 이다. 

type Member = {
    [Key : string] : string, // 배열 표시 아님
}

let john : Member = { name : 'kim' }

클래스 문법도 타입 지정이 가능합니다.

class User {
    name : string; // 이렇게 타입을 지정하고
    constructor(name : string){ // 여기도 한번 더 써주는 것이 안전
        this.name = name;
    }
}

이렇게 문법만 정의한다고 실력이 늘진 않습니다. 실제로 코드를 짜봐야 합니다. 타입스크립트에서만 지켜야하는 코딩 룰이나 타입 문법 이외에 것들이 많습니다.