[블로깅] TypeScript 1탄 (환경 구축 & 문법: 타입, 함수, 연산자 활용 타입)

WAYPIL·2023년 5월 30일

코드스테이츠-블로깅과제

목록 보기

14/15

코드스테이츠 부트캠프 프론트엔드 44기
Section 4 Unit 5 : [TypeScript] 기초

환경 구축

npm install typescript --save-dev

프로젝트 디렉토리에 타입스크립트 설치
ESLint 설치
Prettier 설치
프로젝트 디렉토리 최상단에 tsconfig.json 및 .eslintrc.js 파일 생성

자료형(타입)

1. Boolean

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

2. Number

let number1: number = 5;
let number2: number = 0.7;

int+float.
TypeScript에서는 추가로 bigint도 지원한다.

3. String

let firstName: string = "coding";
let lastName: string = 'kim';
let longString: string = `
	Kimcoding is
	a developer.
	He is 20 years old.
`;

4. Array

let items: string[] = ["apple", "banana", "grape"];
let items: Array<string> = ["apple", "banana", "grape"];

let shoes: Array<string, number> = ["Nike", 78, "Asics", 34];  // 에러: type 'Array<T>' requires 1 type argument(s).

5. Tuple

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

요소의 타입과 개수가 고정된 배열. Python의 Tuple과는 다르다!

6. Object

let obj: object = {};

이 경우 객체 내부의 프로퍼티 타입(들)이 any가 되기 때문에 아무 자료형이나 막 추가할 수 있다. 이는 타입 안정성을 보장하지 않기 때문에 비추천. 그래서 프로퍼티 타입들도 각기 명시해 주는 게 좋다. TypeScript의 객체는 key-value의 구체적인 타입까지도 지정할 수 있다.

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

참고로 객체 리터럴은 명시한 프로퍼티만 지정할 수 있다. 아래의 isDeveloper는 리터럴에 명시된 속성이 아니므로 에러가 발생한다.

let user: {name: string, age: number} = {
	name: "kimcoding",
	age: 20,
    isDeveloper: false  // 에러 발생: 
}

7. Any

아무 타입 or 단정할 수 없는 타입. C#의 var과 비슷하다.

대표적으로 어떠한 변수/값의 타입을 단정할 수 없는 경우에 사용한다. 예를 들어 유저로부터 받은 데이터나 서드파티 라이브러리에서 들어오는 값의 경우, 개발자가 알지 못하는 타입일 수 있다. 이때 타입 검사를 무시하고자 할 때 any 타입을 사용할 수 있다.

let maybe: any = 4;

let obj: object = {};
obj = "hello";  // 에러 발생

let maybe: any = 4;
maybe = true;  // 정상 동작

존재하지 않는 메서드/프로퍼티로 접근해도 에러가 나지 않는다. 대신, 단 무조건 undefined가 반환된다.

let maybe: number = 4;
console.log(maybe.length);  // 에러 (number 타입은 length를 가질 수 없다는 내용)

let maybe: any = 4;
console.log(maybe.length);  // undefined

let maybe: any = ['a', 'b'];
console.log(maybe.length);  // 2

또한 타입의 일부만 알고, 전체를 모르겠는 경우에도 유용하다. 예를 들어서 여러 타입이 섞인 배열을 받고자 할 때 유용하다.

let list: any[] = [1, true, "free"]; 
list[1] = 99;

위 코드의 경우 any[1]은 boolean 타입이지만, 리터럴은 any이기 때문에 number 타입으로 재할당할 수 있다.

8. Never

아무 것도 아닌 타입 or 성립할 수 없는 타입 or 할당 불가능한 타입.

let value: string & number;

value = 'hello';   // Type 'string' is not assignable to type 'never'.
value = 123;       // Type 'number' is not assignable to type 'never'.
value = true;      // Type 'boolean' is not assignable to type 'never'.
value = null;      // Type 'null' is not assignable to type 'never'.
value = undefined; // Type 'undefined' is not assignable to type 'never'.

함수

function sum(x: number, y: number): string {
  return `값: ${x + y}`;
}

const sum = (x: number, y: number): string => {
	return `값: ${x + y}`;
}

만약 함수에 리턴값이 없다면, 반환 리터럴에 void를 사용한다.

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

매개변수의 개수에 맞춰 전달인자를 전달해야 한다.

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

greeting('coding');  // 에러
greeting('coding', 'kim');  // 정상 작동
greeting('coding', 'kim', 'hacker');  // 에러

매개변수 기본값(default parameter)은 다음과 같이 사용한다. 참고로 TypeScript는 기본값이 있는 파라미터의 타입을 생략할 수 있다.

let greeting = (firstName: string, lastName: string = "kim"): string => { ... }
let greeting = (firstName: string, lastName = "kim"): string => { ... }

선택적 매개변수를 원한다면 매개변수의 이름 끝에 ?를 붙이면 된다.

let greeting = (firstName: string, lastName?: string): void => {
	console.log(`hello, ${firstName} ${lastName}`);
}

greeting('coding');  // "hello, coding undefined"
greeting('coding', 'kim');  // "hello, coding kim"

참고로 선택적 매개변수를 몰라서 아래처럼 쓰면 절대 안 된다. 100% 에러 난다.

let greeting = (firstName: string, lastName = undefined):  // lastName에 string 넣으면 에러
let greeting = (firstName: string, lastName: string = undefined):  // Type 'undefined' is not assignable to type 'string'.

연산자 활용 타입

Union (|)

let value: string | number | boolean;

function printValue(value: number|string): void {
  if (typeof value === "number") {  // 타입 가드(Type Guard)
    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

(매개)변수가 두 가지 이상의 타입을 지정하고 싶을 때 Union을 사용한다. 단 타입 충돌을 방지하기 위하여 if문으로 각 타입마다 명령어를 분리해야 하는데, 이를 타입 가드(Type Guard)라고 부른다.

interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}

function askSomeone(someone: Developer | Person) {
  if ('skill' in someone) {  // 타입 가드(Type Guard)
    console.log(someone.skill);
  } else if ('age' in someone) {
    console.log(someone.age);
  }
}
askSomeone({name: '김코딩', skill: '웹 개발'});
askSomeone({name: '김코딩', age: 20});

Intersection (&)

두 가지 이상의 타입을 결합하여 사용하는 것. 하나의 단일 타입으로 취급되기 때문에 타입 가드가 필요 없다.

interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}

function askSomeone(someone: Developer & Person) {
  console.log(someone.age);
  console.log(someone.name);
  console.log(someone.skill);
}

askSomeone({name: '김코딩', skill: '웹 개발', age: 20});