TypeScript 란 ?

타입스크립트 ( TypeScript ) 는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다.
(JavaScript 대용품 같은 언어)

마이크로소프트에서 개발, 유지하고 있으며 “엄격” 한 문법을 지원한다.
자바스크립트 엔진을 사용하면서 커다란 애플리케이션을 개발할 수 있게 설계 되었다.
자바스크립트의 슈퍼셋이기 때문에 자바스크립트로 작성된 프로그램이 타입스크립트 프로그램으로도 동작 한다.

자바스크립트에서 타입 부분을 조금 업그레이드 해서 쓸 수 있는 자바스크립트 업그레이드 버전이라고 생각 하면 된다.

TypeScript 를 쓰는 이유

자바스크립트는 다이나믹 타이핑을 제공하는 언어이기 때문에 숫자와 문자가 만났을때 숫자로 바꿔서 연산을 하게 된다.
다이나믹 타이핑은 편리하지만 프로젝트 사이즈가 커지게 되면 오히려 단점으로 적용이 될 수 있다.

코드가 길어지면 길어질수록 자유도 & 유연성은 오히려 우리에게 좋지 않다.

그래서 TypeScript 를 쓰게 되면 이러한 것들을 에러로 잡아주게 된다.

타입스크립트는 타입 부분을 엄격하게 짚어주기 때문에 에러 메세지도 보다 더 정확 하다.
(Ex. 숫자가 들어와야 할 자리인데 문자가 들어올경우 등…)

TypeScript 설치

1. nodeJs 설치 ( 최신 버전)

2. 에디터 준비 ( vs code ..)

3. 터미널 오픈
   

    npm install -g typescript

   터미널에서 명령어까지 입력을 하고 나면 설치가 되는데 여기서 설치가 바로 되지 않고 에러가 난다면, 어떤 에러인지 찾아보고 해결하면 되지만 90% nodejs 미 설치로 인한 에러일 확률이 높다.

4. 코드 짤 폴더만들고 에디터로 폴더 오픈

5. .ts 파일 생성 후 코드 작업

6. tsconfig.json 파일 생성 후 내용 작성

{
  "compilerOptions" : {
    "target": "es5",
    "module": "commonjs",
  }
}

7. 브라우저는 .ts 파일을 읽지 못하고 무조건 자바스크립트 파일만 읽을 수 있기 때문에 ts 파일을 js 로 변환해야 사용가능 하다.

8. 터미널 오픈후

    tsc -w

   명령어 입력하고 끄지만 않으면 js 파일로 자동 변환 된다.
   .ts 파일에서 코드 짜고 저장할때 마다 생성된 .js 파일이 갱신이 된다.

간단한 변수 타입 지정

// 자바스크립트                     // 타입스크립트
let 이름 = "Park"       =>        let 이름: string = "Park"

string
number
boolean
null
undefined
bigint
[]
{}
등등 ..

let 이름:[] = ["김개발", "박코드"]

⬆️ array 안에 무조건 string이 들어와야 한다는 엄격한 타입이다.

let 이름 : {name:string} = {name: "박코드"};

⬆️ 이름 이라는 변수에 name:string 으로만 들어 올 수 있다.

{name? : string} = {}

⬆️ 물음표를 넣어줌으로써 있을수도 있고 없을 수 도 있다고 하는것이다 일종에 옵션 이다.

let 이름 : string | number = "Park"

⬆️ or 기호를 쓰면 숫자 또는 문자가 들어올거라고 선언 하는 것이다. (유니온 타입)
여러가지 응용 들이 가능 하다.

만약 타입 지정 하는 문법이 많이 길어지게 되면 이런 것들을 변수에 담아서 사용 할 수 있다.

type = Mytype = string | number
let 이름 : myType = "김개발"

마음대로 앞으로 변수에 담아서 언제든지 가져다 쓸 수 있게 된다.
타임명을 작명 할때 보통 대문자로 작명을 많이 한다 그래야 일반 변수 와 차별화를 둘 수 있다.

함수에서의 타입 지정

function 함수 (x : number) : number {
  return X * 2
}
// 파라미터로 number, return 값으로 number

⬆️ 파라미터에는 무조건 number 가 들어가줘야 하고 무조건 number 를 return 해 주어야 한다.

type Member = [number, boolean];

let john:Member = [123, false]

john 이라는 변수에는 무조건 [number, boolean] 이러한 타입이 들어가야만 한다.
array 의 첫번째는 number 두번째는 boolean 이 들어가야 한다.