타입스크립트 기초 - 1

들어가기에 앞서

타입스크립트 기초 공부는 Do It 타입스크립트 프로그래밍 책으로 했습니다.

프로젝트 생성

먼저 생성에 앞서 컴퓨터에 설치된 npm -g의 목록은

입니다.

프로젝트 생성을 하려고하는 폴더에 터미널을 진입시켜서

npm init --y
npm install -D typescript ts-node
npm install -D @types/node

를 입력시킨다.

그리고 tsconfig.json 파일을 만든다.

tsc --init

이제 간단한 코드를 만들어보자

export const makePerson = (name: string,age: number) => {
    return {name: name,age: age}
}
export function testMakePerson(){
    console.log(
        makePerson('Jane',22),
        makePerson('Jack',33),
    );
}

utils/makePerson.ts

import {testMakePerson} from './utils/makePerson'
testMakePerson();

index.ts

그리고 실행결과를 보기위해서 터미널에 npm run dev
라고 치게되면
실행결과와 package.json의 스크립트 항목에 등록된 명령들이 나온다.

npm run dev
typescript@1.0.0 dev
ts-node src
{ name: 'Jane', age: 22 } { name: 'Jack', age: 33 }

이런 결과가 나온다.

그리고 빌드를 할수가 있는데 그러면 자바스크립트 파일이 나오게된다.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.testMakePerson = exports.makePerson = void 0;
const makePerson = (name, age) => {
    return { name: name, age: age };
};
exports.makePerson = makePerson;
function testMakePerson() {
    console.log((0, exports.makePerson)('Jane', 22), (0, exports.makePerson)('Jack', 33));
}
exports.testMakePerson = testMakePerson;

makePerson.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const makePerson_1 = require("./utils/makePerson");
(0, makePerson_1.testMakePerson)();

index.js

이런식으로 컴파일 되는 모습을 볼 수 있다.
왜 자바스크립트로 바꿔야할까
일단 타입스크립트는 자바스크립트의 확장버전같은 개념이다.
하지만 브라우저는 자바스크립트 이외의 언어는 읽지못한다.
비록 요즘에는 웹어셈블리라는 기술이 있지만
내가 알기로는 HTML CSS JS 이 세개만 브라우저는 받아들일 수 있다.
예를 들어 리액트같은 경우만 해도 리액트는 기본적으로 jsx를 사용해야하는데
jsx 확장자를 브라우저는 읽을수 없다. 따라서 바벨과 같은툴로 변환을 해준다음에 실행을 하게된다.
이와 비슷한거같다.