오랜만에 다시 정리해본다. 타입스크립트 스타트!
설치
npm install -g typescript ts-node 명령어 고고
tsc --help 명령어를 입력해보면 TS가 깔렸는지 확인 가능쓰
난 자꾸 에러가 떠서 뭔가 했더니 이미 설치되었던것ㅋㅋ
프로젝트 폴더 생성
mkdir ts-todo
일단 나는 ts-todo라는 이름의 디렉토리를 생성했음
그 폴더로 위치를 이동한 후에 package.json을 생성해보자.
npm init -y 명령어를 입력하면
{
"name": "ts-todo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}짠 이런 형태의 기본 package.json 세팅 완료.
이제 axios 를 깔아보자.
npm install axios
프로젝트 폴더에 들어가보면 node.modules 디렉토리에 axios 폴더가 생성된 것이 보임!!
이제 index.ts 파일을 만들어줄거다.
//index.ts
import axios from 'axios';
const url = 'https://jsonplaceholder.typicode.com/todos/1';
axios.get(url).then(response => {
console.log(response.data);
});ts파일은 노드 환경에서 컴파일 되지 않기 때문에 ts 전용 명령어를 써줘야 한다.
tsc index.ts 명령어 입력 고고
그럼 index.js 파일이 생기고 그제서야 node 명령어를 쓸 수 있음
node index.js 입력해보면 콘솔에
{ userId: 1, id: 1, title: 'delectus aut autem', completed: false } 이렇게 axios로 받아온 값이 뜸!! 오예
음.. ts-node index.ts 쳐도 똑같이 터미널에 나온다는데 왜 안떠??
module not found 에러가 뜬다. 구글링 고고
찾아보니 typescript를 global로 깔지 말고 local로 깔라고 해서 다시 깔기 고고
npm install i typescript
하고 다시 ts-node index.ts 쳐봤더니 이제 터미널에 콘솔이 제대로 뜬다!
콘솔에 들어오는 값을 깔끔하게 보이기 위해 template literal을 사용해줄거다. 거기에 TS의 interface까지 적용해볼거다.
import axios from 'axios';
const url = 'https://jsonplaceholder.typicode.com/todos/1';
interface Todo {
id: number;
title: string;
completed: boolean;
}
axios.get(url).then(response => {
const todo = response.data as Todo;
const ID = todo.ID;
const title = todo.Title;
const finished = todo.finished;
console.log(`
The Todo with ID : ${ID};
Has a title of : ${title}
Is it finished? ${finished}
`);
});여기서 interface는 TS에서객체 구조를 정의할때 사용된다. 이대로 타이핑을 해보면 우리가 axios 안에 선언한 변수에 빨간 줄이 그어진다! interface에서 정의해준 data의 type이 일치하지 않기 때문!!
에러를 바탕으로 수정을 해보면 제대로 콘솔이 찍힌다. 라잌 디스
The Todo with ID : 1;
Has a title of : delectus aut autem
Is it finished? false한가지 더 실험을 해보기 위해 logTodo를 만들었음
import axios from 'axios';
const url = 'https://jsonplaceholder.typicode.com/todos/1';
// interface는 TS에서객체 구조를 정의할때 사용된다.
interface Todo {
id: number;
title: string;
completed: boolean;
}
axios.get(url).then(response => {
const todo = response.data as Todo;
const id = todo.id;
const title = todo.title;
const completed = todo.completed;
logTodo(id, completed, title);
});
const logTodo = (id, title, completed) => {
console.log(`
The Todo with ID : ${id};
Has a title of : ${title}
Is it finished? ${completed}
`);
};다시 ts-node를 이용해 터미널에 찍힌 값을 확인해보면..
The Todo with ID : 1;
Has a title of : false
Is it finished? delectus aut autem왜 이런 결과가 나왔냐! logTodo의 argument에 type을 정의해주지 않았기 때문에 아무 값이나 다 받아도 다 되는 상태였..
const logTodo = (id: number, title: string, completed: boolean) => {
console.log(`
The Todo with ID : ${id};
Has a title of : ${title}
Is it finished? ${completed}
`);인자로 들어가는 id, title, completed에 각각 type을 정의해줌 또 ts-node를 이용해 터미널에 찍힌 값을 확인해보면 에러가 뜸 왜냐.. boolean으로 받아야할 값에 string이 나왔기 때문!
axios 내부에서 자리를 조금 바꿔주자
logTodo(id, title, completed); 요렇게 하면 에러 싹 사라짐~~ 굿굿쓰
Type annotations vs inference
Type annotations란 우리말로 타입 주석을 말한다. 우리가 TS에게 전달해야 할 값의 타입 Type ineference는 우리말로 타입 추론! TS가 특정 변수가 어떠한 타입을 지닌지 추론하려는 것을 말함
Type annotations for functions =>