🕶️ TypeScript 공부 하기 1장

TypeScript에 대해 알아보자

TypeScript는 JavaScript를 포함하는 수퍼셋으로 브라우저, 운영체제에 상관없이 이용 가능한 오픈소스이다.

TypeScript는 JavaScript로 컴파일되는 트랜스파일러(또는 컴파일러)이다.

 

TypeScript는 정적 타입 검사자인데

프로그램을 실행시키지 않으면서 코드의 오류를 검출하는 것을 정적 검사라고 한다.

정적 타입 검사자인 TypeScript는 프로그램을 실행시키기 전에 값의 종류를 기반으로 프로그램의 오류를 찾는다.

 

 

---

코드

 

기본적으로 TypeScript의 코드는 javaScript의 코드보다 좀 더 길다..

첫 번째가 javaScript, 두 번째가 TypeScript 코드이다.

 

function Text(text, limit, symbol='...') {
  return `${String(text).slice(0, limit - 1)}${symbol}`
}

 

function Text(text:string, limit:number, symbol:string = '...'):string {
  return `${text.slice(0, limit - 1)}${symbol}`
}

 

javaScript에서 유효성 검사를 하지 않고 코드를 작성하면 오류가 나도 표시하지 않는다..

따로 유효성 검사를 실행하지만 귀찮다.

 

TypeScript로 작성된 함수 실행 시,

컴파일 과정에서 실시간으로 타입을 검사하므로 디버깅이 쉽고 안정된 프로그램 작성을 가능하게 한다.

결과적으로는 코드가 더 짧을 수 있는 것이다.

 

---

설치하기

 

TypeScript를 설치하는 방법에는 크게 두 가지가 있습니다:

npm을 이용한 설치

TypeScript의 Visual Studio 플러그인 설치

 

npm 설치시

> npm install -g typescript

 

이제, 파일을 만들어 보자

확자자는 .ts로 한다.

function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.textContent = greeter(user);

 

확장자는 .ts 지만 아직 코드는 js로만 되어 있다. 

다음과 같이 : string 타입 표기를 'person' 함수의 인수에 추가해보자

 

function greeter(person: string) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.textContent = greeter(user);

 

여기서 user의 값을 srtring 타입이 아닌 다른 타입을 사용해 매개변수로 넘기면

오류가 발생한다.

 

function greeter(person: string) {
    return "Hello, " + person;
}

let user = [0, 1, 2];

document.body.textContent = greeter(user);

 

error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

 

이러한 방식의 오류가 발생한다.

함수 호출의 모든 인수를 제거해도 오류가 발생할 것이다.

예상치 못한 개수의 매개변수로 이함수를 호출 했다고.

 

오류가 존재하기는 하지만, greeter.js 파일은 생성되었다.

코드에 오류가 존재하더라도 TypeScript를 사용할 수 있다.

그러나 TypeScript는 코드가 예상대로 작동하지 않을 것이라는 경고를 하게 된다.