타입 단언(Type Assertion)
타입스크립트의 타입 추론에 기대지 않고 개발자가 직접 타입을 명시하고 타입을 강제로 설정하는 것을 뜻함
바로 변수를 선언하고 문자열(string)을 할당해보도록 하겠습니다.
여기서 myName이라는 변수를 선언하는 시점의 초기값으로 타입이 결정이 됩니다.
### var myName ='세호'이제 여기서 해당 변수에 타입 단언 문법을 적용해보도록 하겠습니다.
var myName ='세호' as string;위 코드는 myName이라는 변수의 타입을 string 타입으로 간주한다는 뜻 입니다.
as 키워드를 붙이면 타입스크립트가 컴파일 할 때 해당 코드의 타입 검사는 수행하지 않는다고 합니다.
즉 as를 사용하면 타입스크립트에게 '이 코드의 타입은 신경쓰지마, 내가 알아서 할게' 와 같습니다.
조금 실용적인 예시
이제 interface를 사용하여 조금 더 실용적인 예제를 살펴보도록 할게요.
interface Person{ // 사람을 뜻하는 인터페이스 생성
name:string;
age:number;
}
var joo= {};
joo.name = '형수'
joo.age = 31 // 인터페이스의 정의대로 이름과 나이속성을 추가해보겠습니다.Q1.
해당 코드처럼 빈 객체를 선언하고 name과 age 속성을 추가했을 때 에러가 날까요?
A1. 에러가 납니다.
해결법은 총 3가지가 있습니다.
(1)
var joo ={
name:'형주',
age:31
};
(2)
var joo: Person = {
name:'형주',
age:31,
}
(3)
var joo ={} as Person;
joo.name='형주';
joo.age=31; // 변수를 선언할 때 빈객체로 선언했지만
//이 객체에 들어갈 속성은 Person 인터페이스이 속성이라고
//타입스크립트 컴파일러에게 말해 주는 것과 같은 효과 입니다.
바로 3번이 타입단언 인데요. 3번을 사용하는 이유는
이미 운영중인 서비스의 코드나 누가 만들어놓은 코드라고 한다면 타입에러를 해결하는데 변경할 코드가 많아질 것입니다.
이때 타입단언을 이용하면 기존의 코드를 변경하지 않고 에러를 해결 할 수 있습니다.
타입 단언의 대상
타입 단언은 숫자, 문자, 객체, 변수 및 함수의 호출 결과에도 사용이 가능합니다.
ex)
const getName =(name) =>{
return name
}
var myId = getName('josh') as string;
// getName('josh') 함수의 호출 결과로 string 타입으로 단언합니다.
// 여기서 파라미터 타입을 정의하지 않으면 기본적으로 모든 값을 받을 수 있도록
// any 타입으로 추론이 됩니다. -> const getId = (id: any) : any
타입 단언 중첩
타입단언은 여러번 중첩해서 사용할 수 있습니다.
var num =(10 as any) as number;
// 변수를 하나 선언하고 숫자 10을 할당한 코드에 타입 단언을 두번 사용한 코드 입니다.
// 사실 위 코드처럼 굳이 중첩을 사용할 필요는 없습니다.
var num = 10 ;
// 위 코드처럼 단순히 초기값을 10으로만 선언을 해도 number 타입으로 추론이 가능합니다.
타입 단언 사용시 주의할점
var num as number = 10;
// 타입 단언은 변수 이름에 사용 할 수 없습니다.
1. var num = 10 as number;
2. var num:number = 10;
// 위 방식으로만 사용을 해야합니다.
var num = 10 as string;
// 호화되지 않는 타입으로는 단언이 불가능합니다. number 10과 string은 일치하지않는 타입이기 때문에 오류가
// 발생합니다.
null 아님 보장 연산자
null 아님 보장 연산자는 null 타입을 체크할 때 유일하게 쓰는 연산자 입니다.
function shuffleBooks(books){
var reuslt = books.shuffle();
return result;
}
shufflebookds(); // 에러가 발생합니다. 해당 함수에서는 인자에 객체를 넘겨야 하는데
// 아무것도 넣지 않았기 때문에 오류가 발생합니다.
// 따라서 아래와 같은 로직을 하나 추가해줍니다.
function shuffleBooks(books){
if(books === null || books === undefined){
return; // 위 조건에 부합하면 바로 종료, 하지만 매번 이렇게 코드를 작성하기에는 꽤 번거롭습니다.
}
}
function shuffleBooks(books: Books | null){
var result = books!.shuffle();
return result;
} // 여기서 !가 바로 nul 아님 보장 연산자인데, 이 것을 사용하면
// books 파라미터는 null이 아니라고 타입스크립트에 말하는 것과 같습니다.
// 해당 로직을 사용하면 null 체크 로직을 일일이 추가해야한느 수고로움을 덜 수 있지만,
// 애플리케이션을 실행할 때 실제로 null 값이 들어오면 실행 에러가 발생하므로 주의해야합니다.
정리
as 및 !를 사용하면 편리하긴 하지만, 실행 시점의 에러는 막아주지 않기 때문에 가급적 타입 단언보다는 타입 추론에 의지하는게 좋습니다.
퀴즈
interface Person{
age:number;
}
var joo= {};
joo.name = '형수'
joo.age = 31
Q1. 위에서 에러가 발생하는 이유는?
Q2. 타입단언은 변수 이름에 사용이 가능하다. -> O / X
Q3.
function shuffleBooks(books:Books | null){
var result = books.shuffle();
return result;
}위 코드에서 에러가 발생할까요? -> O / X
에러가 발생한다면 그 이유는?
A1. Joo 변수를 선언할 때 빈 객체로 초기화를 했기 때문이다.
타입스크립트 컴파일러는 해당 객체에 어떤 속성이 들어갈지 알 수 없기 때문에 추가되는 속성들은 모두 있어서는 안 될 속성으로 간주하는 것입니다.
A2. X, 타입단언은 변수에 이름이 사용이 불가능하다.
var test as number = 10 (x)
A3. O
books 파라미터에 nul값이 들어올 수도 있기 때문에 books.shuffle() 코드는 위험하다는 경고가 발생합니다.
이 에러를 해결하기 위해 null 체크 코드를 추가하면 됩니다.
-> (books === null || books === undefined) 아니면 books!.shuffle()를 사용해도 됩니다.
