typescript 설치
# typescript 컴파일러 설치
npm install -g typescript
# ts 파일 컴파일
tsc <파일명>
# ts-node 글로벌 설치
npm install -g ts-node
# typescript 실행
ts-node <파일명>
# @types/node 설치(node환경 구동을 위한 \*.d.ts 정보 제공)
npm install -g @types/node
ts-node 작동방식
자바스크립트를 실행하는 동시에 타입체크를 진행한다.
typescript 구성
*.ts typescript 파일
- 컴파일 대상
*.d.ts typescript 선언부 - 선언부 타입체크용으로 사용됨
*.js 실제 구현부 - 실제 사용되는 부분
typescript를 컴파일하면 위와 같이 파일이 생성된다.
typescript 컴파일러
모듈화된 부분을 가져올 때 d.ts를 참조하여 타입을 체크한다. 만약 파일정보가 없는 경우 에러가 발생하게 됨.
컴파일러에게 타입 파일의 위치를 알려주고 *.t.ds에 declare 키워드를 통해서 타입정보를 전달 할 수 있다.
*.d.ts
typescript 컴파일러는 d.ts를 사용하여 타입정보를 읽는다.
- 타입정보를 읽을 곳을 명시해줘야함.
- ts 컴파일하면 d.ts가 따로 생성된다.
- d.ts의 경우 JS로 컴파일되지 않고 타입정보만을 가지고 있는다.
- 써드 파티 라이브러리 즉, 타입스크립트를 지원하지 않는 경우 d.ts에서 정의하여 사용한다.
declare
써드 파티 즉, Typescript를 지원하지 않는 라이브러리에 대한 타입정보를 제공한다.
declare의 경우 모듈이 아닌 타입의 정보를 알려주는 용도로 사용된다.
- tsconfig.json types명시를 통해서 declare 위치를 명시해줘야 한다.
내부모듈, 외부모듈
내부 모듈의 경우 declare namespace 네임스페이스명 으로 선언
declare namespace utils{
function greet(person: string): string;
let name: string;
}
// 다른 파일
utils.greete("test")
utils.name = "test"외부 모듈의 경우 declare module '외부모듈명'으로 선언
- 모듈에 대한 추가적인 타입을 명시할 수 있다.
기본 타입
타입스크립트 기본 타입
타입스크립트로 변수나 함수와 같은 자바스크립트 코드에 타입을 정의할 수 있습니다.
타입스크립트의 기본 타입에는 크게 다음 12가지가 있습니다.
Boolean
Number
String
Object
Array
Tuple
Enum
Any
- 자바스크립트 var, let의 타입
Void
Null
Undefined
Never
타입스크립트에서의 타입
타입 별칭 type sn = number | string;
인터페이스 interface I { x: number[]; }
클래스 class C { }
이넘 enum E { A, B, C }
타입을 가리키는 import 구문
Module
export가 있는 파일들은 모듈로 생성된다.
- 디렉토리 구조 + 파일명으로 모듈 import
- 파일명이 명시 되지 않으면 index 파일을 의미한다.
import, export (babel)
ts로 컴파일된 js를 가지고 실제 import, export를 진행한다.
해당 키워드가 있는 파일은 module 객체로 모듈화 된다. module.exports안에 접근 가능한 정보가 존재 한다.
import키워드를 통해서 접근이 가능해진다.
파일경로
기본적으로 상대경로
파일명
- ./
외부모듈
- 외부 모듈의 경우 node_modules를 현재에서 상위로 탐색하며 접근함.
- import * from 'vue-property-decorator'
패키지명
- package.json에 명시된 main, module이 진입점
- import * from 'vue-property-decorator'
폴더명
- index 파일이
tsconfig.json
루트 프로젝트 tsconfig.json만 작동되는 문제가 있음.
compilerOptions
- 컴파일러에게 path alias를 제공한다.
- types를 통해서 타입 정보를 가져올 곳을 지정한다.(모듈지정)
vue-class-decorator
컴포넌트를 선언할 때 클래스 기반 API를 선호하는 경우 공식 vue-class-component 데코레이터를 사용할 수 있습니다.
import Vue from 'vue'
import Component from 'vue-class-component'
// @Component 데코레이터는 클래스가 Vue 컴포넌트임을 나타냅니다.
@Component({
// 모든 컴포넌트 옵션이 이곳에 허용됩니다.
template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
// 초기 데이터는 인스턴스 속성으로 선언할 수 있습니다.
message: string = 'Hello!'
// 컴포넌트 메소드는 인스턴스 메소드로 선언할 수 있습니다.
onClick (): void {
window.alert(this.message)
}
}옵션속성
?
- ?을 붙이면 필수로 값을 넘기지 않아도 된다.
- ? 값이 있을지 없을지 모를 때 붙인다.
function sum(a: number, b?: number): number { return a + b; } sum(10, 20); // 30 sum(10, 20, 30); // error, too many parameters sum(10); // 10
get, set 키워드
get, set 키워드를 사용하여 멤버변수를 정의하면 변수 값을 넣을 시 암묵적으로 해당 메소드가 실행된다.
class Developer {
private name: string;
get name(): string {
return this.name;
}
set name(newValue: string) {
if (newValue && newValue.length > 5) {
throw new Error('이름이 너무 깁니다');
}
this.name = newValue;
}
}
const josh = new Developer();
josh.name = 'Josh Bolton'; // Error
josh.name = 'Josh';제너릭 제약조건
제너릭의 경우 타입추론이 불가능하기 때문에 제약조건을 넣어서 어떤 타입인지 제약조건을 줄 수 있다.
- 제약조건에 해당하는 변수가 아니면 사용할 수 없다.
interface LengthWise {
length: number;
}
function logText(text: T): T {
console.log(text.length);
return text;
}
클래스 타입 호환 주의사항
클래스의 호환여부는 속성만을 보고 판단하기 때문에 주의가 필요하다.
class Hulk {
handSize: number;
constructor(name: string, numHand: number) { }
}
class Captain {
handSize: number;
constructor(numHand: number) { }
}
let a: Hulk;
let s: Captain;
a = s; // OK
s = a; // OK
타입별칭
// string 타입을 사용할 때
const name: string = 'capt';
// 타입 별칭을 사용할 때
type MyName = string;
const name: MyName = 'capt';
declare
*.ts에서 import없이 전역변수를 사용할 수 있게 하기 위해서는 declare키워드를 사용한다.
// 전역 변수
declare const pi = 3.14;
// 전역 함수
declare namespace myLib {
function greet(person: string): string;
let name: string;
}
myLib.greet('캡틴');
myLib.name = '타노스';
코드 모듈
일반적으로 CommonJS에서는 require로 모듈을 지원해준다.
- 웹에서도 사용이 가능하다.
- node.js환경에서 개발할 경우 webpack을 통해서 의존성이 있는 파일들을 연결하여 하나의 파일로 만들어준다.
타입스크립트는 모듈 코드를 어떻게 변환해주는가?
tsconfig.json 파일에 설정한 컴파일러 모드에 따라 모듈 코드가 각기 다르게 변환됩니다.
// SimpleModule.ts
import m = require("mod");
export let t = m.something + 1
// AMD / RequireJS SimpleModule.js
define(\["require", "exports", "./mod"\], function (require, exports, mod\_1) {
exports.t = mod\_1.something + 1;
});
// CommonJS / Node SimpleModule.js
var mod\_1 = require("./mod");
exports.t = mod\_1.something + 1;
// UMD SimpleModule.js
(function (factory) {
if (typeof module === "object" && typeof module.exports === "object") {
var v = factory(require, exports); if (v !== undefined) module.exports = v;
}
else if (typeof define === "function" && define.amd) {
define(\["require", "exports", "./mod"\], factory);
}
})(function (require, exports) {
var mod\_1 = require("./mod");
exports.t = mod\_1.something + 1;
});
// System SimpleModule.js
System.register(\["./mod"\], function(exports\_1) {
var mod\_1;
var t;
return {
setters:\[
function (mod\_1\_1) {
mod\_1 = mod\_1\_1;
}\],
execute: function() {
exports\_1("t", t = mod\_1.something + 1);
}
}
});
타입스크립트 컴파일 명령어를 칠 때 컴파일러 모드를 부여할 수 있습니다.
# commonjs 모드인 경우
tsc --module commonjs Test.ts
# amd 모드인 경우
tsc --module amd Test.ts