🟦 [TypeScript] 타입스크립트 시작하기

💡 들어가기 앞서

• 해당 내용은 코딩애플의 빠르게 마스터하는 타입스크립트를 기반으로 작성하였습니다.
• 기반은 코딩애플의 강의지만 프론트 구현이 아닌 서버 구현을 위해 추가로 구글링 한 자료를 정리하였습니다.

📌설치 순서

1. NodeJS 설치하기
2. 터미널에서 npm을 이용하여 글로벌로 typescipt 설치하기.
   
3. 작업할 프로젝트 폴더 생성 후 작업폴더로 이동하기.
4. tsconfig.json 파일 생성하고, 원하는 옵션 넣기.
5. 작성한 코드(.ts)를 컴파일하기(.js)
   • typescript로 작성한 코드는 결과적으로 js파일로 컴파일해야 실행시킬 수 있다.
   • tsw -w를 사용하면 현재 폴더에 js파일로 컴파일하여 저장해 준다.
6. 컴파일된 파일을 node file.js로 실행할 수 있다.

📌TS 사용법

// 선언방식 변수명: 변수타입 = 값;
const name: type = value;
// 함수 선언 : 함수명(파라미터:타입):리턴타입{...}
function sum(n1: number, n2: number): number {
  return n1 + n2;
}

📌TS 사용예시

class Person {
  myName: string;
  myLastName: string;
  myHeight: number;
  myWeight: number;
  constructor() {
    this.myName = "jihwan";
    this.myLastName = "lee";
    this.myHeight = 180;
    this.myWeight = 75;
  }
  getBmi = (): number => this.myWeight / (this.myHeight / 100) ** 2;
}

let jihwan = new Person();
jihwan.myName = 1004 // error : 'number' 형식은 'string' 형식에 할당할 수 없습니다.
console.log(jihwan.getBmi()); // => 23.148

🎈이런 식으로 간편하게 사용할 수 있으며 변수를 선언할 때 JS의 편리함을 살짝 포기하고 코드의 직관성과 사전에 에러를 잡아준다는 큰 이점을 가져온다. '작은것을 버리고 큰 것을 얻음' 그리고 제일 큰 이점은 역시 내가아닌 다른 개발자가 나의 코드를 볼 때 코드를 파악하는데 들어가는 시간이 줄어든다 코드량이 커지면 커질수록 더욱 차이가 크다고 한다.

📌.ts 파일 실행하기

컴파일하지 않고 ts파일을 직접 실행할 수 있는 node모듈이 제공되고 있다!!
npm i -g ts-node으로 ts-node 모듈을 설치한 후
컴파일 되지않은 .ts 파일을 실행시킬 수 있다.
npm init으로 🗂 package.json 을 생성한 후 간편하게 실행시킬 수 있도록 정의해 보겠음.

// 🗂 package.json
"scripts": {
    "start": "ts-node index.ts"
  },

이제 간편하게 npm start로 내가 정의한 .ts파일을 실행시킬 수 있다.

이제 편하게 공부해 보자.

📎 관련 링크

• TYPE SCRIPT DOCS