7 개의 좋 은 TypeScript 새로운 기능

1.체인 선택 가능
v 3.7 에서 사용 가능
이것 은 포 함 된 데 이 터 를 방문 하려 고 할 때 아 픈 점 입 니 다.포 함 된 데이터 가 많 을 수록 코드 가 번 거 로 워 집 니 다.
아래 의 예 에서 address 에 접근 하려 면 data.customer.address 를 옮 겨 다 녀 야 합 니 다.또한 data 나 customer 는 undefined 일 수 있 기 때문에 보통&연산 자 나 유사 한 예 에서 의 기 교 를 사용 하여 각 단계 의 정 의 를 검사 합 니 다.
지금 쓸 수 있어 요.?연산 자 는 데이터 에 선택적으로 접근 합 니 다.이러한 방식 을 통 해 정의 되 지 않 은 부모 급 대상 이 존재 하면 체인 의 모든 위치 에서 정의 되 지 않 은 것 으로 되 돌아 갑 니 다.실행 할 때 무 너 지 는 것 이 아 닙 니 다.

// v3.7   
if (data && data.customer && data.customer.address) {
   const {address} = data.customer
   const fullAddress = `${address.street}, ${address.city}, ${address.state }${address.zipcode}`
}

// v3.7

// data access
const address = data?.customer?.address
const fullAddress = `${address?.street}, ${address?.city}, ${address?.state } ${address?.zipcode}`

//       
customers?.[0]?.['address']

//             
customer.approve?.()

2.빈 값 병합
v 3.7 에서 사용 가능
빈 값 통합 연산 자 는||의 대체 방법 입 니 다.왼쪽 이 null 또는 undefined 라면 오른쪽 표현 식 으로 돌아 갑 니 다.이것 은||과 무엇이 다 릅 니까?||본질 적 으로 자바 스 크 립 트 의 불 OR 연산 자 입 니 다.우 리 는 단락 을 이용 하여 첫 번 째 비 false 값 을 되 돌려 보 려 고 합 니 다.숫자 0 이나 빈 문자열 을 올 바른 입력 으로 요구 할 때 false 로 간주 되 기 때문에 예상 치 못 한 결과 가 발생 할 수 있 습 니 다.우 리 는 하나의 예 로 설명 합 시다.

//   
passPhrase = data.inputString || 'Unknown'  //     "" (    )
passCode =  data.number || '-1111' //      0 
rememberMe = data.rememberFlag || true //      true!!!


//   
passPhrase = data.inputString ?? 'Unknown'  //   inputString       Unknown
passCode =  data.number ?? '-1111' // 0     
rememberMe = data.rememberFlag ?? true // false     

이런 방식 을 통 해 undefined 와 false 의 값 을 명확 하 게 구분 할 수 있다.
3.귀속 유형 별명
v 3.7 에서 사용 가능
현실 세계 의 많은 데이터 유형 은 모두 재 귀적 이다.예 를 들 어 레이 어 링 데 이 터 를 처리 하려 고 할 때 같은 유형의 데이터 가 존재 하 는 중복 모드 를 발견 할 수 있 습 니 다.json 은 좋 은 예 입 니 다.본질 적 으로 해시 맵 입 니 다.해시 맵 자 체 는 다른 맵 이나 맵 배열 을 포함 할 수 있 습 니 다.
v 3.6 이전에 간단 한 jsON 형식 을 정의 해 야 한다 면 아래 와 같이 해 야 합 니 다.

interface JSONObject { [x: string]: JSONValue; }
interface JSONArray extends Array<JSONValue> { }
type JSONValue = string | number | boolean | JSONObject | JSONArray

첫 번 째 줄 과 두 번 째 줄 의 유형 을 세 번 째 줄 처럼 연결 하려 고 시도 하면 다음 과 같은 오류 가 발생 할 수 있 습 니 다.Type alias JSONvalue circularly references 자체.
v 3.7 에서 이 문 제 를 효과적으로 해결 하 였 습 니 다.아래 처럼 간단하게 인 코딩 할 수 있 습 니 다.

type JSONValue = string | number | boolean | { [x: string]: JSONValue } | Array<JSONValue>

4.단언 서명
v 3.7 에서 사용 가능
TypeScript 는 형식 보 호 를 가지 고 있 으 며,자바 script 의 typeof 와 instanceOf 연산 자 와 함께 잘 사용 할 수 있다 는 것 을 알 아야 합 니 다.이것 은 함수 의 매개 변수 에 전제조건 을 추가 하여 특정한 유형 으로 제한 하 는 데 도움 이 된다.
위 에서 언급 한 것들 을 모두 사용 하 는 코드 를 쓰 고 유형 보 호 를 추가 하여 주어진 입력 이 날짜 인지 확인 하고 그 중에서 연 도 를 추출 합 니 다.

function isDate(input: unknown) : asserts input is Date { 
  if (input instanceof Date) 
    return; 
  else 
    throw new Error('Input must be a Date!'); 
} 

function getYear(input: unknown) : number { 
  isDate(input); 
  return input.getFullYear()  // TypeScripts knows that input is Date 
} 


console.log(getYear(new Date('2019-01-01'))); 
console.log(getYear('2019-01-01')); 

위의 코드 는 보기 에는 좋 지만 TypeScript 는 getFullYear 가 알 수 없 는 형식 에서 사용 할 수 없다 는 것 을 알려 줍 니 다.
v 3.7 부터 TypeScript 는 asserts 라 는 새로운 키 워드 를 추가 하여 컴 파일 러 가 단언 부터 정확 한 유형 을 알 수 있 도록 합 니 다.단언 함수 에 대해 서 는 반환 형식 이 아 닌 assertsas을 추가 해 야 합 니 다.
이렇게 단언 이 통과 되면 TypeScript 는 매개 변 수 를 앞에서 정의 한 형식 으로 가정 합 니 다.수 정 된 코드 는 다음 과 같다.

function isDate(input: unknown) : asserts input is Date { 
  if (input instanceof Date) 
    return; 
  else 
    throw new Error('Input must be a Date!'); 
} 

function getYear(input: unknown) : number { 
  isDate(input); 
  return input.getFullYear()  // TypeScripts knows that input is Date 
} 


console.log(getYear(new Date('2019-01-01'))); 
console.log(getYear('2019-01-01')); 

5.Promise 에 더 좋 은 피드백 제공
3.6 부터 개선
코드 에서 Promise 를 직접 사용 하여 await 나 then 을 사용 하 는 것 을 잊 어 버 리 는 것 은 일반적인 오류 입 니 다.다음 과 같 습 니 다.

interface Customer {
    name: string
    phone: string
}

declare function getCustomerData(id: string): Promise<Customer>;
declare function payCustomer(customer: Customer): void;

async function f() {
    const customer = getCustomerData('c1')
    payCustomer(customer)
}

이전의 TypeScript 는 Promise 를 전혀 모 르 고 그 와 무관 한 오류 메 시 지 를 보 여 줍 니 다.다음 과 같 습 니 다.

v3.6 부터 컴 파일 러 가 매우 똑똑 해 졌 으 니 Promise 를 지 켜 야 한다 고 건의 할 수 있다.최신 컴 파일 러 가 같은 오 류 를 어떻게 처리 하 는 지 주의 하 십시오.

다음은 세부 사항 을 깊이 이해 할 필요 가 없 는 몇 가지 기능 에 대해 간단하게 토론 한다.
6.유 니 코드 식별 자
v 3.6 에서 사용 가능

const hello = "world"

위의 코드 는 초기 버 전의 TypeScript 에서 컴 파일 할 수 없 을 수도 있 지만,지금 은 더욱 광범 위 한 유 니 버 설 에서 식별 자 를 집중 적 으로 정의 할 수 있 습 니 다.
7.증분 컴 파일
v 3.4 부터 사용 가능
대형 프로젝트 에서 TypeScript 를 사용 하면 컴 파일 러 는 이 세대 프로젝트 의 파일 변경 에 응답 하 는 데 시간 이 오래 걸 릴 수 있 습 니 다.현재 새로운--incremental 로고 가 생 겼 습 니 다.tsc(typescript 컴 파일 러)명령 줄 에 추가 할 수 있 습 니 다.이 명령 줄 은 수 정 된 파일 을 점차 컴 파일 할 것 입 니 다.
TypeScript 는 지난번 컴 파일 된 프로젝트 정 보 를 코드 라 이브 러 리 의 로 컬 캐 시 디 렉 터 리 에 저장 함으로써 이 를 실현 합 니 다.react 코드 라 이브 러 리 에 서 는 웹 팩 이나 Parcel 에서 올 바른 설정 을 해 야 구축 파이프 에서 증분 컴 파일 을 사용 할 수 있 습 니 다.
이상 은 7 개의 사용 하기 좋 은 TypeScript 새로운 기능 에 대한 상세 한 내용 입 니 다.TypeScript 의 새로운 기능 에 관 한 자 료 는 다른 관련 글 을 주목 하 십시오!