타입스크립트 쓰는 이유
웹개발자 채용공고보면 타입스크립트가 항상 보입니다.
규모가 좀 있는 곳들은 거의 타입스크립트를 요구스펙에서 빼놓지 않고 기입하는데
모른다고 그리 걱정할건 아닙니다. 왜냐면 정말 별거 없어서 그렇습니다.
타입스크립트는 자바스크립트의 타입부분을 업그레이드해서 사용하고싶을 때 설치해서 쓰는
일종의 자바스크립트의 대용품입니다.
완전 다른 언어는 아니라 자바스크립트 문법 그대로 이용가능한데 타입문법을 업그레이드해서 쓸 수 있습니다.
왜냐면 자바스크립트는 타입에 관대합니다.
5 - '3' 이렇게 숫자와 문자를 연산해도
parseInt([1,2,3]) 숫자로 바꿔주는 함수에 뭔가 이상한걸 넣어도
아무런 제지가 없습니다.
=다 가능
지가 알아서 타입을 바꿔주기 때문입니다.
(멋있는 말로 자바스크립트는 Dynamic typing 을 지원하는 언어입니다)
근데 타입스크립트는 이런걸 전부 에러로 잡아줍니다.
이거 하나 때문에 쓰는 언어가 바로 타입스크립트입니다.
코딩 꼰대들은 이런 생각을 할 수 있습니다.
"굳이?"
하지만 1. 코드 천줄 만줄 짜다보면
2. 남이짜던 자바스크립트 수정할 일이 생기면
생각이 달라질 수 있습니다.
Dynamic typing은 쪼그만 기능들을 개발할 땐 편리하겠지만
여러분 큰 프로젝트할 때는 이런게 오히려 단점입니다.
type과 관련된 버그들이 많이 발생합니다.
천재라서 버그 안만들 자신이 있다고요?
하지만 남이 짠 더러운 코드를 수정할 땐 천재든 지니어스든 무소용입니다.
남이 짠 코드에 뭔가를 더하거나 수정할 때 정말 알 수 없는 타입관련 버그들이 생길텐데
제발 타입스크립트로 만들어졌길 빌어야합니다.
타입스크립트를 쓰면 에러메세지도 더 정확해집니다.
쌩 자바스크립트는 "이거 좀 이상한데요나도 몰?루" 같은 애매한 에러메세지가 많은데
타입스크립트는 엄격한 타입룰 덕분에
"여기에 숫자가 들어와야하는데 문자쓰지마라 멍청아"
"님 토익 300점임? object에 apend() 그런건 없어요 append() 말한거 아님?"
이렇게 친절하게 알려줍니다.
그래서 언어보다는 일종의 에디터 부가기능있죠 그런거랑 비슷하다고 보면 됩니다.
일반 HTML CSS JS 웹개발시 타입스크립트 사용하려면
앞으로의 강의도 이 환경에서 타입스크립트를 사용해볼 것입니다.
제일 간단하고 좋으니까요
1. Nodejs 최신버전, VScode 에디터를 설치합니다.
Nodejs는 언제나 최신버전 아니면 에러가 잦습니다. 구글에 검색해서 둘다 설치합시다.
2. VScode 에디터에서 터미널을 오픈합니다.
상단메뉴에 Terminal - New Terminal 누르면 됩니다.
3. 터미널에서 입력합니다.
npm install -g typescript타입스크립트 컴파일러라는걸 설치하는건데 컴퓨터마다 한 번만 하면 됩니다.
(1) nodejs 최신버전 설치를 안한 것임 삭제 후 최신 버전으로 재설치 합시다.
(2) 윈도우인데 허가되지 않은 script 실행불가 어쩌구 에러가 뜨면
시작 - 검색 - powershell - 우클릭해서 관리자 권한으로 실행한 다음
Set-ExecutionPolicy Unrestricted 입력하셈 그리고 y 선택하면 될듯
(3) 맥북인데 보안에러 어쩌구가 뜨면
sudo npm install 어쩌구~ 이렇게 sudo를 앞에 붙여보십시오.
중간에 맥북 비번입력이 필요할 수 있습니다.
4. 코드짤 작업폴더를 하나 만들어줍니다.
코드짤 폴더 아무데나 만드셈 찾기좋은 바탕화면이 어떨까요.
5. 작업폴더를 에디터로 오픈합니다.
에디터에서 상단메뉴중에 File - Open Folder 누르고 방금 만든 작업폴더 오픈하면 됩니다.
오픈안하면 큰일남
6. 그 다음에 작업폴더에 .ts로 끝나는 파일 만들고 타입스크립트 사용 시작하면 됩니다.
ts 파일은 js랑 똑같이 사용가능합니다.
다만 근데 웹브라우저는 ts 파일을 알아듣지 못하기 때문에
js 파일로 변환 작업을 해야합니다.
그리고 파일 하나 더 생성해서
저거 그대로 써주기.
7. js 파일로 변환하려면 에디터에서 Terminal 새로 여신다음
tsc -w 입력해두면 얘가 자동으로 ts파일을 js 파일로 근처에 변환해줍니다.
.ts 파일은 브라우저가 못읽음.
터미널은 오픈 한 다음에
저거 입력해주기.
자동으로 자바스크립트 파일 생기는거 왼쪽에서 확인 가능
js 로 변환하는 과정 = 컴파일 한다.
컴파일할 때 옵션들을 보통 저기다가 기입을 한다.
8. 이제 HTML 파일 등에서 타입스크립트로 작성한 코드를 사용하려면
당연히 .ts가 아니라 변환된 .js 파일을 사용하십시오.
<script src="변환된파일.js"></script>React 프로젝트에서 Typescript 사용할 경우
1. 이미 있는 React 프로젝트에 설치하실거면
작업폴더경로에서 터미널을 오픈하신 후
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
입력해주면 끝입니다. 이제 .js 파일을 .ts 파일로 바꿔서 이용가능합니다.
근데 뭔가 많아서 불안정하고 에러도 많이날 것 같죠?
그러면 yarn 1버전이 설치되어있으면 yarn add라는 명령어 쓰든가
그냥 애초에 처음부터 Typescript 적용된 React 프로젝트를 생성할 수도 있습니다.
2. 그냥 React 프로젝트를 새로 만들거면
새로 작업폴더를 하나 만드시고 거기서 에디터와 터미널을 오픈한 다음
npx create-react-app my-app --template typescript입력해주면 끝입니다. 대시 두개임
Vue 프로젝트에서 Typescript 사용할 경우
1. 작업폴더경로에서 터미널을 오픈하신 후
vue add typescript입력하면 라이브러리가 설치됩니다.
2. 이제 vue파일에서 타입스크립트를 쓰려면
<script lang="ts">
</script>이렇게 lang 옵션을 켜두고 쓰면 알아서 잘 됩니다.
Vue 프로젝트 내에서도 tsconfig.json 파일 만들어서 설정도 자유롭게 가능합니다.
타입스크립트 10분 정리
변수만들 때 그냥 변수만들 지 않고
변수 타입을 지정할 수 있다.
이름 변수인데 이름 변수에는
String 만 가능
let 이름 :string = 'kim'변수를 만들 때 타입지정이 가능합니다.
변수명 : 타입명 이렇게 씁니다.
타입으로 쓸 수 있는 것들은 string, number, boolean, bigint, null, undefined,[], {} 등이 있습니다.
let 이름 :string = 'kim';
이름 = 123;타입을 지정해놓으면 타입이 의도치 않게 변경될 경우 에러메세지를 띄워줍니다.
덕분에 타입관련 버그들을 사전에 찾아 없앨 수 있습니다.
let 이름 :string[] = ['kim', 'park']
let 나이 :{ age : number } = { age : number }array 혹은 object 자료는 이렇게 타입지정이 가능합니다.
이름이라는 변수에는 array 만 들어울 수 있게 하려면
[] 이걸 써줌. 이게 array 라는 뜻.
array 안에 구성 물품이 어떤 타입인지를 정의도 해줘야함.
= string 으로 정의해줌.
- 숫자 집어넣으면 바로 에러난다.
오브젝트 자료는 저런 식으로 적음.
object 자료형도 타입 지정 가능.
= name (변수)은 string 타입이 들어올 수 있어요.
오브젝트 자료는 저기다가 ? 를 쳐서
name 이라는 속성이 들어올 수도 있고, 안들어올 수도 있다는
속성이 들어오는게 불확실할 때 사용해줄 수도 있음.
= 저 속성이 안들어와도 에러 안나게 해줘 라는 의미 .
kim 이라는 자료를 가진 변수 생성.
이름이라는 변수에는
문자도 들어올 수 있고, 가끔 숫자도 들어와야 함.
그럴경우에 | 라는 or 기호를 사용.
let 이름 :string | number = 'kim';이 변수에 여러가지 타입의 데이터가 들어올 수 있다면
| 기호를 이용해 or 연산자를 표현할 수 있습니다.
위 예제는 변수에 숫자 혹은 문자를 집어넣을 수 있게 됩니다.
타입 지정하는게 길다고 느끼면 변수에 담아서 사용할 수 있다.
변수 만들고 싶으면
type 이라는 키워드를 먼저 작성.
작명을 자유롭게 한 다음에
타입을 집어넣어주면 된다.
*작명할 때 보통 영어 대문자로 많이 작명함.
type nameType = string | number;
let 이름 :nameType = 'kim';type 키워드를 이용해 타입을 변수처럼 담아서 사용가능합니다.
type NameType = 'kim' | 'park';
let 이름 :NameType = 'kim';string number 이런 것 뿐만 아니라 나만의 타입을 만들어 사용가능합니다.
저렇게 원하는 글자나 숫자를 입력하면 이름이라는 변수엔 앞으로 'kim' 또는 'park'만 들어올 수 있습니다.
literal type이라고 부릅니다.
함수를 만들 때도 타입 지정이 가능하다.
함수에 파라미터값도 있고,
return 값도 있는 경우.
각각 타입 지정을 할 수 있다.
파라미터에 타입 지정하고 싶으면 저렇게 써주고
- 변수 만들듯이
그리고 리턴도 리턴값이 어떤 타입인지 미리 체크 가능.
저기다가 콜론을 쳐준다.
이런 의미로 사용.
function 함수명(x :number) :number{
return x * 2
}함수는 파라미터와 return 값이 어떤 타입일지 지정가능합니다.
실수로 다른 타입이 파라미터로 들어오거나 return될 경우 에러를 내줍니다.
함수는 return 타입으로 void를 설정가능한데 return이 없는지 체크할 수 있는 타입입니다.
//에러
function 함수명(x :number | string) {
return x * 2
}
//가능
function 함수명(x :number | string) {
if (typeof x === 'number'){
return x * 2
}
}타입스크립트는 지금 변수의 타입이 확실하지 않으면 마음대로 연산할 수 없습니다.
항상 타입이 무엇인지 미리 체크하는 narrowing 또는 assertion 문법을 사용해야 허락해줍니다.
array 자료를 만들 때
숫자가 무조건 들어가야 하는 경우도 타입지정 가능.
우선 array 타입을 생성.
대괄호 안쪽에다가 타입명을 지정해줌.
이걸 어떤 변수(john) 에다가 활용 가능.
무조건 저 타입이 들어가야 함.
type Member = [number, boolean];
let john:Member = [100, false]array 자료 안에 순서를 포함해서 어떤 자료가 들어올지 정확히 지정하고 싶으면
tuple 타입을 쓰면 됩니다. 대괄호 [ ] 안에 들어올 자료의 타입을 차례로 적어주면 됩니다.
object 자료 타입지정할 때
이러면 에러가 안남.
나중에 들어가야 할 타입들이 많으면?
한 번에 모아서 등록할수도 있음.
저건 모든 object 속성이라는 의미 .
저렇게 코드 짤 수 있다.
type MyObject = {
name? : string,
age : number
}
let 철수 :MyObject = {
name : 'kim',
age : 50
}object 타입도 정의가 너무 길면 type 키워드로 변수에 담아 사용가능합니다.
type 키워드 대신 비교적 최근에 나온 interface 키워드를 이용해도 무방합니다. 차이점은 별로 없습니다.
특정 속성이 선택사항이면 물음표를 기입가능합니다.
type MyObject = {
[key :string] : number,
}
let 철수 :MyObject = {
age : 50,
weight : 100,
}object안에 어떤 속성이 들어갈지 아직 모른다면
그냥 전부 싸잡아서 타입지정도 가능합니다.
index signature라고 합니다.
class 문법도 타입지정 가능.
변수를 만들어서 미리 타입지정.
class Person {
name;
constructor(name :string){
this.name = name;
}
}class도 타입설정이 가능합니다.
다만 중괄호 내에 미리 name 이렇게 변수를 만들어놔야 constructor 안에서 this.name 이렇게 사용가능합니다.
근데 문법만 정리했다고해서 코드를 잘 짤리가 없죠
영문법책 읽어봤다고 영어로 프리토킹 잘한다는 소리같군요
다음 시간부터 보다 상세한 개념과 예제를 알아봅시다.