타입스크립트 입문

Javascript는 dynamic typing 특성 때문에 코드작성시 문제가 생긴다.
(코드의 길이가 길어질수록 자유도와 유연성은 방해만 된다)
따라서 Typescript를 통해 타입을 엄격히 검사해주는게 중요하다.

Typescript 장점

• 에러메세지 퀄리티가 좋아진다.
• 가끔은 오타 교정도 해준다.
  ex) Did you mean 'append'?
• 언어보다 에디터 부가기능 역할

Typescript 설치

1. Nodes 설치
2. VScode 에디터 설치
3. 터미널에 Npm install -g typescript 설치
4. .ts파일 생성하고 코드짜기
5. Tsconfig.json 생성 후 내용작성

cf) 컴파일할때, 옵션들을 tsconfig.json에서 사용한다.
어떤버전 js문법으로 쓸건지 정할 수도 있다.

{ “compilerOptions” : {
	“Target” : “es5”, 
	“Module” : “commonsjs”, 
	}
}

참고 : ts파일을 js파일로 바꿔야 사용 가능하다.
터미널켜서 tsc-w 입력하면 js로 자동변환된다. (컴파일)

타입스크립트 특징

1. 간단한 변수 타입지정이 가능하다.

Let 이름 : string = ‘Kim’ ; 

2. array 타입지정이 가능하다.

Let 이름 : array  = [‘Kim’, ‘park’];

Let 이름 : string[]  = [‘Kim’, ‘park’];

• 이 뜻은 이 변수에는 string이 담긴 배열([])만 들어올 수 있다는 뜻이다.

3. object 타입지정

let 이름 : { name : string } = {name : “Kim”}

let 이름 : { name? : string } = { }

• ?는 속성이 불확실할때 써준다.

4. 문자, 숫자 둘다 들어올때 (union type)

let 이름 : string | number = 123;  

5. 타입은 변수에 담아 쓸 수 있다.

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

• type명을 작성할땐 대문자로 작명한다.

6. 함수에 타입지정이 가능하다.

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

7. 어떤 타입이 Return 될지도 지정이 가능하다.

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

8. array에 쓸 수 있는 tuple 타입

Type Member = [number, boolean];
Let john:Member = [123, true] 

• 무조건 첫번째는 number, 두번째는 boolean이라는 뜻이다.

9. object에 타입지정해야할 속성이 너무 많을 때

Type Member = {
 name : string 
}
Let john : member = {name : ‘Kim’}

Type Member = {
[key : string]  : string 
.
.
.
}
let John : Member = { name : 'kim', age : '123' }

10. Class 지정

Class User { 
  name : string;
  Constructor(name : string) {
  this.name = name;
  }
}