front-end 국비과정 일차 21일차 학습일지 TypeScript:설치와 실행법,Type Annotation

typeScript란?  
타입스크립트는 자바스크립트에 타입을 부여한 언어이다 JS와 다르게 브라우저에서 동작하기위해 컴파일(compile) 즉 변환 과정을 거쳐야한다.

typeScript를 쓰는이유
1JS는 브라우저에서 돌아갈때 속도는 빠른데 버그 발생시 버그잡기어려움
2typescript는 버그 발생시 버그잡기쉬움
3프로젝트 규모커지면 버그 잡는게 더 어려워짐
4고로 시간 좀 걸려도 버그잡기 쉬운 typescript가 JS보다 안정적이기때문에 사용한다.

---

타입스크립트 설치와 실행법 
1터미널에서 npm init -y를 입력하여 package.json과 package-locks.json을 생성한다

2터미널에서 npm i typescript라고 명시하면 package.json에 typescript설치 가능
typescript는 javascript로 컴파일되기 때문에 브라우저에 직접적인 영향을 끼치지 않으므로 개발용 의존성 패키지이다 때문에 -D를 붙여주자

3typescript를 실행하기 위해서 터미널에서 tsc <실행시킬 파일이름>을 입력한다
ex) tsc test.ts
tsc란? (typeScript compiler)의 약어

4 tsc를 통해 typescript를 실행시키면 해당 typescript파일이 javascript로 컴파일된다

5 코드에디터에 터미널에서 보안상 오류를 출력한다면 window사용자는 powershell을 관리자로 실행하여 Set-ExecutionPolicy RemoteSigned 명령을 실행하여 모드를 변경한다

6 터미널에서 tsc --init을 명시하면 tsconfig.json파일을 생성할 수 있다.

tsconfig.json이 폴더에 있을경우 

1tsconfig.json이 폴더에 있을경우 터미널에서 file명 없이 tsc라고 입력해도 해당 파일이 js파일로 컴파일된다 
2터미널에서 tsc -w를 명시하면 typescript가 watch모드로 변경되어 typescript 파일을 수정시 컴파일된 js파일이 typescript 파일의 수정내용을 인식하여 자동으로 컴파일 한다 
ctrl + c를 터미널에 입력하면 watch모드를 종료 할 수 있다.
3 tsconfig.json에서 "strict": true 가 명시되어 있어야 오류없이 사용 가능하다       

---

Type Annotation이란?: 
1변수에 데이터 타입을 지정해주는 기능이다 
2Type Annotation으로 타입을 지정해주면 특정변수에 해당타입의 데이터 값만 사용가능하다
3typescript가 가진 고유의 기능이다
4사용법 = 변수 : <사용할 데이터type>
ex)

let a : string; 
a = "Mark" 
a = 39 //터미널에서 error

function int(a:number,b:string){
  return console.log(a,b)
}// 함수안에 파라미터에 Type Annotation을 이용하여 파라미터에 사용할 수 있는 데이터 타입을 지정  

int(3,'짱구') // 정상 출력
int(3,2) // b에 데이터 타입을 문자로 작성하지않았기 때문에 터미널에서 error

---

union 타입
union 타입은 Type Annotation으로 사용 가능한 타입을 여러개 설정 해주는 기능을 가진다 |(버티컬 바)를 사용하여 데이터 타입을 구분한다
ex)

let test = function (a: string | number) {
  return console.log(a)
}
// union 타입을 사용했기 때문에  test라는 함수에 파라미터 a에 string 뿐만아니라 number도 사용가능하게됨
test('짱구')
test(36)

---

typescript의 데이터type과 javascript의 데이터type의 차이 

typescript : 정적인 타입(static type)이라부른다 
1 개발하는 도중에 데이터 type을 확인한다
2 기본적으로 javascript와 type이 동일하다 다만 프로그래밍을 도와줄 추가적인 데이터 type이 존재한다
3 typescript에서 javascript의 타입을 명시할땐 모두 소문자로 명시해야한다

typescript의 추가적인 데이터 type 

 

array:
배열을 typescript로 작성할 때에는 Type Annotation 작성 방식이 조금 다르다

작성법 = 
1 변수 : 데이터type [] 라고 작성 해줘야한다.
2 [](배열)안에 요소가 데이터 타입이 여러개라면 union 타입을 사용해야 하고 ()로 묶어줘야 한다
ex)

let arr:number[] =[1,2,3] 
// 배열안에 요소가 하나의 데이터type(number)으로 작성되었을경우 
let arr2:(number|string)[] = [1,2,3,'4']
// 배열안에 요소가 여러게의 데이터 type(number,string)으로 작성되었기 때문에 union타입을 사용하여 
// 사용된 데이터타입을 () 안에 묶어줘 작성한 경우

any: 

값으로 어떤 타입이 들어가든 어떤 프로퍼티(속성)을 사용하든 오류를 내지않고 허용해주는 Type Annotation이다.

 

1 typescript를 사용할때 최대한 사용하지 않는게 좋다 type 체크가 정상적으로 이뤄지지 않기 때문이다.
2 어떠한 값이 들어가야 할 지 명확하지 않을 때 사용한다. 

ex)

let valueNumber:number = 10
//valueNumber라는 변수에 typeAnnotation을 number로 설정후 10이라는 값을 넣어준 코드
console.log(valueNumber.push("hello"))
//valueNumber는 데이터 타입이 number이고 push()는 number에서 사용 할 수 없는 기능이기 때문에 오류가 남 

let valueAny:any = 20
//valueAny라는 변수에 typeAnnotation을 any로 설정후 10 이라는 값을 넣어준 코드
//any는 어떠한 데이터 타입도 허용하기 때문에 다른 값을 명시해도 정상작동 
console.log(valueAny.push('hello'))
//any는 어떠한 데이터 타입도 허용 하기때문에 number에는 사용 할 수 없는 push() 기능을 사용해도 오류 x
//때문에 주의해서 사용해야함

unknown:
1any와 같이 value에 어떤 타입이 들어가든 오류를 내지않는다 
2타입을 정확히 모르기때문에 프로퍼티(속성)와 연산이 불가능 하다는 점에서 any와 다르다

ex)

let valueAny:any = 10
//valueAny라는 변수에 typeAnnotation을 any로 설정후 10이라는 값을 넣어준 코드
console.log(valueAny.push("hello"))
//valueAny는 데이터타입이 number이고 push()는 number에서 사용 할 수 없는 속성임에도 오류x

let valueUnknown:unknown = 20
//valueUnknown이라는 변수에 typeAnnotation을 unknown으로 설정후 20이라는 값을 넣어준 코드
//unknown은 어떠한 데이터 타입이 들어가도 상관없기 때문에 오류 x
console.log(valueUnknown.push("hello"))
//valueUnknown에 push라는 속성 사용 unknown은 어떠한 데이터 타입이 들어와도 상관없지만
//함부로 속성이나 연산을 할 수 없기때문에 오류발생

void:
1어떠한 타입도 가지지않는다는 의미를 가진 Type Annotation이다 
2즉 어떠한 기능도 하지않는다는 표시를 해준다고 할 수 있다.


never:

어떤 type이든 error를 발생시킨다 

1주로 return에서 사용된다
2함수 표현식,화살표함수에서 항상 error발생시킴
3never는 어떤 타입에서든 사용 가능하지만 never에는 어떤 타입도 사용 할 수 없다.
4 잘못된 타입을 넣는 실수를 방지하고자 사용하기도 한다


Tuple: 

tuple로 작성된 데이터 type과 순서,길이를 동일하게 하여 값을 작성해야 하는 기능을 가진다 
작성법 =  let hello:[데이터type,데이터type,데이터type]
ex)

let EX:[string,number]
//EX라는 변수에 Type Annotation을 tuple로 지정해준 코드

EX = ["짱구",39]
//tuple안에 1번은 string 2번은 number에 맞게 값을 작성했기 때문에 정상 작동 

EX = ["짱구",'철수'] 
//오류 나는 코드 EX라는 변수는 Type Annotation이 tuple이고
//tuple안에 2번은 number이므로 값을 string으로 작성 할 수 없기 때문

let EX:[string,number]
EX = ["짱구",39,'철수']
//오류 나는 코드 tuple의 길이와 일치 하지 않기 때문

javascript : dynamic type이라 부른다
1 개발하는 도중에는 데이터 type을 확인 할 수없고 브라우저에 돌려봐야 데이터 type을 알 수 있다.