TypeScript

TypeScript?

TypeScript = JS + Type 문법

기존 JS의 경우

5 - '3' 

하면 알아서 숫자로 바꿔서 연산해줌
(Dynamic Typing)

But, 프로젝트 사이즈가 커지면 자유도&유연성은 우리의 적이 됨

타입 스크립은 위 코드 처럼 짜면 타입 에러 띄움

var counter = 0;
counter = '1';
//error 숫자 넣어야해요~

var obj = {
  append:123,
}

obj.apend
//error 'apend'? 'append' 아니냐?

간단하게 타입스크립트는 언어라기 보다는 코드 에디터 부가기능 정도로 볼 수도 있다.\

TS 설치법(react, vue는 따로 강의에서)

1. nodejs 설치
2. VScode 에디터 준비
3. 터미널에 npm install -g typescript
4. 코드짤 폴더 만들고 에디터로 폴더 오픈
5. 어쩌구.ts 파일 생성 후 코드 짜셈
6. tsconfig.json 생성 후 내용 작성.

터미널 tsc -w 입력해두고 어쩌구.ts 파일에 코드 짜면 지가 알아서 js파일 만들어서 변환해주고 터미널에 에러 띄워줌.

이 자동변환을 compile 이라고 하고 tsconfig.json은
옵션 설정을 하는 곳이다.
ts 파일

터미널에 뜨는 에러메시지

자동 변환된
js 파일

예시2) 객체, 배열

let 이름: string[] = ['kim', 'park']; //배열 요소 타입 지정

let 이름: { name: string } = { name: 'kim' }; // 객체 프로퍼티 타입 지정

예시3) Union type(다양한 타입)

let 이름: string | number = 123;

타입 지정 귀찮다

type 내타입 = string | number;
let 이름: 내타입 = 123;

예시3) 함수에도 가능

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

x: number는 매개변수의 타입
() {} 사이의 :number는 리턴값 타입

예시3) tuple 타입

type Member = [number, boolean];
let john: Member = [123, true];

무조건 배열의 첫번째는 넘버 두번째는 불리언

type Member = {
  name: string;
};
let john: Member = { name: 'kim' };

만약 프로퍼티가 너무 많아져서 타입 지정이 힘들 때는

type Member = {
  [key: string]: string; // 프로퍼티의 키 타입 지정
};
let john: Member = { name: 'kim', age: '123' }; 

이렇게 가능.

예시4) 클래스

class User {
  name: string; // 클래스의 name 지정
  constructor(name) {
    this.name = name;
  }
}