타입 스크립트의 타입들 [0]

breakfast_wu·2022년 3월 5일

typescript

TypeScript

목록 보기

1/1

이 글은 타입스크립트 공식 문서를 번역하여 작성했다.
참고로 내가 보려고 정리한 글이다.

Everyday Types [0]

1. 원시 타입 : string, number, boolean

원시 값(primitive, 또는 원시 자료형)이란 객체가 아니면서 메서드도 가지지 않는 데이터를 말한다. 이 타입들은 JavaScript에서 각 타입별 값에 typeof 연산자를 사용하였을 때 얻을 수 있는 것과 동일한 이름이다.

string은 " " 에 들어가는 문자열 값을 나타낸다.
number는 숫자를 나타내고 int, float과 같은 것은 존재하지 않는다.
boolean은 true와 false 두 가지 값을 갖는다.

const str = "안녕 세계야";
const str: string = "안녕 세계야";

const num = 25;
const num: number = 25;

const bool = true;
const bool: boolean = false;

2. 배열

["안녕", "얘들아", "할게", "산더미구나"] 와 같은 배열의 타입을 지정할 때 string[] 구문을 사용할 수 있다. 이 타입은 Array<string>과 같은 형태로 적을 수 있다.

    let strArr: string[] = ["얘들아", "할게", "산더미구나"];
  	const numArr: Array<number> = [1, 2, 3, 4, 5];
    const newArr = Array<string> ("인생이","쉽지 않구나"); // 되긴 하는데 굳이 이렇게 안쓸듯

3. any

TypeScript에는 any라고 불리는 특별한 타입이 있으며, 특정 값으로 인하여 타입 검사 오류가 발생하는 것을 원하지 않을 때 사용할 수 있다.

어떤 값의 타입이 any이면, 해당 값에 대하여 임의의 속성에 접근할 수 있고(이때 반환되는 값의 타입도 any), 함수인 것처럼 호출할 수 있고, 다른 임의 타입의 값에 할당하거나 할당 받는것이 가능하다.

let obj: any = { x: 0 };
// 아래 이어지는 코드들은 모두 오류 없이 정상적으로 실행.
// `any`를 사용하면 추가적인 타입 검사가 비활성화,
obj.foo();
obj();
obj.bar = 100;
obj = "hello";
const n: number = obj;

any 타입은 코드상의 특정 라인에 문제가 없다고 TypeScript를 안심시킨다는 목적 단지 하나 때문에 긴 타입을 새로 정의하고 싶지 않을 때 유용하게 사용할 수 있다.

noImplicitAny

타입이 표기되어 있지 않아, 타입 추론을 할 수 없을 때 TypeScript는 해당 변수의 타입을 any로 대체한다. 하지만 이런 상황은 보통 선호되지 않는다. any는 타입 검사가 이루어지지 않기 때문이다.
따라서 컴파일러 플래그 noImplicitAny를 활성화하면 TypeScript는 any를 추론 할 때마다 오류를 발생시킨다.
( tsconfig.json 파일에서 "noImplictAny": true 설정해주면 활성화)

하지만 나는 아직 조빱이므로 any타입을 허용하도록 하겠다

4. 변수에 대한 타입 표기

const 또는 let 을 사용하여 변수를 선언할 때, 변수의 타입을 명시적으로 지정하기 위하여 타입 표기를 추가할 수 있으며 이는 선택 사항이다.

let myName: string = "Alice";

TypeScript는 int x = 0;과 같이 “타입을 왼쪽에 쓰는” 식의 표기법을 사용하지 않는다. 타입 표기는 항상 타입의 대상 뒤쪽에 위치한다.

하지만 대부분의 경우, TypeScript는 자동으로 코드 내의 있는 타입들을 추론하고자 시도한다. 예를 들어, 변수의 타입은 해당 변수의 초깃값의 타입을 바탕으로 추론된다.

// 'myName'은 'string' 타입으로 추론.
let myName = "WhoAmI";

5. 함수

TypeScript에서는 함수의 입력 및 출력 타입을 지정할 수 있다.

1) 매개변수 타입 표기

함수를 선언할 때, 매개변수 타입은 매개변수 이름 뒤에 표기한다.

// 매개변수 타입 표기
function 함수이름(매개변수 이름: 매개변수 타입) {
	// 함수 로직
}

매개변수에 타입을 표기하지 않았더라도, 여전히 TypeScript는 올바른 개수의 인자가 전달되었는지 여부를 검사한다.

2) 반환 타입 표기

반환 타입 또한 표기할 수 있다. 반환 타입은 매개변수 목록 뒤에 표기한다.

function 함수이름(): 반환타입 {
  return 26;
}

변수의 타입 표기와 마찬가지로, 반환 타입은 표기하지 않아도 되는 것이 일반적이다. TypeScript가 해당 함수에 들어있는 return 문을 바탕으로 반환 타입을 추론할 것이기 때문이다. 위 예시에서 사용된 타입 표기는 큰 의미를 갖지 않는다.

때에 따라 문서화를 목적으로, 또는 코드의 잘못된 수정을 미연에 방지하고자, 혹은 지극히 개인적인 선호에 의하여 명시적인 타입 표기를 수행하는 코드도 존재한다.
본인은 되도록 사용하지 않을 예정.

3) 익명 함수

익명 함수는 함수 선언과는 조금 다르다. 함수가 코드상에서 위치한 곳을 보고 해당 함수가 어떻게 호출될지 알아낼 수 있다면, TypeScript는 해당 함수의 매개 변수에 자동으로 타입을 부여한다.

아래의 예시를 보자.

// 아래 코드에는 타입 표기가 전혀 없지만, TypeScript는 버그를 감지할 수 있다.
const names = ["Alice", "Bob", "Eve"];
 
// 함수에 대한 문맥적 타입 부여
names.forEach(function (s) {
  console.log(s.toUppercase());
> Error: Property 'toUppercase' does not exist on type 'string'. Did you mean 'toUpperCase'?
});
 
// 화살표 함수에도 문맥적 타입 부여는 적용된다.
names.forEach((s) => {
  console.log(s.toUppercase());
> Error: Property 'toUppercase' does not exist on type 'string'. Did you mean 'toUpperCase'?
});

매개 변수 s에는 타입이 표기되지 않았음에도 불구하고, TypeScript는 s의 타입을 알아내기 위하여 배열의 추론된 타입과 더불어 forEach 함수의 타입을 활용했다.

이 과정은 문맥적 타입 부여라고 불리는데, 왜냐하면 함수가 실행되는 문맥을 통하여 해당 함수가 가져야 하는 타입을 알 수 있기 때문이다.
추론 규칙과 비슷하게, 이 과정이 어떻게 일어나는지를 명시적으로 배울 필요는 없지만, 이것이 실제로 일어나는 과정이라는 것을 이해하면 타입 표기가 불필요한 경우를 구분하는 데에 도움이 된다.

breakfast_wu