1.시작하기 - 2. 기본타입

섹션1 메모

강의 프로젝트 설정

1. 타입스크립트 컴파일러 설치 : npm install -g typescript 이후의 명령어는 tsc
2. 폴더를 만들고 npm init 으로 package.json 생성, tsc init으로 ts 설정
3. npm install --save-dev lite-server 로 dev dependency에 ‘lite-server’ 설치
4. package.json 내부 scripts에 "start": "lite-server" 로 명령어 설정 후 실행
5. tsc app.js 로 작성한 ts코드 js로 컴파일하여 터미널과 브라우저에서 결과 확인 가능

*nodemon으로 워칭하는 법

https://colinch4.github.io/2020-12-03/README.typescript-개발환경구성/

섹션2 메모

타입 할당 및 타입 추론하기

명시적으로 타입을 지정해주지 않아도 선언 시 바로 할당한 값이 있다면 암묵적으로 타입을 추론한다.

(선언 시 타입도 지정하지 않았고 할당한 값도 없다면 any라고 추론한다)

const로 상수를 선언하고 바로 할당했다면 할당된 바로 그 값이 타입이 된다.

*JS 타입과 TS 타입의 차이 : ts타입은 컴파일 중에 확인되는 반면, js 타입은 런타임 중에 확인된다.

객체 타입 지정

변수 뒤에 : object 라고 generic한 타입을 지정해 주면, 타입스크립트는 그 변수가 ‘객체다’라는 것은 알지만 내부 property가 무슨 타입인지에 대한 정보는 갖지 못한다. 따라서 분명히 해당 객체 안에 있는 property를 . 표기법이나 [ ]표기법으로 호출할 때도 ‘그런 property는 ‘object’라는 타입 안에 존재하지 않는다’며 에러를 내게 된다.

객체에 대한 타입을 지정해 줄 때는 key-type 쌍으로 된 객체 형태로 지정해주어야 property에 대한 타입까지 알려줄 수 있다.

더 좋은 건 그냥 알아서 추론하게 두는 것이다.

튜플 타입 지정

튜플은 각 요소의 타입와 위치가 정해진 특별한 array 타입이다. 만일 어떤 변수의 타입을 : [string, number] 이라고 정했다면 배열 자체를 재할당하거나 특정 idx의 요소를 재할당할 때 정확히 그 자리에 있어야 할 타입인지 체크한다.

단, push는 제한하지 못하므로 유의해야 한다.

enum 타입 지정

Enum은 숫자 혹은 문자열 값 집합에 라벨(Member)을 부여할 수 있는 커스텀 타입으로, 값의 종류가 일정한 범위로 정해져 있는 경우 유용하다.

enum 키워드 뒤에 식별자를 넣은 중괄호를 쓴다. 초기 값을 주지 않으면 0부터 차례로 1씩 증가한다. = 연산자로 수동으로 값을 변경할 수 있으며, 변경한 부분부터 다시 1씩 증가한다. 역방향 매핑이 가능해, 식별자로 값에, 값으로 식별자에 접근할 수 있다.

문자를 지정해 줄 수도 있지만 역방향 매핑은 지원하지 않고 개별적으로 초기화해야 한다.

유니언 타입 사용

|(파이프라인) 연산자를 이용해 한 변수에 여러 가지의 타입이 할당될 수 있도록 유연하게 만들 수 있다.

단, 로직에 따라 각각의 타입이 들어왔을 때 어떻게 작동할 지 런타임에서 알 수 있도록 if문으로 분기 처리를 해 주어야 한다. (오버로딩)

리터럴 타입

정확한 값을 가지는 타입이다. 개발자가 정의해두고 까먹을 수 있는 옵셔널한 값 등을 리터럴 타입으로 지정해 두고 있으면 인자로 오타 난 값을 넣어 오류가 나는 상황을 방지할 수 있다.

타입 알리어스

type 키워드를 이용해 커스텀 타입을 만들고 이름을 붙이는 방법이다. 불필요한 반복을 피하고 타입을 중심에서 관리할 수 있다.

리턴 타입과 Void

파라미터 중괄호 뒤에 쌍점으로 표기하거나 암시적으로 추론하게 둘 수 있다.

반환 타입에서 볼 수 있는 독특한 타입은 void이다. 함수가 의도적으로 어떤 값도 리턴하지 않을 때 void 타입으로 표기한다.

(return 값 없이 console.log로 로깅만 하는 경우 등)

실제로 void 함수의 실행 결과를 console.log로 찍으면 값인 undefined가 뜨지만, 어쨌든 의도한 리턴 값은 없으므로 void이다.

함수의 리턴 값으로 void가 아니라 undefined를 지정한다면, 타입스크립트는 이 함수가 ‘값을 반환하지 않는 return문을 가진다’고 생각할 것이다.

function aaa(): void {
	console.log('nothing returned')
}

function bbb(): undefined {
	return;
}

함수 타입

어떤 변수에 함수를 저장해두고 싶다면, 함수 타입을 지정해 두어야 추후 다른 값으로 덮어쓰는 등의 휴먼 에러를 잡아낼 수 있다.

함수 타입은 함수의 매개변수와 반환 타입을 지정하는 것이며, 객체와 마찬가지로 : Function으로 지정하기보다 형태를 묘사해 준다.

// 그냥 함수가 될 것이라고만 알려주는 방법
let combineValues: Function;
// 인자와 리턴값에 대한 정보를 알려주는 방법
let combineValues: (a: number, b: number) => number;

인자로 콜백함수가 들어갈 때도 마찬가지로 화살표함수와 비슷한 형태로 타입을 알려준다.

콜백의 정보까지 지정해 주면 하면 타입스크립트는 그 결과가 어떻게 될 지 추론할 수 있다. 특히 콜백 함수가 값을 return하는 함수이지만 외부 함수에서는 그 값으로 아무 작업도 하지 않도록 제한하고 싶을 때 콜백함수의 return 타입을 void로 지정하면 된다.

(콜백 함수는 자신이 전달되는 인수가 반환 값을 기대하지 않는 경우에도 값을 반환할 수 있다.)

unknown 타입

사용자가 무엇을 입력할 지 알수 없는 경우 등에 unknown을 사용할 수 있으며, any와는 다르게 작동한다.

any 타입으로 지정된 변수를 string이나 number등으로 지정된 변수에 할당하려고 하면 에러가 발생하지 않는다. any는 타입 확인을 하지 않기 때문이다. 반면 unknown으로 지정된 변수를 다른 타입의 변수에 할당할 시 타입 에러가 뜬다. unknown에 무슨 타입이 들어올 지 확신할 수 없기 때문이다. 따라서 if문으로 타입검사를 실행한 다음 할당해야 한다.

never 타입

never는 함수가 반환할 수 있는 또다른 타입이다. void와 마찬가지로 어떤 값도 리턴하지 않으며 암묵적 추론 시 void가 나오는 함수일지라도 never로 지정함으로써 코드의 의도를 더 분명히 할 수 있다.

결과값을 console.log로 찍었을 때 undefined마저