[TypeScript] - TypeScript 알아보기!

💡 TypeScript란?

TypeScript는 마이크로소프트에서 개발한 JavaScript의 상위 집합(Superset) 언어입니다.

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

 

TypeScript를 사용했을 시 장점

• TypeScript는 정적타입 검사 기능을 제공하며, 코드의 가독성과 유지 보수성을 높여준다.
• 이를 통해 개발자는 런타임 에러를 최소화하고, 코드 작성 시간을 단축하며, 협헙 시 코드의 가독성을 높일 수 있다.
• TypeScript는 ES6의 문법을 포함한 최신 JavaScript 문법을 지원하며
• 인터페이스(Interface), 제네릭(Generic), 데코레이터(Decorators) 등의 기능을 제공하여 객체 지향 프로그래밍을 보다 쉽게 할 수 있도록 도와준다.

 

💡 TypeScript의 타입 

 

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

Array(배열) 타입

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

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

Tuple(튜플) 타입

TypeScript에서 튜플 타입을 사용하면 요소의 타입과 개수가 고정된 배열을 표현할 수 있다.

모든 요소가 전부 같을 필요는 없지만, 배열의 index마다 타입이 정해져 있기 때문에 정확한 index에 접근할 필요가 있다.

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

Object(객체) 타입

TypeScript에서 object 타입은 모든 객체를 수용하는 타입으로, 객체의 프로퍼티 타입들이 any로 지정되기 때문에 어떠한 프로퍼티라도 추가할 수 있다.

따라서 객체의 프로퍼티 타입들을 각기 명시해 주는 것이 훨씬 좋다.

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

 

💡 TypeScript의 함수

 

TypeScript에서 함수를 표현할 때는 매개변수의 타입과 반환 타입을 명시해야 한다.

// JavaScript 함수
function add(x, y){
	return x + y;
}

// TypeScript 함수
function add(x: number, y: number):number {
	return x + y;
}

 

만일 함수에 리턴값이 없다면, void를 사용하여 작성할 수 있다. 이 또한 타입 추론 기능을 활용하지 않는다고 가정했을 때 필수!!

let printAnswer = (): void => {
	console.log("YES");
}

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

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

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

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

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