기술 사업 및 스타트업 테크노에 대한 모든 것 Tae-yang (태양) 1월 31, 2025 0 Comments

JavaScript에서 TypeScript로 전환하는 것은 생각보다 쉽습니다.

어느 날, 당신은 깨어나서 더 이상 레거시 자바 스크립트 프로젝트에서 TypeScript 없이는 살 수 없다고 결정합니다. 그것이 저와 저의 сolleagues에게도 일어난 일이며 이제는 우리의 경험에 대해 말씀 드리고 싶습니다.

프로젝트 정보 :

JavaScript + JQuery + Webpack, 프레임 워크 없음.
5 년 이상의 기업.
1m+ 한 달에 고유 한 사용자.
새로운 기능으로 성장합니다.

1 단계. 필요 이해

앱을 길게 개발할수록 더 복잡해집니다. 시간이 지남에 따라 우리는 더 이상 다음과 같은 문제를 무시할 수 없다는 것을 깨달았습니다.

코드베이스 복잡성 증가.
프로젝트를 이해하는 데 어려움이 있습니다.
기술 관점에서 앱의 관련성 감소.
동일한 오래된 기술로 일하는 개발자들 사이의 관심 부족.

왜 TypeScript? 편리한 정적 타이핑, 자체 문서화 코드베이스 및 향상된 코드 안정성과 같은 명백한 이점 외에도 프로젝트에 대한 몇 가지 좋은 장점을 발견했습니다.

TypeScript는 우리를 도울 수 있습니다.

엄격한 규칙을 구현하고 따르는 코드베이스 복잡성을 처리합니다.
TypeScript의 자체 문서화 기능으로 코드베이스를보다 이해할 수 있도록하십시오.
현대 기술과 일치하여 프로젝트를 유지하십시오.
개발 팀 내에서 배우고 개발하려는 동기를 유지하십시오.

2 단계. 관리 팀을 설득합니다

이러한 이점은 개발 팀이 TS를 채택하도록 설득하기에 충분했지만, 우리는 여전히 경영진에게 TypeScript 구현에 돈을 쓸 이유를 설득해야했습니다. 위의 요점은이 전환에서 어떤 경영진이 어떤 경영진을 얻을 수 있는지 설명하기에 충분히 설득력이 없었습니다. 글쎄, 우리는 여기에 몇 가지 주장이있었습니다.

TypeScript는 관리 팀을 도울 수 있습니다.

가능한 버그 수정에 시간 (== Money)을 절약하십시오.
생산에 나타나는 비용이 많이 드는 버그의 위험을 줄입니다.
성장하는 백 로그를 늦추십시오.
개선 된 문서화의 도움으로 새로운 개발자를 프로젝트에 온 보드 비용을 줄입니다.
개발자 생산성을 높입니다.

결과적으로, 우리는 승인을 받고 작업을 시작했습니다!

3 단계. 프로젝트에 TypeScript 추가

먼저 Typecript를 개발자 종속성으로 설치해야했습니다.

npm install typescript

또한 기본이 필요했습니다tsconfig.json 권장대로 프로젝트 내부에서 작동하도록 파일 :

  {
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "strict": true
  }
}

물론, 그렇게 쉬운 일이 아니 었습니까? 우리가 가진 문제를 봅시다.

프로젝트에서 WebPack을 사용하고 있기 때문에 TS 파일에 접근하는 방법을 보여 주어야했습니다. 이를 위해, 우리는 a를 추가했습니다 ts-loader 패키지:

NPM 설치–save-dev ts-loader
웹 팩 구성 파일에 매개 변수를 추가했습니다.

module.exports = {
  module: {
    rules: [{
        test: /\\.ts$/,
        exclude: /node_modules/,
        use: 'ts-loader'
      }]
  }
}

또한 Linter에게 TS 파일을 확인하도록 지시해야했습니다.

module.exports = {
  plugins: [
    new ESLintPlugin({
      extensions: './*.{js,ts}',
      files: './*.{js,ts}'
    })
  ]
}

우리는 프로젝트에서 jQuery를 사용하고 있기 때문에 (jQuery는 여전히 2025 년에 살아 있습니다!) jQuery 유형이 필요했습니다.

npm install --save-dev @types/jquery

짜잔! TypeScript는 이제 프로젝트에서 작동했습니다. 하지만 다음은 무엇입니까? 우리 프로젝트는 여전히 JS로 완전히 구성되었습니다. 우리는 그것을 어떻게 TS로 전환 했습니까?

4 단계. 프로젝트를 TS로 전환합니다

우리는 모든 JS 파일을 동시에 TS로 변환 할 여유가 없었으므로 점차적으로 수행하기로 결정했습니다. 우리는 다음 전략을 선택했습니다.

새로 만든 파일에 TypeScript를 사용했습니다
프로젝트가 여전히 개발되고 있기 때문에 구성 요소가 재 설계되고 지속적으로 리팩토링되고 있습니다.expected 새 파일을 만듭니다.
가능하면 기존 JS를 TS로 변환했습니다

우리는 기능 개발에서 일시 중지 할 수있는 드문 기회가있을 때마다 전체 파일을 TS로 다시 작성하는 것과 같은 기술적 개선에 전념했습니다.

이것은 여전히 진행중인 작업이지만 1 년 후에 몇 가지 결과가 있습니다.

프로젝트에서 JavaScript 대 TypeScript 비율

프로젝트 내 JS와 TS 모두에 대한 코드 줄 수를 비교해 봅시다.

JS: 9190 total(76.5%)

TS: 2812 total(23.5%)

지금까지 나쁘지 않습니다!
백 로그 감소

몇 년 만에 처음으로, 우리는 대부분의 백 로그를 해결할 수 있었는데, 이는 물론 다른 매개 변수의 결과이지만 TypeScript는 여전히이 성과에 기여했습니다.
개발자 팀은 새로운 기술을 습득했습니다

이 프로세스는 TypeScript에 익숙하지 않은 일부 개발자에게도 매우 재미있었습니다. 그것은 그들이 전문적인 삶에서 새로운 차원에 도달하도록 즐겁게하고 동기를 부여했습니다!

나는 TS에 대한 현재 경험, 특히 이전에 프로그래밍에 다른 타이핑을 사용하지 않은 사람들로부터 팀원들로부터 몇 가지 생각을 수집했습니다.

TS에 익숙해지는 데 약간의 시간이 걸렸으며 처음에는 어려운 느낌이 들었지만 결국에는 익숙해졌고 이제 TS 사용의 이점을 보았습니다.
가장 좋은 점은 TypeScript가 예상 유형 또는 통과 된 잘못된 유형을 강조한다는 것입니다. 이것은 정말 편리하고 시간을 절약합니다.
TypeScript는 구성 요소의 복잡한 논리에 관해서 예측 가능성을 추가합니다 (이것이 “코드베이스 복잡성 증가를 다루는 것”이 의미하는 바입니다!)
단점은 TS로 쓰는 데 시간이 조금 더 필요하지만 여전히 그만한 가치가 있다는 것입니다.
때로는 올바른 유형을 만드는 것이 어려울 수 있습니다 (우리가 도전하는 것을 좋아하는 것에 감사합니다)
코드를 실행하기 전에 오류가 방지 된 경우가 엄청나게 많은 경우가있었습니다.
우리의 코드는 더 읽기 쉽고 자체 문서화되었습니다.
사람들은 흥미로울 수 있기 때문에 TypeScript로 작업하는 것을 좋아합니다.

이 시점까지 기사를 읽은 경우 레거시 프로젝트에 TypeScript를 넣는 표시입니다! 그만한 가치가 있고 결국 고통스럽지 않습니다.

출처 참조