<div id="readability-page-1" class="page"><div>ts는 Babel이 일단 필요 없다. 
왜냐하면 ts 자체에서 최신 버전들을 과거 버전만 지원하는 브라우저에서 적응시키기 때문에(물론 어느 이상)
단, Babel과 공존시켜서 둘다 써야되는 경우나 쓰는 경우도 있긴하다.
아무튼 그래서 ts는 Babel이 생략되고 그래서 webpack과 ts를 직접 연결해야한다.
여기서 사용되는 유명한 얘들이 
<ul>
<li>awesome-typescript-loader</li>
<li>ts-loader</li>
</ul>
과거에는 atl로 했는데 
최신 버전은 ts-loader로 진행함 
=&gt; 그 이유는 현재 ts 최신 버전과 atl 최신 버전이 뭔가 충돌을 일으킨다. 
=&gt; ;; 생각보다 여러 라이브러리들의 충돌이 빈번히 일어나는게 신기하기도 하면서 의존적인 라이브러리들에 버전 관리와 watch를 계속 하고 있는게 굉장히 중요하고 어려운 일이라는 생각이 들었다.
=&gt; 이건 확실히 짬이 생겨야 책임지고 관리하는 거 같은 생각이 ...
<pre><code>npm i ts-loader @types/webpack ts-node -D</code></pre>
<pre><code>npm i --save-dev @types/react</code></pre>
<a href="https://reactjs.org/docs/static-type-checking.html">https://reactjs.org/docs/static-type-checking.html</a>
ts를 쓰기로 했다면 사용하려는 라이브러리들도 ts를 지원하는지 체크해보아야함
가장 쓰기 좋은 라이브러리들은 
1. 이미 ts를 지원하는 라이브러리 
ex, axios 같은 .. 
내가 사용하는 rsuite, chart.js 도 찾아보니 ts 를 지원한다.
<a href="https://rsuitejs.com/guide/introduction/">https://rsuitejs.com/guide/introduction/</a>
<ol start="2">
<li>지원은 안하는거 같은데(docs 보니 하는거 같은데..?) 엄청 유명한 라이브러리 
ex, react, react-dom</li>
</ol>
=&gt; 이미 어디서든 ts를 적용해서 사용할 수 있게 함 
=&gt; 커뮤니티에서라도.. 유명해서 커뮤니티 출신이라고 하더라도 믿을 수 있음.
<ul>
<li>tsc</li>
</ul>
<ol>
<li>tsconfig.js에 따라 ts코드를 js로 바꿔줌</li>
<li>type 검사를 해줌 (타입추론 포함)</li>
</ol>
두가지 역할은 별개다. 
에러가 있더라도 js 로 변환은 된다. 
=&gt; 근데 우리는 err가 하나라도 있으면 안됨 
=&gt; 그냥 별개라는걸 알아만 두라고
<ul>
<li>팁 
단순 타입 검사만 하려면 </li>
</ul>
<pre><code>tsc --noEmit</code></pre>
=&gt; 에밑 아니고 이밑
tsconfig.js
<pre><code>{
 "compilerOptions": {
 "strict": true,
 "lib": [
 "es5",
 "ES2015",
 "dom"
 ],
 "jsx": "react"
 }
}</code></pre>
=&gt; 처음 셋팅을 하면 
<blockquote>
No inputs were found in config file
</blockquote>
해당 에러가 발생 
=&gt; 결론은 vscode를 껐다키거나 ts 파일을 하나 추가하면 해결됨 나는 껐다키니 됨.
<a href="https://velog.io/@heony/tsconfig.json-input-error">https://velog.io/@heony/tsconfig.json-input-error</a></div></div>

2taesung.log

Taesung Lee

ts는 Babel이 일단 필요 없다.
왜냐하면 ts 자체에서 최신 버전들을 과거 버전만 지원하는 브라우저에서 적응시키기 때문에(물론 어느 이상)
단, Babel과 공존시켜서 둘다 써야되는 경우나 쓰는 경우도 있긴하다.
아무튼 그래서 ts는 Babel이 생략되고 그래서 webpack과 ts를 직접 연결해야한다.
여기서 사용되는 유명한 얘들이 
awesome-typescript-loader
ts-loader
과거에는 atl로 했는데 
최신 버전은 ts-loader로 진행함
=> 그 이유는 현재 ts 최신 버전과 atl 최신 버전이 뭔가 충돌을 일으킨다.
=> ;; 생각보다 여러 라이브러리들의 충돌이 빈번히 일어나는게 신기하기도 하면서 의존적인 라이브러리들에 버전 관리와 watch를 계속 하고 있는게 굉장히 중요하고 어려운 일이라는 생각이 들었다.
=> 이건 확실히 짬이 생겨야 책임지고 관리하는 거 같은 생각이 ...
npm i ts-loader @types/webpack ts-node -D
npm i --save-dev @types/react
https://reactjs.org/docs/static-type-checking.html
ts를 쓰기로 했다면 사용하려는 라이브러리들도 ts를 지원하는지 체크해보아야함
가장 쓰기 좋은 라이브러리들은 
이미 ts를 지원하는 라이브러리
ex, axios 같은 ..
내가 사용하는 rsuite, chart.js 도 찾아보니 ts 를 지원한다.
https://rsuitejs.com/guide/introduction/
지원은 안하는거 같은데(docs 보니 하는거 같은데..?) 엄청 유명한 라이브러리
ex, react, react-dom
=> 이미 어디서든 ts를 적용해서 사용할 수 있게 함
=> 커뮤니티에서라도.. 유명해서 커뮤니티 출신이라고 하더라도 믿을 수 있음.
tsc
tsconfig.js에 따라 ts코드를 js로 바꿔줌
type 검사를 해줌 (타입추론 포함)
두가지 역할은 별개다.
에러가 있더라도 js 로 변환은 된다.
=> 근데 우리는 err가 하나라도 있으면 안됨
=> 그냥 별개라는걸 알아만 두라고
팁
단순 타입 검사만 하려면 
tsc --noEmit
=> 에밑 아니고 이밑
tsconfig.js
{
  "compilerOptions": {
    "strict": true,
    "lib": [
      "es5",
      "ES2015",
      "dom"
    ],
    "jsx": "react"
  }
}
=> 처음 셋팅을 하면 
No inputs were found in config file
해당 에러가 발생
=> 결론은 vscode를 껐다키거나 ts 파일을 하나 추가하면 해결됨 나는 껐다키니 됨.
https://velog.io/@heony/tsconfig.json-input-error

[ts] 환경 셋팅

댓글