타입스크립트(typeScript) 기초

자바스크립트

자바스크립트는 포용력이 높아 한개의 변수에 number값을 할당하고,

다시 string값을 할당하면 오류 없이 가장 나중에 할당한 값을 결과 값으로 보여줍니다

let a = 3

a= "가나"

console.log(a) // 가나

a= true

console.log(a) // true

또한 타입이 맞지 않는 코드를 실행을 하기 전까지 타입에 대한 오류를 확인 할 수 없습니다.

 

타입스크립트

타입 스크립트를 활용하면 컴파일을 통해 사전 에러를 발견할 수 있습니다. 타입 스크립트를 설치하면 tsc라는 명령어로 타입 스크립트 파일을 컴파일할 수 있습니다. 타입 스크립트가 컴파일된 결과물은 자바스크립트로 출력됩니다. 이때 컴파일 단계에서 문법 에러를 잡을 수 있으므로, 사소한 실수들을 런타임 전에 모두 체크할 수 있습니다.

 

변수 a에 number 타입을 지정하고 string으로 재할당시 빨간 밑줄로 오류를 확인할 수 있습니다.

 

여러가지 타입들

let a:number = 3

let b:string = "가나"

let c:boolean = true

let d:null = null

let e:undefined = undefined

let f:any = 1

any 타입 

자바스크립트와 같이 여러가지 타입들로 재할당이 가능합니다. 하지만 any타입 사용하는 것을 지양합니다.

2개 이상의 타입 지정하기

let g:number|string|boolean = "2개 이상의 타입을 지정"

배열 타입 지정하기

let h:string[] = ["가나","다라"]

함수 타입 지정하기

function addNumber (a:number,b:number):number{

    return a+b

}

addNumber(3,7)

- 매개변수 a와b에는 number값만 가능하며 결과값 또한 number값이 리턴되게 됩니다.

 

타입스크립트 실행하기

기본적으로 자바스크립트를 실행 시키기 위해서 터미널에

node index.js(파일명)

를 입력하여 실행합니다.

 

타입스크립트는 파일명을 index.ts로 사용하게 되는데 이를 실행하기 위해선 tsc라는 명령어를 사용하여 타입스크립트를 자바스크립트로 변환해야 합니다.

tsc index.ts

위 사진과 같이 index.js라는 파일이 생성되고 실행되지 않습니다. 이유는 브라우저가 자바스크립트만 읽어 올수 있고, 타입스크립트는 읽어오지 못하기 때문입니다. 그렇기 때문에 타입스크립트 파일을 자바스크립트로 변환하기 위해서는 tsconfig.json 파일을 생성하여 타입스크립트에서 자바스크립트로 변환하기 위한 설정값을 지정해줘야 합니다.

 

가장 기본적인 설정을 tsconfig.json안에 넣어줍니다. window를 사용한다면 터미널에서 실행시 오류가 발생하므로 명령 프롬프트를 사용하여 가장 위에 있는 코드를 사용하여 줍니다.

tsc -p c:\Users\klp27\OneDrive\Desktop\typescript-prac\tsconfig.json

package.json 설정

터미널에서 아래 코드를 순서대로 입력 합니다.

npm run build
npm run start