📘TypeScript

JavaScript에 타입을 부여한 언어로 JavaScript의 확장된 언어입니다. MicroSoft에 의해서 개발 및 관리되고 있는 오픈 소스 프로그래밍 언어로 대규모 애플리케이션을 개발하는데 JavaScript가 어렵고 불편하다는 불만에 대응하기 위해서 개발되었습니다.

💡TypeScript를 사용하는 이유

1. 5 - 3을 해야 2가 나와야 하는데 JavaScript에서는 5 - '3'을 해도 2가 나옵니다.
   그 이유는 JavaScript는 Dynamic Typing이 가능한 언어이기 때문에 문자를 숫자로 자동 바꿈을 해주기 때문입니다. JavaScript가 동적으로 바꿔준다는 점은 편리하지만 규모가 큰 프로젝트에서는 단점일 뿐입니다.

2. JavaScript의 에러 메세지는 추상적인 반면 TypeScript는 엄격하게 타입을 체크하는 것을 알아서 해주기 때문에 에러 메세지가 정확해집니다. 그래서 TypeScript는 코드 에디터 부가기능 역할로 볼 수 있습니다.

TypeScript에 대해 알아보았으니 본격적으로 TypeScript를 설치하고 세팅하여 시작해 보겠습니다.

💻TypeScript 설치 세팅

1. npm install -g typescript

• React 프로젝트에서 TypeScript 사용할 경우
  1. 이미 있는 React 프로젝트에 설치
     => npm install --save typescript
  2. 새로운 React 프로젝트
     => npmx create-react-app 폴더 이름 --template typescript

2. 파일 이름.ts 파일 생성
3. tsconfig.json 생성 후 아래 이미지 내용 작성
   

=> ts 파일 안에서 짠 코드는 브라우저에서 인식을 하지 못 합니다. 브라우저는 무조건 JavaScript 파일만 읽을 수 있으므로 ts 파일을 js로 변환해야 사용이 가능합니다.

ts를 js로 변환하는 방법

• 터미널 창에 tsc -w 입력해 두면 자동 변환

📖TypeScript 필수 문법

타입 명칭으로 들어갈 수 있는 것들에는 string, number, boolean, null, undefine,

string 타입 지정

let 이름 : string = 'kim'

array 타입 지정

let 이름 : string[] = [ 'kim', 'park' ]

• string[]은 해당 변수에는 string이 담긴 array만 들어올 수 있다는 것을 의미

object 타입 지정

let 이름 : { name : string } = { name: "kim" }

• { name: string }은 이름이라는 변수에는 { name : string } 같은 형태인 object만 들어올 수 있다는 것을 의미
• { name? : string }은 name 옆에 물음표를 넣으면 name이라는 속성이 들어올 수도 있고 안 들어올 수도 있다는 뜻으로 즉, name 속성은 옵션이라는 의미

Union 타입

let 이름 : string | number = 'kim'

• 이름이라는 변수에 문자 혹은 숫자가 들어올 수 있다는 의미

Type alias

• 만약 타입 지정하는 것이 긴 경우 타입을 변수에 담아서 사용할 수 있는 것을 의미합니다.

type Mytype = string | number
let 이름 : Mytype = 123

함수 타입 지정

function 함수(x : string) : number {
    return x * 2
}

• 이 함수는 파라미터로 number, return 값을 number로 지정했다는 것을 의미

tuple 타입

array에 사용할 수 있는 것을 의미합니다.

type Member = [ number, boolean ]

• tuple 타입으로 무조건 첫 번째에는 number, 두 번째에는 boolean이 와야 한다는 것을 의미

let john : Member = [ 123, true ]

object에 타입 지정해야 할 속성이 너무 많을 경우

type Member = {
    name : string,
    age : string,
}

이렇게 속성을 하나하나 지정할 필요 없이 밑에 방식으로 사용할 수 있습니다.

type Member = {
    [ key : string ] : string,
}

• 모든 object 속성이라는 뜻으로 글자로 된 모든 object 속성의 타입은 string으로 들어와야 한다는 것을 의미

let john : Member = { name : 'kim', age : '123' }

class 타입 지정

class User {
    name : string
    constructor(name : string) {
        this.name = name
    }
}