TypeScript Intro

TypeScript 기본정리
- 자바스크립트의 특징은 타입선언이 유연하다는 것이다.
그러나 이 특징으로 인해, 특정 타입으로 지정할 생각으로 만든 변수에 대해 작업되는 메서드를 만들었을 때,
다른 타입의 데이터가 입력되는 경우,
해당 변수가 새로 입력된 타입의 변수로 변경되므로 이전 타입기준으로 작성된 메소드에 오류가 일어나는 등의 문제를 일으키기도 한다.

이 경우 자바스크립트는 런타임에러를 반환하게 되는데, 런타임에러가 나면 정확히 어느 부분이 문제인지 알기 힘들때가 많다....
이런 문제들을 줄이기 위해 사용하는게 TypeScript!

Java와 같이 타입을 지정해줄수 있다.
단, 실제 브라우저는 TypeScript 가 아닌 JavaScript만 인식하므로, 실제 실행되는 파일은 .js파일이라는 것 알아둘 것!

사용 방식은 다음과 같다.

---

타입스크립트 다운

npm install -g typescript

다운로드 후, 프로젝트에 ".ts" 확장자로 파일을 만들어 typeScript파일을 작성할 수 있다.

타입스크립트 파일을 실행하기 위해서는 자바스크립트 파일로 변환하는 컴파일이 필요하다.

tsc [파일명].ts

명령 실행 시 동일명의 .js파일이 생성된다.

단, 컴파일 시 특정 자바스크립트 버전으로 컴파일하는 등의 설정을 적용시키기 위해서는 tsconfig.json 파일이 필요하다.

타입스크립트 홈페이지에 나와있는 기본 예제)

{
  "extends": "@tsconfig/node12/tsconfig.json",
  "compilerOptions": {
    "preserveConstEnums": true
  },
  "include": ["src/**/*"],
  "exclude": ["**/*.spec.ts"]
}

 

---

사용가능한 자료형

number
string
boolean
null
undefined
any

undefined와 any의 차이?

 

---

숫자, 문자열, anything, 두 가지 이상의 자료형 지정.

let num:number = 10 //숫자 타입 변수 지정

let str:string = "this Is String" //문자열 타입 변수 지정

let anything:any = "any" 
//any타입은 어떤 타입이던 들어갈수있다. 즉, anyting변수에 숫자를 재할당 할수 있음.


//변수에 한가지 타입이 아닌 두가지 이상의 특정 타입이 지정될 수 있는 경우. 단, 모든타입은 아닌경우.
let numOrStr:number | string = "notnumber";
numOrStr = 10;
numOrStr = ["10"] //error; number, string 이 아닌 지정되지 않은 타입!

배열이나 함수에 지정하기

let array:number[] = [11, 3];
//배열이 들어가는 경우, 내부에 들어가는 자료형을 지정해주고, []을 써 어떤 타입의 배열인지 명시해준다.

function multiplyNums(x:number,y:number):number{
	return x*y
}
//함수에 타입지정시.
//괄호안에 들어가는 parameters의 타입을 지정해주고,
//괄호 다음에 return타입의 자료형을 지정해준다.

multiplyNums(5*9)