타입스크립트
오픈소스 프로그래밍 언어
자스의 상위집합으로 에크마스크립트의 최신표준을 지원
정적인 언어로 컴파일 시간에 타입을 검사
(반대로 자바스크립트는 구동 중에 바뀐다)
장점
- 강력한 타입으로 대규모 앱 개발에 용이
- 유명한 자바스크립트라이브러리와의 편리한 사용
- 개발 도구에서의 강력한 지원
타입스크립트 --> 자바스크립트 변환하기위해서 컴파일러가 필요(노드제이에스)
ts를 js로 뽑는 법
sudo npm install -g typescript
tsc hello.ts //이거를 터미널에 치면 똑같은 내용의 js파일이 생긴다 (let이 var로 바뀜 옛날 구현파일에서도 구현가능하도록)
tsc hello.ts --target es6 //이럴 경우에는 let이 그대로 나옴 es6문법 기준 옛날꺼 신경써줄 필요없을 때터미널에 위의 코드 작성하면 된다.
tsc hello.js하면 파일이 만들어진다.
var hello = "hello";
let hello2 = "hello2"; //ts js를 같다고 봐서 에러가 나는데 문제없음 해결법이 있는데 다음에 다루겠음
let timeoutPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('1 sec');
}, 1000);
})
timeoutPromise.then(console.log);
//promise 1초 이후에 콘솔로그한다 - es6문법es5에 없는 문법을 사용하면
tsc hello.ts 하면 에러가 남 !
라이브러리 옵션을 줘서 에러가 문제되지않는다고 말해야한다.
//tsc hello.ts --lib es5,es2015.promise,es2015.iterable,dom
//tsc hello.ts --lib es2015, dom 타겟을 2015로
//위에 처럼 전체를 해서 짧게 할 수 도 있음위에 코드처럼 작성
파일 만들기
사진처럼 구조를 만들고
<script type="module" src="./dist/hello.js"></script> index.html의 body 태그안에 스크립트 삽입
export default function add(a,b){
return a+b;
}
export function minus(a,b){
return a-b;
} src 폴더 안에 util.ts에 function add와 minus 만들기
import add from './util.js';
const value = add(1,2);
console.log(value);src 폴더 안에 hello.ts 코드
터미널에 코드 작성해서 js 파일 만들기
tsc hello.ts --target es6 --lib es2015, dom이렇게하면 임포트 그대로 들어감 타겟을 es6로 해서
근데 이거를 node hello.js로 해서 노드에서 실행하게되면 신텍스 에러남
tsc hello.ts --target es6 --lib es2015, dom --module commonjs //타겟은 6 모듈은 커먼jstsconfig.json 파일을 만들어서 설정한 다음에는 tsc만 넣어도 적용됨 !
컴파일마다 매번 해야하나 - x
컴파일을 설정할 수 있는 별도의 파일 존재함! !
showConfig 를 사용해서 어떤 옵션이 적용되는지 확인 가능 !
-
모듈을 커먼js로 해서 node dist/hello.js 하면 노드에서도 에러없이 만들어짐 !
-
webpack을 활용하면 dist 파일에있는 js 파일을 합쳐서 준다
{
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules"
], //이러면 얘네는 제외됨
"compilerOptions": {
"module": "commonjs", //모듈 es6일 경우
"rootDir": "src", //모둘의 뿌리 파일 설정
"outDir": "dist", //타입스크립트 컴파일되는 파일들의 최상위폴더 설정
"target": "es5", //타겟 es6일 경우
"sourceMap": true, //이렇게 하면 크롬 개발자도구에서 ts파일 확인가능
"removeComments": true, //js 파일에는 주석이 삭제되고 들어감
"noImplicitAny": false //트루일 경우 파일속 매개변수의 타입을 정의 하지않으면 감지됨
} //컴파일러옵션스 라는 이름으로 얘네를 전달
}
//보통 파일의 맨 위에 위치함 !
npm init -Y
//하면 노드프로젝트를 만들 수 있음
파일 맨위에 tsconfig.json 코드
