타입스크립트 관련하여 처음으로 주어진건, Todolist 같은 사이트인데 API를 받아와서 나라들을 sort하는 사이트
사실 JS와 다를건 없지만 type 지정 때문에 그냥 모든게 낯설다..
처음 보는 TS..
그래도 다행인건 모든 type에 대해서 알고 있어서 사실 감만 잡으면 되는거,,
이럴땐 전공이 좋기도해
아무튼 오늘 시작했는데, 하루만에 다 끝낸 과제다.
Type-Script 설치
$ npm create vite
$ yarn create vite입력후 프로젝트 이름 작성 -> React 선택 -> TypeScript 선택하면 끝!
Type 설정
type 지정이 다인 TS 이므로,
export interface Country{
name:{
common: string;
official: string;
};
capital: string;
flags: {
png: string;
};
}이 코드는 불러온 API의 응답값에 대한 타입을 정한것이다.
API를 보니 응답값이 너무 많아서 필요한 부분만 가져왔다.
보면,
이름은 당연히 string,
offical = 나라이름이니까 string
capital도 수도니까 string
png는 사진인데, 사진도 string에 속한다.
type들에 대해 몇개 소개를 하자면,
boolean
true와 false 단 두개를 반환한다.
let isDone: boolean = false;number
모든 숫자이다.
그럼, 소수점도 number에 속하는가? YES! 소수점도 number다
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
string
텍스트 데이터
let color: string = "blue";
let name: string = `Bob`;
let age: number = 37;
let sentence: string = `Hello, my name is ${name}. I'll be ${age + 1} years old next month.`;
null , undefined
null은 의도적으로 비어있음을 나타낸다.
undefined는 값이 정의되지 않는것을 나타낸다
헷갈릴수 있지만 엄연히 다르다
let n: null = null;
let u: undefined = undefined;
void
반환값이 없는 함수의 반환 타입으로 사용된다.
function a(): void {
console.log("aaa");
}
