TypeScript 시작하기

citron03·2022년 5월 3일
0

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, '안녕하세요!' ]

🍍 또한, class를 사용할 때 마치 java처럼 변수에 private나 public을 사용할 수 있다.

참고한 공식문서

🍊 타입스크립트 공식문서 : https://www.typescriptlang.org/docs/

🍋 위의 사이트의 번역 프로젝트 : https://typescript-kr.github.io/

profile
🙌🙌🙌🙌

0개의 댓글