타입스크립트란 뭘까 ?
'자바스크립트에 타입이 명시되어 있는 것.'
이렇게 이해하면 편할 거 같다.
작성된 자바스크립트 코드에 변수, 함수, 인자 부분에 들어가는 값의 타입을 지정해주게 되어서, 작성자 뿐만 아니라 누가 봐도 구분하기 쉽도록 도와주는 헬퍼 개념이라고 받아들였다.
그럼 사용법에 대해 알아보자.
우선 Node.js 최신 버전을 설치한다.
그리고 npm install -g typescript 명령어를 통해 타입스크립트를 설치한다 !
그리고 폴더, 파일 만들어서 js 작업할 때랑 똑같이 작업하면 되는데,
다른게 있다면 파일명을 .js가 아니라 .ts로 끝나도록 만들면 된다.
이제 작업 진행하면 되는데, 하다 보면 콘솔 찍어서 확인도 해야되기 때문에
터미널에 tsc -w 명령어를 입력하면 TS 파일을 가까운 JS 파일로 컴파일해서 옮겨준다. 그 JS파일을 html 문서에 연결해서 브라우저 띄우면 된다 !
리액트로 프로젝트 세팅할 때는,웬만하면 기존에 있던 프로젝트에 연결하기 보다는 새로 만들어서 진행하는게 속편하다.. 기존꺼 변환하다가 식겁함 ㅎ
어쨌든 두 가지 방법 적어보면
기존의 리액트 파일이 있는 경우 명령어
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
새로운 TS 리액트 프로젝트 만드는 경우 명령어
npx create-react-app my-app --template typescript
그럼 이제 타입스크립트는 어떻게 사용하면 되는지 문법에 대해 좀 살펴 보자.
간단히 변수명 : 타입명 구조로 작성하면 된다.
나는 변수에 타입이라는 실드를 씌워서 에러를 방지한다 ~~이렇게 받아 들였다.
예시)
let 이름 : string = 'kim';
let 나이 : number = 50;
let isHeMarried : boolean = false;이런 느낌으로 변수명 옆에 타입을 작성해주고, 그 타입에 해당하는 값만 = 뒤에 올 수 있다 !
타입의 종류는 string, number, boolean, null, undefined 등등 웬만한 자바스크립트에서 배운 것들은 거의 다 된다고 보면 된다.
배열의 경우
let 회원들 : string[] =[‘kim’, ‘park’] 변수명 오른쪽에 타입 적어주는 건 동일한데, 배열 안에 들어갈 타입을 먼저 적어주고 바로 오른쪽에 배열 표시인 [] 해주면 된다.
[string] 이렇게 됐으면 직관적이어서 좋을텐데 아쉽다 ㅎ
아무튼 이번엔 객체의 경우를 보자.
객체의 경우
let 회원들 : {member1 : string, member2 : string}
= {member1 : ‘kim’ , member1 : ‘park’]
let project : {
member : string[],
days: number,
started : boolean
}
=
{
member : [‘kim’, ‘park’]
days : 30
started: true,
}
객체는 key 옆에 세미콜론 붙이고 타입명 적어주면 된다.
이제 특징이 좀 보인다. 타입스크립트는 타입과, 작성되는 코드의 형식을
짝 맞추기 하듯이 똑같이 일치시켜 주면 되는 것 !!
그리고 또 다른 특징이 있다면, 타입스크립트는 스스로 판단해서 타입을 씌워준다는거다. 궁금하면 코드 적어놓고 커서 갖다대보면 됨 ㅎ
물론 안해주는 것도 있기 때문에 타입을 지정해주고 앉아있겠지 ?
근데 보면 변수에 어떤 값이 들어올지 애매한 경우 있음.
문자가 올 수도 있고 숫자가 올 수도 있다면..?
let 회원 : number | string =‘kim’;이런 식으로 적어주면 됨. 지금은 'kim'이라고 문자열 적어줬기 때문에
커서 올려보면 string이라고 뜰거임.
숫자 or 문자가 가능한 array 타입 지정은?
: (number | string) []여기서 체크. 괄호로 안 묶으면 숫자 혹은 문자열이 들어앉아 있는 배열로 인식되므로 주의!
숫자 or 문자가 가능한 object 타입 지정은?
{a : number | string} ={a : 123}
타입 중에 any 라는 애가 있음.
말 그대로 어떤 것이든 올 수 있다는 거다. 근데 이거는 어떤 타입이든 올 수 있다는 거니까 오히려 타입 실드를 해제해버리게 된다. 그니까 타입스크립트를 쓸 이유가 없어지는거지.
그 대신 쓸 수 있는 애가 있다.
바로 unknown !
1. 모든 자료 다 집어넣을 수 있음.
2. 자료 넣어도 타입은 그대로 unknown임근데 일단 자주 사용하지는 말고, 비상 시에 쓰는 변수 타입체크 해제 기능 정도로 생각하고 쓰면 될 듯 하다.
