🤔 타입스크립트를 쓰는 이유
이번에 이직을 준비하면서 느낀 점은 정말 많은 회사들이 체용공고에 타입스크립트를 기술스텍에서 빼놓지 않고 기입한다는 것이다.
자바스크립트에서 타입부분을 업그레이드된 것이 타입스크립트라고 알고있는데 이걸 굳이 왜 써야할까?
이유는 js는 5-'3'같이 숫자와 문자를 연산해도,
parseInt([1,2,3]) 숫자로 바꿔주는 함수에 이상한걸 넣어도,
오류 없이 그냥 넘어가줌. 자기가 알아서 타입을 변경해주기 때문이다(js는 Dynamic typing을 지원하는 언어이기 때문)
근데 typescript는 이런 부분들을 모두 에러로 잡아줌. 그래서 타입에 관련된 버그들을 줄일 수 있음.
심지어 오타도 잡아줌. 일종의 에디터 부가기능같은거라고 보면 됨.
🤔 설치 및 세팅
✨ 일반 HTML CSS JS웹개발 시 타입스크립트 사용하려면..
1. Nodejs 최신버전, VScode 사용
Nodejs는 항상 최신버전인게 좋음
2. Vscode에디터에서 터미널 오픈
npm install -g typescript터미널에 위 코드 입력.
타입스크립트 컴파일러라는걸 설치하는건데 컴터마다 한 번만 하면 됨.
📎 에러가 날땐...
1. nodejs최신버전 재설치
2. 윈도우 : 허가되지않은 script 실행 불가 어쩌구 에러 뜨면 powershell 관리자 권한 실행 후Set-ExecutionPolicy Unrestricted입력 후 Y
3. 맥북 : 보안에러 어쩌구 에러 시sudo npm install 어쩌구~앞에 sudo를 붙이면 될 듯
3. 작업폴더 생성
작업폴더 생성 후 에디터로 작업폴더 오픈
4. .ts파일 생성
ts파일은 js랑 똑같이 사용 가능
다만 웹브라우저는 js파일만 알아들을 수 있으므로 js파일로 변환 작업을 해야 함.
5. js파일로 변환
터미널에 tsc -w를 입력하면 얘가 자동으로 ts파일을 js파일로 근처에 변환해줌
6. 다른 파일에서 타입스크립트 코드를 사용하려면
.ts가 아니라 변환된 .js파일을 사용해야 함.
<script src="변환된파일.js"></script>✨ React프로젝트에서 Typescript사용할 경우
1. 이미 있는 리엑트프로젝트에 설치하려면
작업폴더경로에서 터미널 오픈 후 아래 명령어 입력
npm install --save typescript @types/node @types/react @types/react-dom @types/jest이렇게 해주면 .js파일을 .ts로 바꿔서 사용 가능하긴헌디..
- yarn 1버전이 설치되어 있으면 yarn add라는 명령어를 쓰거나,
- 애초에 처음부터 typescript적용된 리엑트프로젝트를 생성할 수 있음.
2. 그냥 React프로젝트를 새로 만들거면
새로 작업폴더를 하나 만들고 터미널 오픈 후 아래명령어 입력해주면 됨.
npx create-react-app 프로젝트명 --template typescript✨ Vue프로젝트에서 Typescript사용할 경우
1. 라이브러리 설치
vue add typescript작업폴더경로에서 터미널 오픈 후 위 명령어 입력하면 라이브러리가 설치 됨.
2. vue파일에서 타입스크립트를 쓰려면
<script lang ="ts">
</script>이렇게 lang옵션을 켜두고 쓰면 됨.
Vue플젝트 내에서도 tsconfig.json파일을 만들어서 설정도 자유롭게 가능함.
🤔 기본 문법
let 이름 :string = 'kim'✨ 변수명 : 타입명으로 변수를 만들때 타입지정이 가능함.
📎타입으로 쓸 수 있는것들
string, number, boolean, bigint, null, undefined, [], {}
let 이름 :string = 'kim'
이름 = 123;✨ 타입을 지정해놓으면 타입이 의도치 않게 변경될 경우 에러메시지를 띄움
let 이름 :string[] = ['kim', 'park']
let 나이 :{age : number} = {age : number}✨ array혹인 object자료는 [], {}으로 타입지정이 가능
let 이름 :string|number = 'kim✨ 변수에 여러가지 타입이 들어올 수 있다면 파이프문자를 이용해 or연산자를 표현할 수 있음
type NameType = string|number;
let 이름 :NameType = 'kim';✨ type키워드를 이용해 타입을 변수처럼 담아서 사용이 가능함.
type NameType = 'kim'|'park';
let 이름 :NameType = 'kim';✨ string이나 number뿐만 아니라 나만의 타입도 만들어 사용이 가능함.
위 코드처럼 원하는 글자나 숫자를 입력한 다음 이름이라는 변수에 'kim'또는 'park'만 들어올 수 있다고 지정해줄 수 있음.
이런걸 literal type이라고 부름
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
}
}✨ ts는 지금 변수의 타입이 확실하지 않으면 마음대로 연산할 수 없음.
항상 타이비 무엇인지 미리 체크하는 narrowing 또는 assertion문법을 사용해야 허락해줌
type Member = [number, boolean];
let john :Member = [100, false]✨ array자료 안에 순서를 포함해서 어떤 자료가 들어올지 정확히 지정하고 싶으면 tuple타입을 쓰면 됨.
대괄호[]안에 들어올 자료의 타입을 차례로 적어주면 됨.
type MyObject = {
name? : string,
age : number
}
let john :MyObject = {
name : 'kim',
age : 50
}✨ object타입도 정의가 너무 길면 type키워드로 변수에 담아 사용이 가능함
type키워드 대신 비교적 최근에 나온 interface키워드를 이용해도 무방함.
특정속성이 선책사항이면 물음표를 기입가능함.
type MyObject = {
[key :string] : number
}
let john :MyObject = {
age : 50,
weight : 100
}✨ object안에 어떤 속성이 들어갈지 아직 모른다면 그냥 전부 싸잡아서 타입지정도 가능함
index signature라고 함.
class Person {
name;
constructor(name :string){
this.name = name;✨ class도 타입지정 가능
근데 중괄호 내에 미리 name이렇게 변수를 만들어놔야 constructor안에 this.name이렇게 사용이 가능함.
📎tip
근디 간단한건 굳이 타입지정안해줘도 됨.
VScode에서 변수에 마우스오버를 하면 지정한 타입이 나옴
근데 타입지정해준것을 빼도 user라는 변수가 string타입이라고 타입스크립트에서 알아서 타입을 지정해줌.
