https://poiemaweb.com/typescript-introduction
TypeScript - Intro & Install | PoiemaWeb
TypeScript 또한 AltJS의 하나로써 자바스크립트(ES5)의 Superset(상위확장)이다. C#의 창시자인 덴마크 출신 소프트웨어 엔지니어 Anders Hejlsberg(아네르스 하일스베르)가 개발을 주도한 TypeScript는 Microsoft
poiemaweb.com
1. node.js 설치
2. TypeScript 컴파일러 설치 및 사용법
$ npm install -g typescript
3. 버전 확인
TypeScript 컴파일러(tsc)는 TypeScript 파일(.ts)을 자바스크립트 파일로 트랜스파일링한다.
- TypeScript 컴파일러는 TypeScript 파일을 자바스크립트 파일로 변환
- 컴파일보다는 트랜스파일링(Transpiling)이 보다 적절한 표현이다.
4. 사용법
// person.ts
class Person {
private name: string;
constructor(name: string) {
this.name = name;
}
sayHello() {
return "Hello, " + this.name;
}
}
const person = new Person('Lee');
console.log(person.sayHello());
tsc 명령어 뒤에 트랜스파일링 대상 파일명을 지정한다. 이때 확장자 .ts는 생략할 수 있다.
트랜스파일링 실행 결과, 같은 디렉터리에 자바스크립트 파일(person.js)이 생성된다.
// person.js
var Person = /** @class */ (function () {
function Person(name) {
this.name = name;
}
Person.prototype.sayHello = function () {
return "Hello, " + this.name;
};
return Person;
}());
var person = new Person('Lee');
console.log(person.sayHello());
이때 트랜스파일링된 person.js의 자바스크립트 버전은 ES3이다.
자바스크립트 버전을 변경하려면 컴파일 옵션에 --target 또는 -t를 사용한다.
예를 들어, ES6 버전으로 트랜스파일링을 실행하려면 아래와 같이 옵션을 추가한다.
// person.js
class Person {
constructor(name) {
this.name = name;
}
sayHello() {
return "Hello, " + this.name;
}
}
const person = new Person('Lee');
console.log(person.sayHello());
확실히 class 문법 (ES6) 을 사용하는게 보인다.
tsconfig.json 생성
tsc 옵션 설정 파일을 생성하여 옵션을 지정해 놓을 수 있다.
tsc 명령어 뒤에 파일명을 지정하면 tsconfig.json이 무시된다. 따라서 tsconfig.json 을 적용하려면 다음과 같이 사용
자동 감지
트랜스파일링 대상 파일의 내용이 변경되었을 때, 이를 감지하여 자동으로 트랜스파일링이 실행된다.
명령어
tsconfig.json에 watch 옵션을 추가
-> 안되는거같은데 -> 커맨드라인에서만 쓰라고 빨간 밑줄이 그어진다. -> package.json 에서 빌드할때 옵션으로 넣는거 같은데 나중에 다시 확인
tsconfig 관련 옵션
https://joshua1988.github.io/ts/config/tsconfig.html#%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%84%A4%EC%A0%95-%ED%8C%8C%EC%9D%BC-tsconfig-json
tsconfig | 타입스크립트 핸드북
타입스크립트 설정 파일 (tsconfig.json) 타입스크립트 설정 파일은 타입스크립트를 자바스크립트로 변환할 때의 설정을 정의해놓는 파일입니다. 프로젝트에서 tsc라는 명령어를 치면 타입스크립트
joshua1988.github.io
컴파일 대상 경로
{
"files": ["app.ts", "./utils/math.ts"], // 파일 경로 지정
"include": ["src/**/*"], // 변환할 폴더를 지정
"exclude": ["node_modules"] // 변환하지 않을 폴더 지정
}
컴파일 대상 경로를 정의하는 속성의 우선 순위 files > include = exclude
{
"target": "esnext", // js 버전
"lib": ["es2015", "dom", "dom.iterable"] // 라이브러리
}
gpt 추천
{
"compilerOptions": {
"target": "ES6", // ECMAScript 6으로 컴파일
"module": "commonjs", // CommonJS 모듈 시스템 사용
"outDir": "./dist", // 컴파일된 JavaScript 파일을 dist 디렉토리에 저장
"rootDir": "./src", // TypeScript 소스 파일의 루트 디렉토리
"strict": true, // 엄격한 타입 검사를 활성화
"esModuleInterop": true, // ES 모듈과 CommonJS 모듈 간의 호환성 활성화
"skipLibCheck": true, // 라이브러리 파일의 타입 검사 건너뛰기
"sourceMap": true, // 소스 맵 파일 생성
"baseUrl": "./", // 상대 경로의 기준이 되는 디렉토리
"paths": {
"@components/*": ["src/components/*"], // 모듈 경로 별칭 설정
"@utils/*": ["src/utils/*"]
}
},
"include": [
"src/**/*" // src 디렉토리의 모든 파일을 포함
],
"exclude": [
"node_modules", // node_modules 디렉토리는 제외
"dist" // dist 디렉토리는 제외
]
}
my-project/
├── src/
│ ├── components/
│ │ ├── Button.tsx
│ │ └── Header.tsx
│ ├── utils/
│ │ ├── formatDate.ts
│ │ └── mathUtils.ts
│ ├── index.ts
│ └── app.ts
├── dist/ # 컴파일된 JavaScript 파일이 저장되는 디렉토리
├── node_modules/ # npm 패키지 디렉토리
├── .gitignore # Git 무시 파일 설정
├── package.json # 프로젝트 설정 파일
├── tsconfig.json # TypeScript 설정 파일
└── README.md # 프로젝트 설명 파일
