TypeScript란? 그 문법은?

TypeScript란?

JavaScript + Type

 

---

TypeScript를 쓰는 이유

1. Type이 엄격

JavaScript는 Dynamic Typing을 지원하기에

알아서 데이터 타입을 바꿔주며 오류가 발생하게 됨

 -> 프로젝트가 커지면 문제가 발생할 확률 높아짐

 

2. 에러 메세지가 구체적

JavaScript의 경우 추상적인 에러가 많아 추적이 어려움

TypeScript는 오타, 타입 오류에 대해 에러를 반환함

---

TypeScript 설치

1. nodejs 설치

https://nodejs.org/ko/download/

다운로드 | Node.js

 

2. VScode 에디터 준비

 

3. 터미널에 명령어 입력

npm install -g typescript

-> 오류 발생 시 nodejs 재설치 등 확인

 

4. 프로젝트 폴더 생성 후 .ts 파일 생성해 코드 작성

 

5. tsconfig.json 생성해 하단 내용 작성

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

   -> TS -> JS 컴파일에 대한 옵션 설정 가능

 

6. 터미널에 tsc -w 입력시 자동으로 JS 변환

  -> ts는 브라우저가 인식하지 못함(JS로 변환 필요)

---

TypeScript 문법

1. 변수 타입 지정

let name : string = 'octopus';
name = 123; //타입 에러 발생

  -> 이외에도 number, null, boolean, undefined, bigint, [], {}...

 

2. array 타입

let address : string[] = ['Seoul','Incheon'];
//특정 타입 들어오는 array 타입

 

3. object 타입

let person : {name : string} = {name : 'octopus'};
//뒤에 들어오는 내용과 동일하게 작성 후 변수에 따른 타입 지정

let person : {name? : string} = {};
//? 입력시 옵션으로 설정할 수 있음

 

4. union 타입

let age : string | number = 123;
//다양한 타입 지정 가능

 

5. type alias

type MYTYPE = string | number;
let hobby : MYTYPE = 'baseball;
//타입을 변수에 담아 사용 가능(변수와 차별화 위해 일반적으로 대분자로 사용)

 

6. 함수의 타입 지정

function Hello(hi : string) : string{ 
	return hi + "Hello";
}

 

7. tuple 타입(array에 사용 가능)

type Member = [number, boolean];

let octopus : Member = [123, true];
//들어가야 하는 내용의 타입이 순서대로 맞춰져야 함

 

8. Object에 타입을 지정해야 할 속성이 많을  경우

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

 

9. class 타입 지정

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