TypeScript

TypeScript

마이크로소프트에서 구현한 JavaScript의 슈퍼셋(Superset) 프로그래밍 언어. 확장자로는 .ts를 사용하며, 컴파일의 결과물로 JavaScript 코드를 출력한다. 최종적으로 런타임에서는 이렇게 출력된 JavaScript 코드를 구동시키게 된다.

쉽게 이야기하면 JavaScript 문법을 사용하되 type부분을 상향해서 사용한것이라고 생각하면된다.

자바스크립트는 다이나믹 타이핑으로 문자와 숫자를 알아서 연산하는 문제가 있다.
ex)'3' + 1 = 4

타입스크립트는 이러한 문제를 잡아준다.

그리고 에러 메세지를 보다 정확하게 확인할 수 있다.
ex) apend, string error

install

1. npm init -y

2. npm install typescript --save-dev

3. tsconfig.json 파일을 생성합니다. 이어 밑의 내용을 붙여 넣습니다.

   //tsconfig.json
   //compilerOptions 내의 속성은 자유롭게 커스텀 할 수 있습니다.
   {
   "compilerOptions": {
   "target": "es6",
   "module": "commonjs",
   "sourceMap": true,
   "outDir": "./dist"
   },
   "include": [
   "src/*/"
   ]
   }

4. 파일명.ts 를 만들어 사용.

타입별 작성방법

Boolean(불리언) 타입

let isShow: boolean = true;
let isDone: boolean = false;

Number(숫자) 타입

let number1: number = 5;
let number2: number = 0.7;

String(문자열) 타입

let firstName: string = "coding";
let lastName: string = 'kim';
let longString: string = `Kimcoding is a developer.
He is 20 years old.`

Tuple(튜플) 타입

let user: [string, number, boolean] = ["kimcoding", 20, true];

Object(객체) 타입

let user: {name: string, age: number} = {
	name: "kimcoding",
	age: 20
}

Any 타입

클라이언트에서 유저로부터 받은 데이터 및 서드파티 라이브러리에서 들어오는 값인 경우 개발자가 알지 못하는 타입일 수 있는데, 타입 검사를 하지 않고자 할 때 any 타입을 사용할 수 있습니다.

let obj: object = {};

//에러가 납니다.
obj = "hello";

let maybe: any = 4;

//정상적으로 동작합니다.
maybe = true;

함수

자바스크립트와 타입스크립트 작성하는 방법을 비교해서 보자

-자바스크립트

function add(x, y){
	return x + y;
}

//arrow function
let add = (x, y) => {
	return x + y;
}

-타입스크립트

function add(x: number, y: number):number {
	return x + y;
}

//arrow function
let add = (x: number, y: number): number => {
	return x + y;
}

TypeScript는 JavaScript와 달리 매개변수의 개수에 맞춰 전달인자를 전달해야 합니다.

let greeting = (firstName: string, lastName: string): string => {
	return `hello, ${firstName} ${lastName}`;
}

//에러가 납니다.
greeting('coding');

//정상적으로 작동합니다.
greeting('coding', 'kim');

//너무 많은 매개변수를 보내 에러가 납니다.
greeting('coding', 'kim', 'hacker');

유니온 타입, 인터섹션

타입스크립트에서는 연산자를 통해 타입을 정할 수 있습니다.

-유니온 타입

function printValue(value: any): void {
  if (typeof value === "number") {
    console.log(`The value is a number: ${value}`);
  } else {
    console.log(`The value is a string: ${value}`);
  }
}

printValue(10); // The value is a number: 10
printValue("hello"); // The value is a string: hello

-인터섹션
인터섹션(Intersection)은 둘 이상의 타입을 결합하여 새로운 타입을 만드는 방법입니다. & 연산자를 사용하여 표현합니다.

interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}

type User = Developer & Person;