자바스크립트 콘솔 : 변수 타입을 추적해봐도 any 라는 문자열을 반환하는 경우 x
-> any 타입은 타입스크립트에만 존재하는 독자적인 타입 시스템
,,,but any 타입의 개념은 이미 자바스크립트에서 널리 사용!
... 원래 자바스크립트의 사용방식과 일치하기 때문
-> 모든 타입시스템은 타입스립트에만 존재하는 키워드지만 그 개념은 자바스크립트에 기인
1. any 타입
any 타입은 자바스크립트에 존재하는 모든 값을 오류없이 받을 수 있다.
타입을 명시하지 않은 것과 동일한 효과
어떠한 값을 할당하더라도 오류발생 x
그러면 타입스크립트가 달성하고자 하는 정적 타이핑을 무색하게 만들 수 있음
-> 그래서 any타입을 쓰는 것은 지양해야 함.
state.foo.bar = () => console.log("this is any type");: 심지어 중첩 구조로 들어가 함수를 할당해도 문제없다.
- any타입을 어쩔 수 없이 사용해야 할 때
1.개발 단계에서 임시로 값을 지정해야 할 때
: 추후값이 변경될 가능성 있거나 세부 항목 아직 확정 x -> 시간 절약을 위해 사용
-
어떤 값을 받아오지 또는 넘겨줄지 정할 수 없을 때
: 어떤 값의 타입을 명확하게 지정하기 어려운 상황일 때
ex) api 요청 및 응답 처리, 콜백 함수 전달, 타입이 정제 되지 않아 파악이 힘든 외부 라이브러리를 사용할 때 -
값을 예측할 수 없을 때 암묵적으로 사용
: 다양한 값을 반환하는 api 존재 ( ex) fetch api )할 때
주의) 타입스크립트의 컴파일러에서는 아무런 에러가 도출되지 않지만, 실제 런타입에서 심각한 오류 발생 가능 -> 컨트롤을 잘해야 함.
2. unknown 타입
모든 타입이 값을 할당 but any 타입을 제외한 다른 타입으로 선언된 변수에는 unknown 타입 값을 할당할 수 없다.
무엇이 할당될지 아직 모르는 상태의 타입
let someValue1 : any = unknownValue; // (0)
let someValue2 : number = unknownValue; // (X)
let someValue3 : string = unknownValue; // (X): any 타입으로 선언된 변수를 제외한 다른 변수는 모두 할당이 불가
할당 할 때는 컴파일러가 아무런 경고를 주지 않지만 이를 실행하면 에러 발생.
const unknownFunction : unknown = () => console.log("unknown");
// 할당하는 시점에는 에러 발생 x
unknownFunction();
// 실행시에는 에러 o
// 'Error : Object is of type 'unknown'.ts (2571)'
나중에 any 타입을 특정 타입으로 수정해야 하는 것으 깜빡하고 누락하면 예상치 못한 버그 발생.
-> unknown 타입은 이런 상홍을 보완 ( any 타입보다 안전 )
-> 따라서 데이터 구조 파악이 힘들 때는 any < unknown 지향
3. void 타입
매개변수를 전달하지 않는 경우 : 그냥 괄호를 비워두면 됨.
아무럼 값을 반환하지 않는 경우 ( ex) 콘솔에 로그를 출력하거나 다른 함수를 실행하는 역할만 함수의 경우 ) : 특정값을 반환하지 않음
const showModal = (type:Modaltype): void => {
feddbackSlice.actions.createModal(type);자바스크립트 : 명시적인 반환문을 작성하지 않으면 기본적으로 undefined가 반환
but 타입스크립트에서는 void 타입이 사용 ( 이것은 undefined는 아님 )
함수 내부에 별도 반환문이 없다면 타입스크립트 컴파일러가 알아서 함수 타입을 void로 추론
4. never 타입
: 값을 반환할 수 없는 타입
( 반환하지 않는 것과 없는 것의 차이 명확하게 구분 )
- 자바스크립트에서 값을 반환할 수 없는 예
-
에러를 던지는 경우
: 런타임에 의도적으로 에러를 발생시키고 캐치 -> throw 키워드 사용 -
무한히 함수가 실행되는 경우
: 함수 내 무한 루프를 실행
never 타입은 모든 타입의 하위 타입
-> never 자신을 제회한 어떤 타입도 never타입에 할당될 수 없다. 심지어 any도 x
5. Array 타입
: 객체의 타입을 알아내는 데 사용되는 함수
자바스크립트에서 Object.prototype.toString.call(...)연산자로 사용하여 확인 가능.
const array : number[] = [1,2,3];: 숫자에 해당하는 원소만 허용
typeof : 단순히 object 타입으로 알려주는 함수
Object.prototype.toString.call(...) : 객체의 인스턴스까지 알려줌
- 타입스크립트에서 다시 array를 언급하는 이유
- 자바스크립트에서는 배열을 단독으로 배열이라는 자료형에 국한 x
- 타입스크립트에선 Array라는 타입을 사용하기 위해서는 타입스크립트의 특수한 문법과 함께 다뤄야 함.
배열은 array 키워등 외에도 대괄호 [ ]를 사용해서 직접명시 가능 : 튜플 Tuple
let tuple :[number, string, boolean] = [1,"string",true]: 여러 타입과 혼합도 가능
정적언어 : 배열의 원소로 하나의 타입만 사용하도록 명시 / 크기까지 동시에 제한
타입스크립트 : 해당 타입의 원소 관리를 강제함. ( 배열의 길이 제한 x )
but, 튜플은 배열 타입의 하위 타입으로 기존 타입스크립트의 배열 기능에 길이제한 까지 추가한 시스템
타입스크립트에서 배열과 튜플은 제한적으로 사용
ex) useState(훅으로부터 생성관리되는 상태값, 해당 상태를 조작할 수 있는 setter)
반환 값이 명확하고 잘 설계된 api -> 튜플타입 : 유연성 o
튜플과 배열의 성질 혼합해서 사용 가능 -> 스프레드 연산자(...) 사용
: 특정 인덱스에서 요소를 명확한 타입으로 선언, 자료형의 원소를 개수 제한 없이 받도록 명시 가능
const some :[number, string, ...string[]] =[
400,
"string1",
"string2",
"string3",
];또한, 옵셔널 프로퍼티(선택적 속성) -> ? 기호 함께 사용 가능
옵셔널 optional
: 속성 또는 매개변수 값이 있을 수도 없을 수도 있음. 선택적 속성은 해당 속성에 값을 할당하지 않아도 되고 해당 속성이 없어도 오류 발생 x, 좀 더 유연한 데이터 모델링과 사용자 정의 타입을 지원.
6. enum 타입
= 열거형 , 타입스크립트에서 지원하는 특수한 타입
일종의 구조체를 만드는 타입 시스템
기본적인 추론 방식 : 숫자 0부터 1씩 늘려가며 값을 할당
각 멤버에 명시적으로 값 할당 가능. / 이전 멤버 값의 숫자를 기준으로 1씩 늘려가며 자동으로 할당
enum ProgrammingLanguage{
Typescript = "Typescript",
Javascript = "Javascript",
Java = 300,
Python = 400,
Kotlin, //401
Rust, // 402
Go, // 403
}
: 각 멤버는 프로그래밍 언어와 관련된 값을 다룬다는 것을 파악가능
enum 타입은 주로 문자열 상수를 생성하는 데 사용 -> 응집력 있는 집합 구조체 생성 가능
: 열거형을 타입으로 가지는 변수는 해당 열거형이 가지는 모든 멤버를 값으로 받을 수 있음 ( 코드의 가독성 높여줌 )
- 타입 안전성 : 명시되지 않은 문자열은 인자로 받을 수 없다.
- 명확한 의미 전달과 높은 응집력 : 다루는 값이 무엇인지 명확
- 가독성 : 말하고자 하는 바가 더욱 명확, 쉽게 이해주의) 숫자로만 이루어져 잇거나 자동으로 추론한 열거형은 안전하지 않은 결과를 낳을 수 있음.
-> 이러한 동작을 막기 위해 const enum을 열거형으로 선언. ( 자바스크립트에서의 객에에 접근하는 것과 유사한 동작을 보장 )
but, const enum 으로 열거형을 선언하더라도 숫자 상수로 관리되는 열거형은 서언한 값 이외의 값을 할당하거나 접근할 때 이를 방지하지 못한다.
but, 문자열 상수 방식으로 선언한 열거형은 미리 선언하지 않은 멤버로 접근을 방지 -> 문자열 상수 방식이 더 안전
주의 ) 일부 번들러에서 트리쉐이킹 과정중 즉시 실행 함수로 변환된 값을 사용하지 않는 코드로 인식하지 못하는 경우 발생 -> const enum 또는 as const assertion을 사용해서 유니온 타입으로 열거형과 동일한 효과를 얻으며 해결
_ 도서 참조 : 우아한 타입스크립트 with 리액트
