TypeScript(타입스크립트) 넌 머냥 ? 1

스택오버플로우에서는 매년  개발자를 대상으로 하여 가장 많이 사용하는 언어를 

조사한 결과를 발표하는데  아래 링크에 가면 그 결과를 볼 수 있당.

(개발자를 대상으로 한 조사라 일반 전체 조사와는 그 결과가 다르당)

https://survey.stackoverflow.co/2024/technology#most-popular-technologies-language

SQL 아래 TS라고 보이는 것이 TypeScript인데  마이크로 소프트에서 맹글었당.

길면 졸리고, 졸리면 고개가 무겁고, 고개가 무거우면, 결국 떨어져 잠이 드니,

간략 뽀인또만 정리하면

TS는 직접 실행되지 않고, 자바스크립트로 변환(Transfile, 또는 Compile이라 불림) 되고, 변환된

자바스크립트가 실행된당. 변환의 결과물인 자바스크립트 버젼을 타켓팅 할 수 있다.

그래서 TS는 자바스크립트의 모든 버젼을 알고 있어야 하므로, 자바스크립트 슈퍼셋이라고 불린당.

 

그럼 이걸 구지 왜 만들었는강?  고저 쉽게  뽀인또만 바로 세게 한방에 꼬집으면

동적언어라서 데이터/변수 타입을 선언하지 않고 쓰는 자바스크립트는 프로젝트 규모가 커져서

많이 사용될 수록  오류를 찾아내기 힘들다는 거시당. 특히 초보자는 더욱 취약해서

박스형 타이레놀을 사서 먹거나, 눈이 팽팽 돌지 않게 루테인 함유량을 높여야만 했다.

자바스크립트에 데이터 타입 문법을 넣은 자바스크립트가 바로 TS인 것이다. (문법 확장!!!)

[타입 스크립트는 실제 실행되는 언어가 아님을 주의깊게 뇌리에 낙뢰로 지지자] 

 

그럼 이제 TS는 어떤 형태의 실체를 가지는지 확인하는 시간을 또메만 가져보장.

타입스크립트놀이터  를 방문해 보장.(여기서 간단한 건 연습이 가능하당)

아래 처럼 입력하고, 추론으로 나름 "아! 이런거구낭"을  도출해 보장.

[만약 전혀 불가능하다면, 무리하지 말공,당신은 TS 말공, 자바스크립트를 더 공부하길 추천한당!]

타입스크립트는 기본적으로 변수명:데이터타입  문법을 가진당.

type 키워드는 기본 지원되는 타입(boolean / number / string 등등)을 넘어

커스텀 타입을 정의 할 수 있다.

memInfo라는 커스텀 타입을 정의하였다. (오른쪽 탭 .D.TS를 눈으로 한번 확인하는 수고를 하장~)

함수 whoami의 매개변수 who는 who:memInfo 라고 적었으므로 memInfo 타입을 가져야 한당.

그래서 alert(who.nmae) 에서 nmae가 memInfo랑 비교해보고, nmae 속성이 없음을 알고 

빨간색 밑줄을 쳐준당.(고맙당.. ㅋ),  함수 호출 whoami({...}) 에서는 age가 number 여야 하는데,

문자열이 왔음을 알려준당. (또 고맙당!.. ㅋㅋ) , 심지어 덕분에 자동완성도 지원될 수 있당.(와~ 고맙당) 

이거시 타입스크립트의 장점이당.  동적언어를 정적언어로 Wrapping 하였당.

 

당근 물론 이에 따른 단점도 바로 보인당. 

코딩양이 늘어나고, 제3자의 라이브러리를 가져다 사용할 때의 커스텀 타입은

내가 정의한 게 아니라서, 친구처럼, 연인처럼 알아가는 시간이 필요하다는 것이다.

더더욱 초보자는  타입을 어떻게 설계할까?라는 어려운 추상적 질문앞에 내 던져지게 된당.

개인적 추천방법은 급하지 말고, 시간을 두고 많이 많이 접하라고 하고 싶다.(결국 쓰게 된당)

A.I 덕분에 개발자는 본인의 실력보다 높은  결과물을 만들어 내는 착각의 시대가 열렸당.

창의성은 근본적으로 이해를 바탕으로 하고, 추상적 능력도 개념의 이해에서 발생한당.

다양성을 갖춘 깊은 이해는 결국  충분한 시간을 가진 경험치를 요구한당. 

A.I 가 빠르닝, 사람은 느림의 철학을 바탕으로 한 지구력과 흐트러짐없는  집중력이 필요하다.

미래는 추상적 능력이 착각을 착각이 아닌 진실로 바꿔주는 요술 비짜루가 될꺼이당.

 

대략이지만, TypeScript에 대해서 느끼미는 왔을꺼이니, 실제로 사용하여

느끼미에 느끼미를 곱하여 증폭시켜 보는 시간도 괘니 가져보도록 하자.

[회사에선 거의 TypeScript를 사용하므로, 불안을 파 묻어 줄 시간이당.]

 

먼저 ts-sample 이라고 폴더를 만들공, vscode로 해당 폴더를 열장.

해당 폴더에서 터미널(cmd)에  아래 명령을 세게 치장. ( package.json이 생긴당)

npm init -y

 

package.json 파일의 맨 아래 type을 아래로 바꾸장. (require 아니공, import를 쓰겠단 의미)

"license": "ISC", 
"type": "module"

 

typescript를 사용해 보기 위해서 typescript 모듈을 설치하장.(설치하면 tsc 커맨드를 쓸 수 있당)

npm i typescript

 

이제 프로젝트 폴더(ts-sample) 에  my-first.ts 파일을 아래 내용으로 맹글장.

my-first.ts

// 변수명:타입
const myName: string = "E7E";

// 함수 매개변수 타입 string, return 타입 string
function myOut(pName: string): string {
  return pName;
}
console.log("체킁: ", myOut(myName));

 

이제 해당폴더인 상태의 terminal에서  아래 명령어를 치장.

npx tsc my-first.ts

[만약 typescript global로 설치했다면 npx는 빼고 입력해도 된당]

 

프로젝트 폴더(ts-sample)에 my-first.js 파일이 아래 내용으로 생겼음이 보인당.

// 변수명:타입
var myName = "E7E";
// 함수 매개변수 타입 string, return 타입 string
function myOut(pName) {
    return pName;
}
console.log("체킁: ", myOut(myName));

음... 느끼미가 쓰나미처럼  온당 (아! 이게 ts의  역할이구낭!- 중요하당).

혹 vscode에서 my-first.ts 와 my-first.js가 둘다 열려있다면, my-first.ts에서 

const myName과 myOutdp  빨간 밑줄이 그어질 텐데, 지금은 무시해도 된당.

무시가 안된다면 두개 파일 중 하나를 닫으면 된당.

[이건 전혀  중요하지 않지만, 그래도  알고 싶다면 날 만날 수 있기를... ....]

 

이제 아래처럼 실행해 보도록 하장.

node my-first.js

잘 실행 됨을 확인할 수 이찌(itzy) 않지 않을 수 없음을 지나치지 않을 수 없지 않탕.~~

 

여기서 한발 더 나아가 보도록 하장.

tsc(TypeScript Compiler)에는 머리 아플 만큼 많은 옵션이 제공된당.

[물론 전부 다 알 필요도 없고, 전부 알아도 쓸 상황이  잘 안 만들어진당.]

 

터미널(cmd)에 아래 명령어를 이번엔 솜털도 느끼미가 없도록 가볍게 쳐보장.

npx tsc --init

터미널 화면에 어쩌구 저쩌구 나오공, 폴더에 tsconfig.json 파일이 생겼음을 모르지 않는당.

 

파일을 클릭하여 열어, 내용을 보면 100여가지 옵션 항목에 "불끈 해보자 올랐던 의욕"은

망연자실... 인생이란 무얼까?,  삶과 죽음?, 존재의 의미... 등등 나도 모르는 철학에 빠진당.

정신 차리고, 다시 보장... 모얌 모얌... 대부분이 주석이넹... 그렇다면

그렇다..  우리가 사전에 있는 말을 다 알 필요는 없다.. 모르는 게 있으면 그때 찾아서 쓰면 된당.

아래 처럼 간단히 고쳐보장. (주석 몇줄 그저  한번 흘려보면   센스쟁이!)

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",  // js 버젼 타켓, ctrl+space 해보면 느끼미 옴                          
    "rootDir": "src",    // .ts 파일 최상위 디렉토리 지정
    "outDir": "dist",    // .js 파일이 만들어질 디렉토리                
    "removeComments": true,   // 주석 삭제 여부              
    "strict": true,     // 엄격모드 (use strict) 적용 여부                               
  }
}

 

이제 기존 my-first.ts 파일과 my-first.js 파일을 가볍게 삭제하도록 하공.

프로젝트 폴더(ts-sample)에 위 설정대로 src 폴더를 만들고, 폴더 안에 아래 파일 2개도 만들장.

myutil.ts

export const morningInsa = (name: string) => {
  return `굳 모닝! ${name}`;
};

export const eveningInsa = (name: string) => {
  return `굿 이브닝 ${name}`;
};

 

my-first.ts

// from 다음에 myutil.ts가 아니고 myutil.js임에 아주 주의
import { morningInsa, eveningInsa } from "./myutil.js";

// 변수명:타입
const myName: string = "E7E메롱";

// 함수 매개변수 타입 string, return 타입 string
function myOut(pName: string): string {
  return pName;
}
console.log("체킁킁: ", myOut(myName));
console.log(morningInsa("지워닝"));
console.log(eveningInsa("수미닝"));

 

이제 터미널(cmd)에 아래 처럼 명령을 구지 입력해보장.

npx tsc

호라! dist 폴더가 자동으로 생성되고, 그 안에 my-first.js 와 myutil.js 가 만들어졌당.

[파일도 한번 직접 열어 내용을 확인 해보면 좋겠당..]

 

이제 아래 명령으로 실행도 확인 해보장.~~

node dist/my-first.js

분명 잘 되지 아니 할 이유를 찾을 수 없음을 알지 못하지 아니하지 아니함을  알릴 수 없음이당.

만약 안된다면 현재 명령어를  입력한 cmd 프롬프트가 프로젝트가 폴더가 아님이 분명하당.

 

여기까지 되었다면 시간 투자 대비 얻은 것이 더 크니, 어쩔! 가성비가 좋은 시간 사용이당.

조금 더 가성비를 큼지막히 "아 킹 받아!"  오차 밖으로  안전하게 올려보장.

tsc 명령어는 --watch 옵션을 제공하여, .ts 파일 수정 시 자동으로 다시 tsc 명령을 실행하여

.ts에 해당되는 .js 파일을 다시 만들도록 할 수 있다.

아래 처럼 package.json 파일의 script 부분을 수정하도록 하장.

package.json

...
 "main": "index.js", 
"scripts": {   
      "watch": "tsc --watch",   
      "test": "node dist/my-first.js" 
}, 
"keywords": [],
...

 

이제 터미널(cmd)에  아래 처럼 입력하면 watch 모드가 시작되고...

 npm run watch

src 폴더의 .ts 파일을 암거나 수정하면, 해당되는 dist 폴더의 .js 파일의 내용이 

바뀌었음을 두 눈 뜨고 확인 할 수 있당.

 

아래 명령을 입력하게 되면 

npm test

 node dist/my-first.js  명령어를 입력한 것과 같은 효과를 얻게 된당.(아는 거지용?)

 

여기서 그냥 끝내기 아쉬운 맘에 느끼미 1개만 더 받고 가도록 하장.

src 폴더 아래에 types.d.ts(사실 이 이름이 아니어도 된당) 란 파일을 아래처럼 만들장.

types.d.ts

// typescript playground에서 .d.ts 기억나는강?
// 초 간단 example
type Idol = {
  name: string;
  age: number;
  songs?: string[];
};

 

mymerong.ts src 폴더에 아래 처럼 만들장

// types.d.ts에 정의된 Idol 타입 사용
// type Idol을 바로 가져다 씀에 주목하장.
function idolInfo(idol: Idol) {
  console.log(idol.name);
  console.log(idol.age);
  console.log(idol.songs?.length + "곡 발표");
  console.log("========\n\n");
}

// Idol Type 정의에 어긋나면 빨간 줄 출현
idolInfo({
  name: "지워닝",
  age: "27",
  songs: ["비", "바람", "번개"],
});

idolInfo({
  name: "수미닝",
  age: 23,
  songs: ["바닐라", "라떼"],
});

 

아래 명령어로 바로 실행이 확인 된당.(Good이당)

node dist/mymerong.js

확장자 .d.ts 파일을 이용하여 type을 별도 등록하여 사용할 수 있음을 느끼미 받았당.

[ 실제론 요것도 요래조래 namespace란 키워드를 이용 다양한 활용이 가능 ]

 

하지만 그 누군가 예를 들면 금수저의 관찰력이라면 분명 이런 야그를 할 것이당.

'아니 mymerong.ts 파일에 빨간 줄이 생겼는데, mymerong.js 파일이 생기면 안되는거 아닌겨?'

그렇당. number가 와야 할 자리에 문자열이 왔는데, 그냥 변환파일이 생기다닝...

이럴 땐 tsconfig.json 파일에 아래 내용을 넣을 수 있당.

 

tsconfig.json

.... 생략 
"removeComments": true,   // 주석 삭제 여부    
 "noEmitOnError ": true,   //  ts파일에 에러가 있는 경우 .js 파일 생성 여부, default는 false                  
  "strict": true,     // 엄격모드 (use strict) 적용 여부
... 생략

이제 dist 폴더의 mymerong.js 파일을 삭제하고, mymerong.ts 파일을 에러가 있는 상태로 수정하면

mymerong.js 파일이 생성되지 않음을 두눈 똑똑 확인 할 수 있다.

[ 이대로 정말 괜찮을까?..... 오늘은 여기까지가 아름다울 것 같다... ]

 

아래 링크는 typescript를 직접 실행 시키고픈 사람들의 욕망을 실현한 모듈이당.

잼나고 재미지겡  즐겨보길....(^-^)

https://www.npmjs.com/package/ts-node

node 22.18  이후 버젼을 사용하는 사람은 ts-node 없이도 그냥 node로 실행이 가능하단당.

---

 

나무를 보아야 하는 사람이 자꾸 숲을 보려 하면

나무는 그 사람을  멀리한당.

 

숲을 보아야 하는 사람이 자꾸 나무에 빠지면

나무는 꾸미기에 바쁘당.

 

오해만 있으면 풀 수 있지만

착각과 팀을 먹으면 가지치기 착오로 바닥에 뒹군다.

 

착각만 즐기면 좋을텐데

착각을 뿌리로 오해의 가지가 뻗기 시작하면

뿌리째 뽑을 수 밖에 없다.

 

유기체는 그렇게 아프공.

조립식 컴포넌트를 꿈꾸는 유기체 사람은

가상의 세계에서 아픔도 잊고, 목적도 잊는다. 

잊지 않았다는 거짓말조차 거짓으로 덮었다. 

 

https://www.youtube.com/watch?v=WlM1vgoBagw&list=RDWlM1vgoBagw&start_radio=1