[엘리스 SW 엔지니어 트랙 2기 / TIL] Week 05 - 타입스크립트

1. 오늘 공부한 내용  📝

타입스크립트

자바스크립트를 확장하여 타입을 입힌 스크립트

• 마이크로소프트가 내부적으로 개발하다가 2012년 오픈소스로 공개
• 타입 지정을 통해 에러를 사전에 방지
• 컴파일을 통해 자바스크립트로 변환
• 자바스크립트에 추가된 문법을 쓸 수 있음

function sum(num1, num2) {
	return num1 + num2;
}

let a = 10, b = 20;
sum(a, b); // 30
b = "30";
sum(a, b); // 1030

• 자바스크립트는 웬만해서 에러를 뱉지 않음
• 즉, 의도한 바와 다르게 실행될 수 있음
• 이를 미리 방지하기 위해서 등장
• 타입을 미리 정의해서 에러를 방지
• 또한 처음/나중에 볼 때, 가독성이 상승

 

타입스크립트를 써야하는 이유

• 사전에 미리 에러를 방지할 수 있다
• 협업에 매우 유리하다
• 자바스크립트와 100% 호환된다
• 대부분 라이브러리가 지원해준다
• 타입을 미리 선언해, 자동완성 기능을 사용할 수 있어 개발 속도 향상이 된다
• 점진적으로 변환이 가능하다

tsconfig.json

configure task

ts-node

code runner

 

타입스크립트에서 지원하는 타입

let a: number = 10;
let b: string = "example";
let c: boolean = true;
let d: number[] = [1, 2, 3];
let e: Array<string> = ["a", "b", "c"];
let f: any = "아무 타입";
let g: object = {}
function f(): void {}

function sum(num1: number, num2?: number): number {
	return num1 + num2;
}

sum(1);
sum(1, 2);
sum(1, 2, 3);

const userData: {name: string; age: number; address: string } = {
	name: "John",
	age: 28,
	address: "Busan"
};

Interface

interface IUser {
	name: string;
	age: number;
	address: string;
}

const userData: IUser = {
	name: "John",
	age: 28,
	address: "Busan"
};

interface IUser = {
	name: string;
	readonly age: number;
}

// 상속 지원
interface IElice extends IUser {
	id: string;
	getName: () => string;
}

generic

function print<T>(value: T) {
	console.log(value);
}
print<string>("hello");
print<number>(100);
print<object>({
	a: 1,
	b: 2,
});

 

2. 어려웠던 내용  🤯

3. 궁금한 내용 / 부족했던 내용  🧐

4. 느낀 점 🤔