TypeScript 기초 다지기

Choi su min

2019.07.12

#introduce

#typescript

Typescript에 대한 기본적인 배경 지식과 사용법을 알아보자

Overview

~~프로그래밍 언어~~입니다.
~~Compiled Language~~입니다.
- 전통적인 Compiled Language와는 다른 점이 많아서 ~~Transpile~~이라는 용어를 사용하기도 합니다. Compiler가 타입 체킹, 최적화를 수행함.
Javascript는 ~~Interpreted Language~~입니다.
Compile하면 Javascript로 변환됩니다.
코드 크기는 늘어나지만, 더 명확한 코딩을 할 수 있습니다.

개발 환경 구축 및 컴파일러 사용

자바스크립트 실행환경 : node.js, brower 설치
타입스크립트 개발환경 : VScode를 이용하겠음.

yarn global add typescript

먼저 typescript를 설치하자.

class Test {
  constructor() {
    console.log('test');
  }
}

new Test();

test.ts

tsc test.ts 명령어를 통해 test.ts파일을 test.js로 컴파일할 수 있다.

var Test = /** @class */ (function () {
  function Test() {
    console.log('test');
  }
  return Test;
})();
new Test();

test.js

tsc --init 명령어를 통해 tsconfig.json 파일을 만들 수 있다.
해당 파일을 생성한 후엔 tsc 명령어만으로도 컴파일할 수 있다.

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "allowJs": true,
    ...
  }
}

tsconfig.json

다음은 타입스크립트의 여러가지 기초 활용법이다.

function greeter(person: string) {
  return 'Hello, ' + person;
}
let user = 'Jane User';
document.body.textContent = greeter(user);

//Interface
interface Person {
  firstName: string;
  lastName: string;
}

function greeter(person: Person) {
  return 'Hello, ' + person.firstName + ' ' + person.lastName;
}

let user = { firstName: 'Jane', lastName: 'User' };
document.body.textContent = greeter(user);

// class
class Student {
  fullName: string;
  constructor(
    public firstName: string,
    public middleInitial: string,
    public lastName: string
  ) {
    this.fullName = firstName + ' ' + middleInitial + ' ' + lastName;
  }
}

interface Person {
  firstName: string;
  lastName: string;
}

function greeter(person: Person) {
  return 'Hello, ' + person.firstName + ' ' + person.lastName;
}

let user = new Student('Jane', 'M.', 'User');
document.body.textContent = greeter(user);

test.ts

Types

TypeScript가 언어차원에서 기본적으로 지원하는 Type은 두 종류로 분류할 수 있다. Basic Type과 Advanced Type.

Overview

개발 환경 구축 및 컴파일러 사용

Types

Ref