[TypeScript] TypeScript의 필수 문법 (기본 개념)

 TypeScript 사용하는 이유 

자바스크립트를 사용하며 접했던 모호한 에러메시지를 대신하여

타입스크립트는 엄격한 Type Rule로 인해 "에러메서지"를 친절하고 정확하게 알려줍니다.

 

TypeScript를 사용하기 위해 알아야하는 기본 문법에 대해 아래의 예시를 통해 알아봅시다 :)

 

 1. Type 지정 

: Type
string(소문자), number, boolean, null, undefined, bigint, [], {}

| (Union Type)
여러 타입 중 하나를 지정하고 싶을 경우 사용하는 Union Type 지정

// 명시적 type 부여
let 이름: string = "Kim";			// 이름이라는 변수에 string type만 지정 가능
let 이름: string[] = ["kim", "park"];		// 이름이라는 변수에 string array type만 지정 가능
let 이름: { name: string } = { name: "kim" };	// 이름이라는 변수에 object type { name(key): string type }만 지정 가능

// 자동 type 부여
let 이름 = "Kim";
이름 = "Three";

// Union Type
let 배열: (number | string)[] = [1, "2", 3];
let 객체: { data: number | string } = { data: "1" };
객체 = { data: 1 };

 

1-1. any & unknown

any와 unknown Type은 무엇이든 될 수 있는 유연한 타입입니다.

그러나 any는 TypeScript의 모든 타입 확인을 무시하므로, 실수로 인한 버그 방지를 위해서는 사용을 최소화하는 것이 좋습니다.

unknown은 타입 확인을 유지하며 어떤 타입이든 받을 수 있기 때문에, 유용하게 사용될 수 있습니다.

특징	any	unknown
타입 안정성	타입 안정성 제공 X (모든 연산과 접근 허용)	타입 안정성 제공 O (타입 확인 전까지 연산과 접근 제한)
용도	사용 지양	외부 데이터(타입이 알려지지 않는 값) 다루는 데 사용
실무적 사용 여부	사용 지양	타입 안정성을 위해 any 대신 사용

 

 2. Option 지정 

?
?: option, 필수가 아닌 선택사항 지정

let 이름: { name: string } = { name: "kim" };
let 이름: { name: string; age?: number } = { name: "three", age: 23 };
let 이름: { name: string; age?: number } = { name: "three"}; // obejct type 내 { age(key) } 선택사항

 

 3. type 

type
Type을 지정하는 데에 사용 (일반 변수와 구분하기 위해 시작하는 문자를 대문자로 선언합니다.)

let id: string | number = "three";

// ↓ 아래와 같이 변경하여 사용

type IdType = string | number;
let id: IdType = "three";

 

 4. function: param & return 

함수에서의 파라미터 및 반환값 타입 지정
Type 지정과 동일하게 :(콜론)으로 지정

function multi(x: number): number { // param: number, return: number
  return x * 2;
}

// Error: '*' only apply number
// function multi(x: number | string) {
//   return x * 2;
// }

function multi(x: number | string) {
  if (typeof x === "number") {
    return x * 2;
  }
}

 

4-1. 반환값 타입 void

함수에서 반환값의 타입을 void로 지정할 수도 있습니다.

반환값을 void로 지정한다는 것은 return을 방지한다는 의미로 사용됩니다.

 

4-2. function Type 연습

아래의 문제를 보고, 스스로 코드를 작성해본 뒤 아래의 "더보기"를 클릭하여 (유사) 정답을 확인해보세요.

 

4-2-1. 파라미터로 이름이 들어올 때에는 "안녕하세요. 이름님."을 반환하는 함수를 작성하세요.

이름이 제공되지 않을 때에는 "이름이 없습니다." 오류 메시지를 출력하세요.

function hello(name?: string) {
    if (name) {
        console.log("안녕하세요. " + name + "님.");
    } else {
        console.log("이름이 없습니다.");
    }
}

 

4-2-2. 주어진 숫자나 문자열의 길이를 반환하는 함수를 작성하세요.

function count(x: string | number): number {
    return x.toString().length;
}

 

4-2-3. 월 소득, 집 보유 여부, 매력 점수를 기반으로 600점 이상이면 "결혼 가능"을 반환하는 함수를 작성하세요.

월 소득(만원 단위)은 만원 당 1점, 집 보유(true) 시에만 500점, 매력 점수("상," "중", "하")는 "상"일 때에만 100점으로 계산하세요.

600점 미만일 때에는 아무것도 return하지 않습니다.

function marry(income: number, house: boolean, charm: string): string | void {
    const result = income + (house ? 500 : 0) + (charm === "상" ? 100 : 0);
    if (result >= 600) {
        return "결혼 가능";
    }
}

+ "아무것도 반환하지 않는다."는 의미는 자바스크립트 혹은 타입스크립트에서 "함수가 실행을 마치고 undefined를 반환한다."는 의미와 같습니다.

 

 5. type + 순서 지정 

[array], {object}, class {}
type과 함께 순서를 지정하여 사용할 수 있습니다.

 

5-1. [array]

type Member = [number, boolean];
let john: Member = [100, true];

 

5-2. {object}

type PersonObject = {
  firstName?: string;
  age: number;
};

let 한슬: PersonObject = {
  firstName: "Kim",
  age: 25,
};

let 한슬: PersonObject = {
  // firstName: option
  age: 25,
};

 

5-3. class

class Person {
  name; // 프로퍼티: 생성자 함수에 사용할 프로퍼티
  constructor(name: string) { // 생성자 함수
    this.name = name;
  }
}

 

😎 마무리

현재 자바스크립트와 함께 타입스크립트에 대해 독학하고 있는데요,

시간 나고 정리할 때마다 블로그 글을 꾸준히 올려보도록 하겠습니다.

정정해야 할 내용이 생긴다면 댓글 남겨주세요. 감사합니다 :)