TIL 29 TypeScript 기본

1. TypeScript란?

타입스크립트는 자바스크립트에 타입을 부여한 언어다. 타입스크립트는 에러를 사전에 미리 예방할 수 있고 VSC를 사용하면

코드 및 자동완성 가이드로 생산성이 증가해 프론트엔드라면 타입스크립트는 필수로 자리잡고 있다.

2. TypeScript 기본타입

원시형

let name: string = 'jeon'; // 변수 타입이 문자열
let age: number = 20; // 변수 타입이 숫자
let isLogin: boolean = true; // 타입이 불리언

배열

let numArr: number[] = [1, 2, 3]; // 타입이 배열일때 선언
let numArr: Array<number> = [10, 20, 30]; // 타입이 배열일때 선언

튜플: 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식

let arr: [string, number] = ['jeon', 20];

Any : 모든 타입에 대해서 허용한다는 의미 -> 타입을 어떤걸로 지정해야할지 애매할때 사용

let str: any = 'jeon';
let num: any = 30;
let arr: any = ['a', 2, true];

Void : 변수에는 undefined와 null만 할당하고, 함수에는 반환 값이 없다는걸 의미

let empty: void = null;
function emptyFunc(): void {
  console.log('no return');
}

3. 함수

function sumNum(a: number, b: number): number { // return 값이 number인걸 명시
  return a + b;
}

sum(10, 20); // 30
sum(10, 20, 30); // error, too many parameters
sum(10); // error, too few parameters

만약 함수에 return값이 없다면 void를 사용해줘야한다.

function noReturn(message: string): void{
	console.log(message)
}

4. 인터페이스

let person = { name: 'jeon', age: 20, city: 'seoul' };

function logAge(obj: { age: number, city: string }) {
  console.log(obj.age); // 20
  console.log(obj.city); // seoul
}
logAge(person); // 20 seoul

위 코드를 인터페이스를 통해서 작성을 하면

interface personAge {
  age: number;
  city: string;
  job?: string; // 옵션 속성으로 인터페이스에 정의되어 있는 속성을 모두 다 꼭 사용하지 않아됨
}

function logAge(obj: personAge) {
  console.log(obj.age);
  console.log(obj.city);
}
let person = { name: 'jeon', age: 20, city: 'seoul' };
logAge(person);

인터페이스를 인자로 받아 사용할 때 항상 인터페이스의 속성 갯수와 인자로 받는 객체의 속성 갯수를 일치시키지 않아도 된다. 다시 말해, 인터페이스에 정의된 속성, 타입의 조건만 만족한다면 객체의 속성 갯수가 더 많아도 상관 없다는 의미다. 또한, 인터페이스에 선언된 속성 순서를 지키지 않아도 된다.

5. 유니온 타입

유니온 타입(Union Type)이란 자바스크립트의 OR 연산자(||)와 같이 A이거나 B이다 라는 의미의 타입이다.

function logText(text: string | number) {
	console.log(text); // text에 문자열 숫자 둘 다 받을 수 있다
}

창민'S 블로그