[Type Script] 변수와 타입

서론

typescriptlang.org에서 playground 를 클릭하면 간편하게 Type Script 코드를 짜볼 수 있고, 변경된 js 코드도 볼 수 있다.

이 환경에서 실습해보도록 하겠다.

 

변수 선언

js와 달리 ts는 변수를 선언할 때 변수의 타입을 지정해주어야 한다.

=> 변수 선언 : 타입 ;

 

타입스크립트에서의 변수 타입

• string : 문자열
• boolean : 참과 거짓
• number : 숫자
• symbol : Symbol 생성자를 호출해 생성된 고윳값
• any : 모든 타입을 허용
• unknown : any와 비슷하지만, 먼저 타입을 지정하거나 좁히지 않으면 변경 불가
• never : 도달할 수 없는 코드
• void : 값이 없음

symbol은 ES6에 추가된 타입으로 객체 프로퍼티를 만들 수 있다.

이런 식으로 생성되는데, symbol은 객체 프로퍼티의 고유값을 가진 키를 생성할 때 사용한다.

위 코드와 같이 대괄호([])를 사용해 객체에서 사용할 수 있다.

 

null과 undefined는 '값이 없음'을 나타낸다.

값이 할당되지 않은 변수(또는 함수)는 undefined를 가지고, 타입 또한 undefined이다.

반면, null은 명시적으로 값이 비어있음을 나타내며 객체이다.

두 타입 모두 변수에 할당할 수 있지만 여러 타입과 섞어 쓰이는 게 일반적이다.

위 사진의 getName 함수는 string(문자열) 혹은 null을 반환하는 함수이다.

null을 굳이 안 써도 null을 반환할 수 있지만, null을 써줌으로써 코드 가독성이 향상된다.

 

any 타입은 숫자, 텍스트, 부울 또는 Customer(사용자 정의 타입) 같은 커스텀 타입 값을 할당 할 수 있다.

-> 타입 체크의 장점을 잃고 코드 가독성이 떨어지기 때문에 사용하지 않는 게 좋음

 

never 타입은 절대 반환하지 않는 함수에 사용한다.

절대로 실행이 종료되지 않는 함수나 오류를 발생시키기 위한 함수를 예로 들 수 있다.

타입 검사기는 never 타입을 반환한다고 유추함

함수표현식 : 생성한 함수를 변수에 할당하는 방법 -> 타입을 반환함

 

void 타입은 변수 선언이 아닌, 값을 반환하지 않는 함수를 선언하는 데에 사용된다.

never 타입과 다르게 void 함수는 실행을 완료하지만 값을 반환하지 않는다. (return X)

런타임 중 함수 본문에 return 문이 없으면 undefined를 반환하지만 void 타입을 사용하면 이와 같은 실수를 방지할 수 있음.

 

타입스크립트 내 타입 표기는 선택 사항이다.

위 코드의 name1은 타입 검사기가 string으로 유추할 수 있다.

name2 또한 변수값으로 타입이 string인 것을 유추할 수 있는데, 문자열 타입을 표기하였다.

-> 코드 스타일 관점에서 보면 타입을 중복해서 지정한 것임

 

따라서 타입스크립트 컴파일러 유추 가능한 곳에 타입을 추가하는 것을 지양해야 한다.

위 코드에서 age, yourTax의 타입 표기가 없지만 타입스크립트 컴파일러가 타입을 유추하기 때문에 타입을 다시 표시할 필요가 없다.

 

"Mary Lou"타입은 "Kim hyerin" 타입으로 지정 불가

타입스크립트는 위와 같이 문자열 리터럴을 타입으로 사용할 수 있다.

하지만 위 코드처럼 문자열 리터럴을 사용해 타입을 선언하는 경우는 드물다. 대신 유니온과 열거 타입을 사용한다.

 

* 타입 확장 : 컴파일러가 변수 타입을 유추하는 것

 

함수 본문 내 타입 선언

위 코드에선 함수, state, income, dependents의 타입을 지정하지 않았다.

하지만 컴파일러가 유추했을 때 함수의 반환값의 타입은 number이므로 실행했을 때 성공적으로 출력 값은 잘 나온다.

 

여기서 dependents의 전달값을 문자열로 준다면 tax값은 'NaN'이 된다.

그래서 변수와 함수에 타입을 지정해보자. 그럼 컴파일 에러로 "Argument of type 'string' is not assignable to parameter of type 'number'." (string 타입인 파라미터를 number 타입 파라미터에 할당할 수 없다)이 뜬다.

따라서 컴파일하는 동안 타입 검사는 실제 프로젝트 개발 중 많은 시간을 절약해준다.

 

유니온 타입

: OR 연산자처럼 변수에 지정할 수 있는 타입이 여러 개일 때 사용한다.

위 코드의 padLeft 함수는 주어진 문자열에 왼쪽 패딩값을 추가하는 함수다.

함수의 인자값으로 value는 string 타입을, padding은 any 타입을 허용한다.

그래서 padding이 number 타입이면 그 값만큼 공백을 만들고, string이면 두 인자를 이어 붙인다.

 

만약 함수의 padding값으로 true를 전달한다면 위와 같이 런타임 오류가 발생한다.

 

* 타입 축소 : 조건문을 적용해 변수 타입을 세분화 하는 것

* typeof는 타입스크립트 내장 타입에 사용, instanceof는 사용자 정의 타입에 사용됨

 

만약 padding 타입을 string과 number 유니온으로 바꾸면

컴파일러는 padLeft()에 그 이외 타입이 들어올 때 오류를 내보낸다. -> 예외 처리의 필요성이 사라짐

이렇게!

이제 padLeft 함수의 두 번째 인자에 잘못된 타입을 추가해 호출하면 컴파일 오류가 발생한다.

 

커스텀 타입 정의

: Type Script는 type, interface, enum 키워드 및 클래스 선언으로 커스텀 타입을 만들 수 있다.

 

1. 타입 키워드

: 새로운 타입을 선언하거나 타입 별칭을 사용해 이미 존재하는 타입에 다른 이름을 붙여 사용할 수 있다.

위 코드와 같이 사용하며 Patient 타입에서 height는 Foot 타입(number)을, weight는 Pound 타입(number)을 사용한다.

그리고 patient 변수에 Patient 타입을 추가해 초기화를 한다.

 

patient 변수를 초기화할 때 타입 프로퍼티 값 중 하나인 weight가 빠지면

"Property 'weight' is missing in type '{ name: string; height: number; }' but required in type 'Patient'."

라는 에러가 뜬다.

 

이때 프로퍼티가 필수가 아닌 옵션 사항이라면, 프로퍼티 이름에 ?를 붙여 조건부 프로퍼티임을 선언한다.

 

예를 들어 form이 있고 입력된 값의 유효성을 검사하는 ValidatorFn이라는 함수를 구현한다고 가정하자.

ValidatorFn 함수에는 특정 시그니처가 필요하다.

FormControl 타입 객체를 받아서, 값이 유효한 경우 null을 반환하고 그렇지 않으면 오류를 설명하는 객체이다.

 

위 코드에서 {[key: string]:any}는 모든 타입의 프로퍼티를 가질 수 있는 객체를 뜻한다.

 

담소

책의 표현이나 예시들이 가끔 어려운 게 나와서 이해하는 데에 조금 어려웠다.

그래도 기초를 확실히 닦자는 생각으로 열심히 해야겠다.

홧팅홧팅