[Typescript] 타입스크립트 시작하기

왜 타입스크립트를 사용하는가?

• 우리가 쓰는 브라우저들은 타입스크립트를 이해하지 못한다. 따라서 자바스크립트로 변환해야 실행이 가능하다 왜 이런 번거로움을 감수하고 타입스크립트를 쓰는걸까?

function add(num1, num2){
	console.log(num1 + num2)
}
add();
add(1);
add(1,2);
add(3,4,5);
add('hello', 'world');

• add(1,2) 를 제외하고는 원하는 사용방식도 아니며 원하는 값도 얻을 수 없었다.
• 하지만 자바스크립트는 아무런 경고도 주지 않았고 개발자의 실수임에도 불구하고 문제없이 코드가 실행되었다.
• 타입스크립트는 변수의 타입을 명시할 수 있고 이를 통해 에러를 찾아낼 수 있다.
• 타입스크립트는 쉽게말해 코드 에디터 부가기능이라고 보면 된다.

Javascript(동적언어) : 런타임에 타입 결정 / 오류 발견
Java/Typescript(정적언어) : 컴파일 타임에 타입 결정 / 오류 발견

---

Typescript 테스트 해보기 : https://www.typescriptlang.org/play

타입스크립트에서는 위와 같이 개발자의 실수들을 명시해준다.
변수의 타입을 명시하려면 변수:타입명 으로 작성하면 된다.

function add(num1:number, num2:number) {
    console.log(num1 + num2);
}

---

타입스크립트 설치

• html/css

npm install -g typescript

• 이미 존재하는 React앱에 설치

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

• React앱 생성 시 함께 설치하기

npx create-react-app my-app --template typescript

• ts파일 작성 후 js파일로 컴파일하기
  -w 옵션을 주어 watch 모드로 실행 : 저장할 때마다 자동으로 js파일을 갱신

tsc (파일명) -w

---

기본 타입

• 변수

let age:number = 30;
let isAdult:boolean = true;
let name:string = 'kim';

• 배열

let a:number[] = [1,2,3];
let a2:Array<number> = [1,2,3];

let week1:string[] = ['mon', 'tue', 'wed'];
let week2:Array<string> = ['mon', 'tue', 'wed'];

• 객체

let nameObj:{name:string} = {name:'kim'};
let nameObj:{name?:string} = {name:'kim'}; //name속성이 들어오는 것이 불확실 하다면..

• 튜플 : 배열 n번째 요소에 타입 지정해주기

let b:[string, number]; //b[0]은 string b[1]은 number 자료형이 된다.
b = ['z', 1];

b[0].toLowerCase();
b[1].toLowerCase(); //error

• union type : 다양한 타입이 들어올 수 있음

let test:string|number = 'kim';

가능한 타입이 많다면 따로 빼서 선언할 수도 있다.(보통 대문자로 시작)

type MyType = string|number;

let name:MyType = 'kim';

• 함수

function 함수명(x:파라미터 타입) : 리턴 값 타입 {
    return x + 3;
}

function Hello(x:number) : number {
	return x + 3;
}