Typescript - 고급 기능

타입스크립트를 사용할 때 편리한 기능을 소개합니다.

 

Optional Chaining

interface MyInfo {
  name: string,
  friends?:{
    friend1: boolean,
    friend2: boolean
  }
}

const myInfo = { name:"개발자" }

/* age의 값이 undefinded 이거나 null인경우를 체크하여 age를 출력해보자 */

// 옵셔널체이닝 미사용 - &&(논리연산자)를 이용
// myInfo.friends 값이 null, undefined, ‘’, 0, -0, NaN 이 아니라면 true 이고 아니면 false
function funTest1 (myInfo) {
  if(myInfo.friends && myInfo.friends.friend1){ // if 문에 객체 유무를 검사해야한다. 검사하지않으면 오류
    return myInfo.friends.friend1
  }
}

// 옵셔널체이닝 사용
function funTest2 (myInfo){
  return myInfo.friends?.friend1 // friends가 존재하지 않아도 오류가 나지 않는다.
}

 

Non-Null Assertion

타입스크립트는 null일 가능성이 있는 객체 접근은 Error로 취급합니다. null 이 아님을 나타내고자 할 때 Non-Null Assertion 기능을 사용해 컴파일러에게 문제가 없음을 전달합니다. 사용 방법은 객체뒤에 !(느낌표) 를 사용합니다.

 

옵셔널 체이닝과의 차이점

Non-Null Assertion은 컴파일러에게 에러를 발생시키지 않아도 된다고 알려줄뿐 에러가 날 수 있습니다.

하지만 옵셔널 체이닝은 트랜스파일되어 생성된 자바스크립트에 null 체크 코드를 추가하므로써 실행 시 에러가 발생하지 않습니다.

interface MyInfo {
  name: string,
  age: number
}

function Me(myInfo?: MyInfo){
  // myInfo 가 null 인 경우, 실행 시 에러 가능성이 있는 속성에 접근하면 컴파일 에러
  // ! 를 사용하여 컴파일 에러를 억제함
  const me = myInfo!.name 
}

 

keyof 연산자

타입이 가진 각 속성의 타입의 Union 타입을 반환합니다. 객체에 존재하는 키를 사용해 함수 처리를 수행할 때 안전하게 사용가능합니다.

interface MyInfo {
  name: string,
  age: number
}

function getProperty<T, K extends keyof T>(obj: T, key: K) : T[K] {
  return obj[k]
}

const myInfo = {
  name: '개발자',
  age: 32
}

const name = getProperty(myInfo,'name') // name은 키로 존재하므로 '개발자'를 출력
const weight = getProperty(myInfo,'weight') // weight 는 키로 존재하지 않으므로 컴파일 에러

 

Index 타입

객체의 키의 타입을 정의합니다.

type TypeTest {
  [k: number]: boolean;
}
const test1: TypeTest {
  1: false,
  2: true,
  'k1' : true // error
}

 

readonly 타입

readonly로 지정된 값은 수정할 수 없게됩니다.

interface MyInfo {
  readonly name : string,
  age : number
}

let myInfo:MyInfo = {
  name: '개발자',
  age: 32
}

myInfo.name = '일반인' // 정상적으로 값 변경
myInfo.age = 20 // 컴파일 error

// 제네릭타입으로도 가능합니다.
type MyInfoReadOnly = ReadOnly<MyInfo>

let myInfoReadOnly:MyInfoReadOnly = {
  name: '개발자',
  age: 32
}
myInfoReadOnly.age = 20 // 컴파일 error

 

Unknown 타입

 

Unknown 타입은 any 와 동일하게 모든 값을 대입할 수 있는 타입입니다. 

any와의 차이점은 any와 다르게 대입된 값 상태 그대로는 임의의 함수나 속성으로 접근 할 수 없습니다.(typeof , instanceof 등을 사용 하여 타입의 안정성을 검사한 뒤에 접근 가능합니다.)

 

좀 더 안전한 코드를 작성하기 위해서 any 대신 unknown 타입을 사용하는게 컴파일 오류를 줄일 수 있는 방법입니다.

const name: unknown = 'TypeScript'

console.log(name.toLowerCase()) // error , 타입 체크 없이 하면 오류

if(typeof name === 'string'){
  console.log(name.toLowerCase()) // result => typescript
}