TypeScript 시작하기

citron03·2022년 5월 3일

html, css, js

목록 보기

24/43

C언어나 자바를 사용했었던 나에게 파이썬이나 자바스크립트는 어색한 부분이 있었다.

시간이 지나 이제는 익숙해졌지만, 여전히 자바스크립트를 사용하며 마주하는 문제가 있다.

바로, 자바나 C언어와는 다르게 변수에 type을 지정하지 않는 자바스크립트의 특성 때문에 가끔 예상치 못한 오류가 발생하는 것이다.

이러한 문제를 해결 해주는 TypeScript(타입스크립트)의 편리함을 알아가보고자 간단하게나마 타입스크립트를 사용해보기로 하였다.

설치

npm install typescript --save-dev

또는 글로벌 설치

npm i -g typescript

타입스크립트의 확장자

🥥 타입스크립트의 확장자는 .ts이다

🥥 리액트에서 컴포넌트를 표현할 땐, .jsx 대신 .tsx를 사용할 수 있다.

간단한 사용 예

변수를 선언할 때 : type으로 타입을 미리 선언한다.

for (let i: number = 0; i < 5; ++i) {
  console.log(i, typeof i);
}

/* 출력 값

0 number
1 number
2 number
3 number
4 number

*/

배열은 type 옆에 []를 작성함으로써 선언한다.

let names: string[] = ["AA", "CAT", "Zombie"];
names.push("HA HA HA");

for(let str of names){
  console.log(str);
}

/* 출력 값

AA
CAT
Zombie
HA HA HA

*/

그 이외의 다른 타입의 변수들

const float: number = 3.1415921;
console.log(float);

const same: boolean = false;
console.log(same);

const obj: object = {"hi": 1, "bye": -1}
console.log(obj);

/* 출력 값

3.1415921
false
{ hi: 1, bye: -1 }

*/

함수의 인자

const double = (num1: number, num2: string) => {
  return num1 + parseInt(num2);
}

console.log(double(100, "-260")); // -160

함수의 리턴값의 타입 역시 정해둘 수 있다.

const minus = (num1: number, num2: number): number => {
  return num1 - num2;
}

console.log(minus(100, -260)); // 360

배열을 제네릭 타입으로 선언할 수 있고, 여러 타입을 가질 수 있는 배열을 사용할 수도 있다.

const getArray = (num: number, str: string): Array<number | string> => {
  return [num , str];
}

console.log(getArray(-2, "안녕하세요!")); // [ -2, '안녕하세요!' ]