5. Typescript initialize
5-1. package 시작
npm init -y5-2. typescript 설치
npm i -D typescript5-3. config 설정
-
tsconfig.json을 생성한다.touch tsconfig.json명령어를 터미널에 입력해 생성하거나- 우클릭으로 새 파일을 생성해
tsconfig.json을 생성한다.- window에서는
bash로touch를 사용할 수 있다.
- window에서는
-
ts파일을 컴파일할 수 있도록tsconfig.json에 옵션을 추가한다."include": ["src"]:src폴더의 모든 파일 검사해ts파일 검색"compilerOptions": { "outDir": "build" }:js로 컴파일한 파일을build라는 폴더에 추가
-
package.json의scripts에"build": "빌드명"을 입력 -
npm run build로 컴파일
// 컴파일 전 typescript
const hello = () => "hi";
// 컴파일 후 javascript
var hello = function () {
return "hi";
};"target": "JS 버전": 해당javascript버전으로 컴파일 함
// 원본 ts
const hello = () => "hi";
// "ES3"로 설정한 경우
var hello = function () {
return "hi";
};
// "ES6"로 설정한 경우
const hello = () => "hi";번외) class가 없던 ES3의 class
target을ES3로 맞추고 class를 작성해 보면 class가 없던 ES3 시절의 class 구현을 엿볼 수 있다.
// typescript class
class Block {
constructor(private data: string) {}
static hello() {
return "hi";
}
}
// ES3 class
var Block = /** @class */ (function () {
function Block(data) {
this.data = data;
}
Block.hello = function () {
return "hi";
};
return Block;
}());-
"lib": 사용자가 어떤 API를 사용하고 어떤 환경에서 코드를 실행하는 지 지정한다."ES6"를 입력하면 해당 문법 자동완성을 나타내주고,"DOM"을 입력하면 브라우저 문법(window,document)에 접근할 수 있다.
-
실제로
typescript는javascript로 이루어진 라이브러리를 사용할 때 그것의 call signatures 등을 알지 못하기에 에러를 생성한다.- 이런 경우, 별도의 정보를 알려주는 파일이 필요하다.
*.d.ts라는 이름을 가진 파일이 그 역할을 한다. 여기서 d는declare를 의미한다.
// exPackage.js
export function init(config) {
return true;
}
export function exit(code) {
return code + 1;
}
// index.ts
import { init, exit } from "myPackage";
// 모듈 'myPackage'에 대한 선언 파일을 찾을 수 없습니다.- 위와 같은
js로 이루어진 라이브러리를ts에서 호출한다면 모듈을 찾을 수 없다는 에러와 함께 함수를 실행할 수 없다. exPackage.d.ts를 생성해 해당 모듈을declare해야 한다.
// exPackage.d.ts
interface Config {
url: string;
}
declare module "myPackage" {
function init(config: Config): boolean;
function exit(code: number): number;
}-
이러한 작업 빈도가 높지는 않겠지만, 대부분의 라이브러리가 어떻게
ts에서 호출 가능한지 개념을 알 수 있기에 숙지해둘 필요가 있다.- 알고 있다면 운 나쁘게 선언이 필요할 때 수작업도 가능하다.
- 그런 일은 없었으면...
-
모듈이 아닌
js파일을 호출해 사용할 때는 다음과 같이 설정한다.tsconfig.json에allowJS를 추가한다.// @ts-check을 입력한 후 JSDoc 주석(/** */)을 활용해 파라미터와 리턴값의 형태를 지정한다.
// exPackage.js
// @ts-check
/**
* Initializes the project
* @param {object} config
* @param {boolean} config.debug
* @param {string} config.url
* @returns {void}
*/
export function init(config) {}
/**
* Exits the program
* @param {number} code
* @returns {number}
*/
export function exit(code) {
return code + 1;
}
// index.ts
import { init, exit } from "./myPackage";
init({
debug: true,
url: "true",
});
exit(1);index.ts파일의init함수에 마우스를 올리면js에서 설정한 주석을 볼 수 있다.
// init()의 주석
(alias) init(config: {
debug: boolean;
url: string;
}): void
import init
Initializes the project
@param config
@returns5-4. ts 빠른 실행
ts를 실행할 때마다build하는 것은 비효율적이다.package.json의scripts에 옵션을 추가한다."start": "node build/index.js"ts-node설치npm i -D ts-node: 빌드없이ts를 실행할 수 있다.
nodemon설치npm i nodemon: 자동으로 커맨드를 실행한다.scripts추가 :"dev": "nodemon --exec ts-node src/index.ts",
npm run dev로 실행하면, src의index.ts를 실행한다.
// index.ts
console.log("hi");
// terminal
> typescript@1.0.0 dev
> nodemon --exec ts-node src/index.ts
[nodemon] 2.0.19
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: ts,json
[nodemon] starting `ts-node src/index.ts`
hi
[nodemon] clean exit - waiting for changes before restart
// index.ts
console.log("bye") // hi -> bye
// terminal
[nodemon] restarting due to changes...
[nodemon] starting `ts-node src/index.ts`
bye
[nodemon] clean exit - waiting for changes before restart5-5. js로 이루어진 패키지이면서 type 정의가 하나도 안 되어 있을 때
DefinitelyTyped은 npm에 있는 거의 모든 라이브러리의 정의가 담긴 거대한 github repository이다.- 사용하고자 하는 라이브러리 타입이 있는지 확인 후
npm i -D @types/{library}로 설치한다.node.js를 위한 타입이 필요하다면npm i -D @types/node를 입력한다.
프론트엔드 개발자가 되고 싶다