Typescript 필수 문법 & Settings

🟦 TypeScript를 사용하는 이유

타입스크립트는 자바스크립트의 타입 부분을 업그레이드해서 사용하고 싶을때 설치하여 일종의 자바스크립트의 대용품으로 사용한다.

자바스크립트는 Dynamic typing을 지원하는 언어로 작은 개발 시 편리했지만 큰 프로젝트 진행시 단점이되어 type 관련되어 버그들이 많이 발생한다. 타입스크립트를 사용하면 에러메시지도 더 정확해진다.

🟦 TypeScript Settings

• TypeScript 설치

npm install -g typescript

• tsconfig.json 파일 생성 후 코드 작성
  : tsconfig.json 타입스크립트를 자바스크립트로 컴파일 시 옵션 설정이 가능하다.
  : target 은 자바스크립트 버전 지정 가능 하다.(최신버전 esnext )
  : module 은 자바스크립트 문법 버전 지정 가능 하다.

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

• 타입스크립트 파일을 자바스크립트 파일로 변환해야 사용이 가능하다.
  다음 명령어는 자동으로 자바스크립트 언어로 변환해주는 명령어이다.
  tsc -w 입력하면 자동으로 변환이되며 파일 사용시 변환된 자바스크립트 파일을 사용하면 된다.

tsc -w

🟦 TypeScript 필수 문법

• 간단한 변수 타입 지정 가능

let name :string = "you";

: 이 변수에는 string(문자) type 만 들어올 수 있다.

• array 타입 지정

let name :string[] = ['you', 'me'];

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

• object 타입 지정

let name :{ name? : string } = { name : 'su' };

: name? name이라는 속성이 들어올 수도 있고 아닐수도 있다.

• 다양한 타입이 들어올 수 있게 하려면 Union type

let name : string | number = 123;
let name : string[] | number = 123;

• 타입 변수에 담아 사용이 가능 Type alias

type Name = string | number;

let name : Name = 123;

• 함수 타입 지정 가능

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

: 파라미터에 타입을 지정하고 싶다면 함수(x :number)
: return 값 타입 지정하고 싶다면 function 함수(x:number) :number
: (x :number) 이 함수는 파라미터로 number, return 값으로 number이다.

• array에 사용 가능한 tuple 타입

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

: 무조건 첫번째 자리는 number, 둘째는 boolean이다.

• object에 타입 지정해야 할 속성이 너무 많으면,

type Member = {
	name : string 
}
let john : Member = { name : 'you' }

type Member = {
	[key :string] : string,
}
let john : Member = { name : 'you', age : '123' }

: key :string 모든 object 속성
: [key :string] : string, 글자로 된 모든 object 속성의 타입은 string

• class 타입지정 가능

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