Type Anotation
value : type으로 명시를 합니다.
const val:number = '123'1. Primitive 원시값
원시값의 경우 불변하는 특징을 가지고 있는 객체가 아닌 값들입니다.
const str: string = 'STRING'
const num: number = 123
const bool: boolean = true사실 위와 같은 간단한 원시값들은 타입추론을 할 수 있기 떄문에 꼭 Type Anotation을 하지 않아도 괜찮습니다.
또한 원시값 자체를 가지도록 만들 수도 있습니다.
//문자열 string으로 지정했기 때문에 지정된 'string'으로 넣어야합니다.
const str: 'string' = 'STRING'
//123으로 사용해야합니다
const num: 123 = 12345
const bool: true = true하지만 가장 좋은 것은 값을 지정해야하는 경우가 아니라면 원시값 자체가 타입추론을 할 수 있도록 놔두는 것입니다.
2. Object Type
일반적으로 객체는 그 안에 수많은 것을 묘사합니다.
2-1 잘못된 object 타입 지정
//any와 다를 게 없는 상황
const obj3: object = {
str: 'str',
num: 123,
child: {
str: 'str',
num: 123,
}
}위와 같이 코드를 작성한 경우 따로 타입 에러가 발생하지 않습니다. 하지만 아래와 같이 확인을 해보면 obj에서 찾지를 못하고 있는 것을 확인할 수 있습니다.
이처럼 object만 다는 것은 유사 any를 다는 것과 다를 것이 없습니다. 따라서 타입을 어떻게 좁혀줄 지에 대해서 고민을 해야합니다.
object타입의 경우 생김새가 워낙 다양하기 때문에 더 자세하게 타입을 묘사해줘야합니다.
2-2 올바른 object 타입 지정
객체리터럴 문법을 사용해 타입을 지정해보도록 하겠습니다.
const obj2: {
str: string;
num: number;
child: {
str: string;
num: number;
};
} = {
str: "str",
num: 123,
child: {
str: "str",
num: 123,
},
};
정상적으로 출력이 됩니다. 이처럼 object의 타입의 경우 자세하게 묘사를 해줘야 안전하게 상용을 할 수 있습니다.
하지만 지금은 단편적인 예로 이 외에도 객체에 타입을 다는 방법은 정말 다양합니다. 인스턴스라고 해서 class를 만들고 생성자함수를 사용한 경우에는 조금 더 다르게 취급될 수 있습니다.
3. Function Type
두가지 부분에서 타입 지정이 필요합니다
1. 매개변수
2. 반환
또한 반환타입의 경우 타입추론이 잘 되기 때문에 필히 넣지는 않아도 괜찮습니다
일반함수function func(num: number, str: string✅매개변수): string✅반환타입 { return num + str }화살표함수
const func4 = (str1: string, str2: string):string => { return str1 + ' ' + str2 }
- 간단하게 Function으로 타입을 지정하는 것은 지향하는 것이 좋습니다.
- void의 경우 반환되는 값이 없는 경우에 지정을 해 줄 수 있습니다.
3-1 void사용 예시
function func3(num1: number, num2: string): void {
console.log(num1 + num2)
}
func3(123, '123')3-2 객체 타입 사용 예시
const func5 = (obj: { str1: string, str2: string }) => {
return obj.str1 + ' ' + obj.str2
}
func5({ str1: 'hello', str2: 'world' })4. Array Type
자바스크립트에서 배열이 객체로 취급되기 때문에, 그 부분만 주의해주신다면 큰 어려움 없이 사용할 수 있습니다.
하나의 타입으로만 지정된 배열
두가지 형태로 타입을 지정할 수 있습니다.
//첫번째 방법 const strArr: string[] = ['str', 'str2', 'str3'] //두번째 방법 const strArr2: Array<string> = ['str', 'str2', 'str3']
여러개의 타입으로 지정된 배열의 경우 6번. Tuple Type에서 다뤄보도록 하겠습니다.
5. Literal Type
타입스크립트에서 특정 타입이 가질 수 있는 하나의 타입을 Literal Type라고 합니다.
먼저, 아래 두가지의 타입을 비교해보도록 하겠습니다.
let letString = 'Hello'
letString
const constString = 'Hello'
constString
현재 let으로 선언된 것은 string으로, const로 선언된 것은 'Hello'로, 두가지가 다르게 추론되고 있는 것을 확인할 수 있습니다.
let으로 선언된 것의 경우 재할당이 가능하기 때문에 값이 바뀔 수 있습니다. 따라서 타입추론이 string으로 유지되게 됩니다.
하지만 const의 경우 재할당이 불가능하기 때문에 그 값이 리터럴 타입으로 유지가 되는 것입니다.
6. Tuple Type
- Tuple Type이란 길이 고정 & 인덱스 타입이 고정된 배열을 뜻합니다.
- 여러 다른 타입으로 이루어진 배열을 안전하게 관리하기 위해 등장했습니다.
- 배열 타입의 길이까지 조절할 수 있습니다.
Tuple Type의 경우 타입에 대한 index까지 관리를 하기 때문에 안전합니다.
const arr: string[] = ['A', 'B', 'C']
const tuple = [1, 'A']튜플타입이 타입으로 바뀌면 아래와 같이 string도 들어올 수 있고 number도 들어올 수 있는 유니온 타입으로 확인할 수 있습니다
이경우 아래와 같이 타입을 지정해준다면 길이와 인덱스까지 지정되기 때문에 안전하게 사용을 할 수 있습니다.
const tuple: [number, string] = [ 1, 'A' ]또한 아래와 같이 배열 타입의 길이를 가변적으로 조절할 수 있습니다.
const tuple2: [number, ...string[]] = [ 0, 'A', 'B' ]그리고 튜플타입은 읽기전용으로도 관리를 할 수도 있습니다.
7. undefined & null
TypeScript에서도 JavaScript에서와 마찬가지로 고유의 특별한 타입으로 인정해줍니다.
const nu: null = null;
const un: undefined = undefined;- 이외에 void, never와 같이 더 세밀한 타입도 제공해줍니다.
- strictNullChecks가 핵심
7-1 리턴값을 설정하지 않은 경우
function sayHello(word: string) {
if (word === 'world') {
return 'hello' + word
}
return null;
}
리턴 타입을 따로 설정하지 않았음에도 string | null 로 자동으로 추론되는 것을 확인할 수 있습니다.
7-2 void값으로 설정한 경우
void타입은 절대 반환하지 않는다는 뜻이기 때문에 에러가 납니다
7-3 아무런 값을 리턴하지 않은 경우
function sayHello(word: string) {
if (word === 'world') {
return 'hello' + word
}
return;
} 
리턴 타입을 따로 설정하지 않았음에도 string | undefined 로 자동으로 추론되는 것을 확인할 수 있습니다.
이렇게 void를 반환하는 것 undefined를 반환하는 것 추후 배울 never를 반환하는 것으로 헷갈릴 수 있기 때문에 가능하다면 undefined & null은 사용하지 않고 팀이나 개인적으로 빈값을 정해놓는 경우 undefined만 또는 null만 사용을 하거나 차라리 타입추론이 되도록 하는 것이 좋습니다.
8. any Type
any타입의 경우 모든 것의 집합이기 때문에 절대 사용을 하지 않는 것이 좋습니다.
(어느 타입이든 any를 사용하면 타입스크립트가 아니라 자바스크립트로 사용하게 됩니다.)
정말 무조건 사용해야하는 상황이라면 noImplicitAny or strict 옵션 true 권장합니다.
9. unknown
- 새로운 최상위 타입입니다.
- any처럼 모든 값을 허용하지만 상대적으로 엄격합니다.
- TS에서 unknown으로 추론하는 경우는 없으니 개발자가 직접 명시해야 합니다.
- assertion 혹은 타입 가드와 함께 사용합니다.
any의 경우 최상위 타입이기 때문에 위와 같이 모든 타입을 허용합니다.
최상위 타입인 any,unknown을 제외한 다른 타입은 동작하지 않는 것을 확인할 수 있습니다. 이렇게 unknown을 지정해야만 unknown타입이 동작하는 것을 확인할 수 있습니다.
number에는 trim이라는 메소드가 동작하지 않지만 동작되는 것을 확인할 수 있습니다.(런타임에 가서야 에러를 확인할 수 있습니다.)
이럴 때 unknown을 사용할 수 있습니다.unknown을 사용하면 타입스크립트 컴파일러가 에러를 도출합니다.
또한 이럴 때 타입가드를 사용할 수도 있습니다.
let num: unknown = 99;
if (typeof num === 'string') {
num.trim();
}
//또는 as를 사용할 수도 있습니다.
//(num as string).trim()9. void
- 함수의 반환이 없는 경우를 명시
- void의 경우 명시하기보다는 타입 추론에 위임하는 것을 추천합니다.
- JS에서는 암시적으로 undefined를 반환
- 그러나 void와 undefined는 TS에서 같은 것이 아님
