Front-end/TypeScript
[TypeScript] 타입 적용(파라미터, 화살표함수, DOM, API함수)
이안92
2021. 6. 16. 11:25
반응형
명시적인 any 타입 선언
먼저, 명시적으로 any를 선언한다. tsconfig.json 파일에 'noImplicitAny' 값을 'true'로 추가한다.
// tsconfig.json
{
"compilerOptions": {
"allowJs": true, // 자바스크립트 검증
"target": "ES5", // 타입스크립트 컴파일 tsc
"outDir": "./built", // 결과물 들어갈 곳
"moduleResolution": "Node", // Promise 인식 위해서
"lib": ["ES2015", "DOM", "DOM.Iterable"], // Promise 등 에러 안뜸
"noImplicitAny": true, // 외부라이브러리(axios 등) 오류에서 더 많은 타입에러가 뜸
},
"include": ["./src/**/*"] //src폴더 모든 파일 대상 포함
}
그럼 외부라이브러리(axios 등) 오류만 나오다가 더 많은 타입에러가 발생하게 된다.
any를 선언하면 오류가 사라지며, 먼저 any를 주거나 이 과정을 건너뛰어 바로 특정 타입을 주면된다.
화살표 함수 타입 추가
https://iancoding.tistory.com/261
// (a, b) => getUnixTimestamp(b.Date) - getUnixTimestamp(a.Date)
(a: any, b: any) => getUnixTimestamp(b.Date) - getUnixTimestamp(a.Date)
// sorted.forEach(value => {
sorted.forEach((value: any) => {
DOM 함수 타입 구체화
// utils
function $(selector: any) {
return document.querySelector(selector);
}
// 아래 DOM에서 document.querySelector('.confirmed-total') 대신
// $('.confirmed-total')로 줄여쓸 수 있다
// DOM
const confirmedTotal = $('.confirmed-total');
const deathsTotal = $('.deaths');
const recoveredTotal = $('.recovered');
const lastUpdatedTime = $('.last-updated-time');
const rankList = $('.rank-list');
const deathsList = $('.deaths-list');
const recoveredList = $('.recovered-list');
const deathSpinner = createSpinnerElement('deaths-spinner');
const recoveredSpinner = createSpinnerElement('recovered-spinner');
HTMLParagraphElement를 선언하면 Element에 아래와 같은 properties들이 없다고 오류가 나온다.
HTMLElement를 상속받아 사용하는것이 HTMLParagraphElement이다.
https://iancoding.tistory.com/160
타입 단언(as ~ )을 통해 결과에 타입에 넣어준다. p태그 일 경우 HTMLParagraphElement,
span태그는 HTMLSpanElement를 적용해주면 된다. 그럼 innerText에서 나던 타입 에러들이 없어진다.
// utils
function $(selector: string) {
return document.querySelector(selector);
}
// 아래 DOM에서 document.querySelector('.confirmed-total') 대신
// $('.confirmed-total')로 줄여쓸 수 있다
// DOM
var a: Element | HTMLElement | HTMLParagraphElement
const confirmedTotal = $('.confirmed-total') as HTMLSpanElement; // 타입단언
const deathsTotal = $('.deaths') as HTMLParagraphElement;
const recoveredTotal = $('.recovered') as HTMLParagraphElement;
const lastUpdatedTime = $('.last-updated-time') as HTMLParagraphElement;
const rankList = $('.rank-list');
const deathsList = $('.deaths-list');
const recoveredList = $('.recovered-list');
const deathSpinner = createSpinnerElement('deaths-spinner');
const recoveredSpinner = createSpinnerElement('recovered-spinner');
API 함수 타입 구체화
function fetchCountryInfo(countryCode: any, status: any) {
// status params: confirmed, recovered, deaths
const url = `https://api.covid19api.com/country/${countryCode}/status/${status}`;
return axios.get(url);
}
API 문서를 확인하고 해당하는 url의 query값의 타입을 확인한다.
countryCode는 문자열이므로 string으로,
status는 이미 정해져있는 값만 받으면 되므로 enum으로 선언한다.
// 정해진 값은 enum을 쓴다
enum CovidStatus {
Confirmed = 'confirmed',
Recovered = 'recovered',
Deaths = 'deaths'
}
function fetchCountryInfo(countryCode: string, status: CovidStatus) {
// status params: confirmed, recovered, deaths
const url = `https://api.covid19api.com/country/${countryCode}/status/${status}`;
return axios.get(url);
}
선언한 enum을 적용하여 타입으로 명시해준다.
반응형