TypeScript 기초

TypeScript를 사용하는 이유?🤔

Javascript는 문자열과 숫자를 더할 경우, 숫자 타입의 인수 쪽을 강제적으로 타입 변환해 문자열을 만든다. 이처럼 js는 함수나 변수의 타입을 명시적으로 지정하지 않아도 동작하는 경우가 많아 예상치 못한 결과를 초래할 수 있기 때문에 이러한 문제점을 보완하기 위해 Typescript라는 언어가 등장하게 되었다!

TypeScript의 장점

• 정적타입 검사 기능을 제공하며, 코드의 가독성과 유지 보수성을 높여준다.
• 다른 개발자들이 코드를 이해하고 수정하기 쉬워짐
• 런타임에러를 최소화하고 코드 작성 시간을 단축시킴
• 인터페이스나 제네릭, 데코레이터 등의 기능을 제공하여 객체 지향 프로그래밍을 더욱 쉽게 할 수 있도록 도와줌

TypeScript의 타입✨

Boolean(불리언) 타입

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

Number(숫자) 타입 (+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(배열) 타입

//첫 번째 방법
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;

Void 타입

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

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

TypeScript의 연산자 활용 타입

유니온(Union) 타입

• 유니온 타입은 둘 이상의 타입을 합쳐서 만들어진 새로운 타입으로 | 연산자를 이용하며, 자바스크립트의 || (OR) 연산자와 같이 “A이거나 B이다”라는 의미의 타입
• 유니온 타입을 사용하면 타입을 추론할 수 있기 때문에, 타입에 관련된 API를 쉽게 자동완성으로 얻어낼 수 있다
• 코드의 가독성을 높여준다

function printValue(value: number|string): 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;