[TIL]08.타입스크립트 세팅 + 데이터 타입

자바스크립트를 더욱 강력하게 만들어줄 타입스크립트

자바스크립트에서는 변수를 선얼할때 타입을 지정하지 않고 실행시점에 타입이 결정되는 언어이다. 이러한 특징 때문에 편한 부분도 있지만 예기치 못한 결과를 초례하기도 한다. 이러한 문제는 프로젝트가 커지면 커질수록 더욱 심각해졌다. 이러한 배경 때문에 타입스크립트가 등장했고 최근엔 많은 자바스크립트로 된 프레임워크에선 타입스크립트를 권장한다. 개인 과제도 제출했고 강의도 2 회독이 끝나서 오늘은 

앞으로 배우게될 타입스크립을 미리 만나보았다.

 

타입스크립트 설치하기

1.폴더 만든 후 오픈하고 터미널 오픈하기

여기서는 Test 이름의 폴더를 만들었다

2. 해당 명령어를 입력해야 한다(npm이 설치되어있어야 한다.)

npm install -g typescript

3. 설정 파일을 만들어준다

tsc --init

4. 코드를 작성 후 해당 명령어로 컴파일해준다.

npx tsc

js파일로 컴파일된 것을 볼 수 있다.

 

 

타입스크립트를 왜 사용하는가?

앞서서도 말했지만 타입스크립트를 사용하는 가장 큰 이유는 타입을 체크해 준다는 것이다. 그 타입에 관하여 기존 스크립트에 추가된 문법이 존재한다.

• 변수를 선언할 때 타입을 지정해주어야 한다.

// string 타입으로 지정
let name:string = "홍길동";

• 튜플(Tuple)
  • 튜플(Tuple)을 이용하여 다양한 타입의 배열을 만들 수 있다.

// 튜플 => index로 접근 가능함
let x: [string, object] = ["홍길동", { name : "kim"}];
console.log(`튜플 테스트 ${x[0]}`);

• 열거형(Enum)
  • 열거형(Enum)을 선언하고 타입으로 사용할 수 있다.

// 열거
enum Color {Red, Green}
let c: Color = Color.Red;

• Any 타입
  • 타입을 만들 때 어떠한 타입이 들어올지 모를 때 사용하는 Any타입이 있다.

// Any
let anyScore: any = "";
let anyArray: any[] = ["아무거나 들어감", 20, {}];

• Void 타입
  • 어떠한 타입도 존재할 수 없다

// Void
function printUser(): void {
    console.log('홍길동');
}

• Object 타입
  • 원시 타입이 아닌 타입

// Object
let obj: object = [1, 2, "", {}];

• 타입 단언(Type Assertions)
  • 개발자가 값에 대해 더 잘 알고 있을 때 사용
  • 그렇다고 다른 검사를 하는 것은 아니다
  • 데이터를 변환시키지 않는다 런타임시 영향 x
  • 컴파일러만 사용한다

//1.첫번재 방법
let someValue: any = "test";
let strLength: number = (<string>someValue).length;

//2.두번째 방법
let strLength2: number = (someValue as string).length;