Typescript 쓰는 이유 및 필수 문법

 

TypeScript 쓰는 이유

 

1. Javascript는 Dynamic Typing 이 가능하다. : 코드를 길게 짤 때는 자유도와 유연성이 독이 된다. 

// Javascript
5 - '3'

// 연산 가능
// 원래는 숫자-숫자만 가능하지만 JS가 알아서 '3'을 숫자로 바꿔준다.
// 프로젝트 규모가 커지면 단점. 관리하기 힘듬.

ts 는 type 을 엄격하게 검사해준다.

// Typescript
5 - '3'

// TS Error : 문자랑 숫자를 빼는게 이상하다. 수정 요망.

2. TypeScript 는 에러메세지를 자세하게 뿌려준다.

Javascript Case

Typescript Error Message 2

Typescript Error Message 2

 

TypeScript 는 Javascript 와 문법이 거의 동일하기 때문에 코드 에디터 부가 기능 역할로 봐도 충분하다.

 

Typescript 필수 문법

 

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

let 이름 :string = "kim";
// 이 변수에는 string(문자) type 만 들어올 수 있다.

숫자 타입 삽입 시도 시 해당 에러 발생

타입으로는 string, number, boolean, null, undefined, bigint, [], {} 등 가능

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

// 해당 변수에는 string이 담긴 array만 들어올 수 있다.

let 이름 : {name : string} = {name: 'kim'};
// object 형식 선언 문법
// {name? : string} 으로 선언해주면 name 속성은 옵션이라는 문법

let 이름 : string | number = 'kim';
// 다양한 타입이 들어올 수 있게 하려면 Union Type 사용

let 이름 : string | number = 123;

2. 타입을 변수에 담아서도 사용할 수 있음. (Type Alias)

type Name = string | number;

let 이름: Name = 123;

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

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

// return type 도 타입 지정해주고 싶을 때
function 함수(x:number) :number {
  return x * 2
}

4. array 에 쓸 수 있는 tuple 타입

type Member = [number, boolean];
// 무조건 첫번째 인자는 number
// 두번째 인자는 boolean 으로 주어야 한다.
let john:Member = [123, true];

5.  if) object 에 타입 지정해야할 속성이 너무 많으면 ? 

type Member = {
  [key : string] : string,
  // 글자로 된 모든 object 속성의 타입은 string.
};
let john:Member = { name : 'kim' };

6. class 타입 지정 가능

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

// typescript의 경우 변수를 먼저 지정해주어야 하는 등
// 문법이 조금 다른 케이스가 있음.

이런 것들 외에도 Typescript 에서만 지켜야할 코딩 룰도 있고, typescript 문법 외의 기능도 많음.