TypeScript

typescript를 사용하는 이유는 뭘까?

• javascript는 파라미터와 함수가 매칭이 되지 않아도 실행이 되기도 한다.

function add(num1, num2){
console.log(num1 + num2);
}
add(); // NaN
add(1); // NaN
---- 실행됨----
add(1,2); // 3 실행됨

• 위와 같이 실행이 되면 안되는 상황에서도 javascript는 그냥 실행해버리는 경우가 많다. 즉 실제로 결과를 확인하지 않으면 에러가 생기는 것을 확인하게 어렵다.
• javascript는 동적언어로 런타임에 타입이 결정되고 그 순간에 오류를 발견하게 된다. 고로 위와 같은 에러가 생기기도 한다.
• Java나 typescript는 정적언어로 컴파일 타임에 타입이 결정되고 코드 작성시간은 길어지지만 안정적으로 코드 작성 가능하게 된다.

typescript

• typescript란 type + javascript, 말 그대로 javascript에 타입을 부여한 형태이다.
• 대규모 어플리케이션을 개발하는 데 자바스크립트가 어렵고 불편하다는 불만에 대응하기 위해 개발되었다는데...(난 이게 더 어려워...)
• 아래의 함수를 보자.

function sum(a,b) {
	return a+b;
}

• 이와 같이 설정하게 되면 코드 상으로 보면 어떤 타입의 인수를 전달받고 어떤 타입의 변환값을 리턴해야하는지 알 수 없다.
• 즉 위에서도 나왔듯이 인자가 없거나, 한개의 인자만 받거나, 별개로 숫자가 아닌 문자열을 받아도 실행이 되는 문제가 생긴다.

sum(); // NaN
sum(1); // NaN
sum("hello","world"); // helloworld

• 이러한 문제는 기존 javascript는 동적언어로 동작하기 때문에 컴파일시에 어떠한 에러도 발생하지 않고 런타임시 받은 입력값으로 타입을 결정하기에 위와 같은 문제가 발생하게 된다.
• 이를 해결하기 위해 type을 부여하게 된다. 즉 동적 언어를 정적으로 바꿔버리는 것이다.

function sum(a: number, b: number) {
	return a+b;
}

• typescript에서는 해당 인자에 type을 부여하는 방법으로 변수 뒤에 : type을 적어둔다.

type 설정법

• 변수 타입 설정

let str:string = 'hi';
let num:number = 100;
let arr:Array=[1,2,3];
let arr2:number[]=[1,2,3];
let obj:object={};
let obj2:{name:string, age:number}={
	name:'hoho',
    age:22
};

-함수 타입 설정

function add(a: number, b: number): number {
return a+b;
}
//옵셔널 파라미터
function log(a: string, b?: string, c?: string) {
 console.log(a);
}

• 이외에도 Tuple, Enum과 같은 타입도 존재
• 타입추론도 가능

나에게 한마디...

옛날에 한번 공부 시작하려다가 크게 데이고 멈췄었는데...
이번 기회에 다시 한번 제대로 시작해야지...