TypeScript-01

TypeScript

JavaScript에 정적타입 검사와 클래스 기반 객체 지향 프로그래밍 등의 기능을 추가하여 개발된 언어이며 JavaScript가 발전하면서 생긴 단점을 보완하기 위해 등장했다.

TypeScript 프로젝트 환경 구성하기

01 타입스크립트 설치

npm install typescript --save-dev

02 프로젝트 루트 디렉토리에 tsconfig.json 파일 생성 후 아래 내용 붙여넣기

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

이제 src 폴더 밑에 TypeScript 언어로 된 파일을 작성할 수 있다.
src 폴더에 index.ts 파일을 만들어서 TypeScript 코드 작성

TypeScript의 타입

Boolean(불리언) 타입

가장 기본적인 데이터 타입, JavaScript에서도 마찬가지로 boolean 값이라고 불리는 참(true), 거짓(false) 값.

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

Number(숫자) 타입

TypeScript에서 Number 타입을 선언하는 방식은 아래와 같다. JavaScript와 마찬가지로 TypeScript 또한 정수와 실수의 구분 없이 Number 타입 하나로 표기한다. TypeScript는 이 외에도 추가로 bigint를 지원한다.

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.`

Array(배열) 타입

TypeScript는 JavaScript처럼 값들을 배열로 다룰 수 있게 할 수 있으며, 두 가지 방법으로 배열 타입을 선언해 사용할 수 있다.

//첫 번째 방법
let items: string[] = ["apple", "banana", "grape"];

//두 번째 방법
let numberList: Array<number> = [4, 7, 100];

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;

TypeScript의 함수

JavaScript에서 함수 작성,

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

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

TypeScript로 다시 표현.

//named function
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');

전달인자를 전달하지 않거나, undefined를 전달했을 때 할당될 매개변수의 값을 정해놓을 수도 있다. 이는 JavaScript에서의 default parameter와 같은 동작을 한다.

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

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

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

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

선택적 매개변수를 원한다면 매개변수의 이름 끝에 ?를 붙임으로써 해결할 수도 있다.

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

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

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

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