기본 콘텐츠로 건너뛰기

Angular에서 JavaScript대신 TypeScript사용하는 이유?

Angular에서 JavaScript대신 TypeScript사용하는 이유?

참고 도서

결론부터 얘기하자면

"생산성" 때문!

1. JavaScript는 컴파일 과정이 없기 때문에 에러가 런타임에서만 발생한다

문자열을 인자로 받는 함수에 개발자가 실수로 숫자를 넣었다면?

컴파일 과정에서는 에러 없이 돌아가서 문제를 미리 발견하고 고치지 못하게 된다.

런타임에서 에러가 발생하면 어플리케이션이 종료되어 서비스가 멈출 수도 있는 상황인 것이다.

JavaScript에서 동적으로 타입을 결정하기 때문에 발생하는 문제!

생산성을 높이기 위해서는:

처음부터 정적 타입을 지원하는 언어로 개발하고 -> JavaScript로 변환해서 배포

컴파일해서 JavaScript으로 만들어 낼 수 있는 언어 : 대표적으로 TypeScript, Dart, CoffeeScript

Angular 프레임워크 자체도 TypeScript으로 작성되었기 때문에 자연스럽게 TypeScript으로 개발할 수 있다.

TypeScript는 타입을 지원하기 때문에 에러가 발생할 수 있는 코드는 컴파일 단계에서 미리 검출할 수 있다.

2. IDE에서 지원할 수 있는 기능이 JavaScript를 사용할 때보다 많아진다.

TypeScript는 인자의 개수가 잘못되거나 잘못된 타입의 인자를 전달해도 에러를 표시한다.

또한 IDE에서 타입 정의 파일을 분석해서 어떤 API를 사용할 수 있는지 그때그때 알려준다.

Angular 프레임워크도 타입 정의 파일을 제공한다.

3. TypeScript는 ECMAScript6 표준과 7 표준을 따르고 여기에 타입, 인터페이스, 데코레이터, 클래스 멤버 변수, 제네릭, public과 private과 같은 키워드를 추가로 제공한다

4. 컴파일해서 만든 JavaScript코드를 읽기 쉽다.

5. 가이드 문서에서 제공하는 예제 코드, 블로그에 있는 코드는 모두 TypeScript로 먼저 제공된다. Dart나 JavaScript로 제공되는 가이드 문서는 상대적으로 느리다.

from http://kkangdda.tistory.com/66 by ccl(A) rewrite - 2020-03-07 12:55:36

댓글

댓글 쓰기

이 블로그의 인기 게시물

[aws] deploy Angular app with s3 | AWS S3로 angular 앱 배포하기

[aws] deploy Angular app with s3 | AWS S3로 angular 앱 배포하기 angular project를 빌드한다 ng build --prod 그러면 dist 폴더가 생긴다. dist 폴더 안에 있는 아이들을 사용한다. 아마존 s3 콘솔로 이동 https://s3.console.aws.amazon.com/s3/home?region=ap-northeast-2 새로운 Bucket 을 생성한다(Create bucket). 버킷 이름은 고유하게 짓는다. 버킷 생성후 properties tab > static website hosting을 클릭한다. index document는 index.html은 쓴다. properties > static website hosting Permission tab 에서 권한을 수정한다. overview tab 에서 필요한 파일 업로드 dist 폴더 안에 있는 파일들을 업로드 한다. bucket policy 설정 properties > static website hosting > endpoint 클릭하면 서버에 올라간 앱을 확인 할 수 있다 일단 angular 앱을 올리긴 했는데.. 이걸로는 아무것도 할 수 었다. django로 만든 서버를 올리고 database를 연결하고 그것을 지금 이 angular 앱과 연결해야한다. 아직 어떻게 해야 할지는 모르겠음 계속 삽질 중. 그래도 angular app 하나 올라갔는데 재밌네 from http://paigeblog.tistory.com/18 by ccl(A) rewrite - 2020-03-25 16:20:22
댓글 쓰기
자세한 내용 보기

[Debugging] AngularJS2 - Can't bind to 'ngModel' since it isn't a...

[Debugging] AngularJS2 - Can't bind to 'ngModel' since it isn't a... - 좋아요 하이 .. !! Angular2 로 개발을 하다가 아래와 같은 에러를 만났다. 흠 .. 이게 뭘까 열심히 구글링을 해봤다. 간단한 내용이다. 모듈을 추가해주기만 하면 된다. app.module.ts를 열어보자. 여기에다가 FormsModule 과 ReactiveFormsModule을 추가해주면 문제가 해결된다 ! 다들 즐거운 코딩하자. from http://devkingdom.tistory.com/106 by ccl(A) rewrite - 2020-03-18 00:54:15
댓글 쓰기
자세한 내용 보기

Angular Lazy-loading-ngmodules 사용해보기

Angular Lazy-loading-ngmodules 사용해보기 재미있는 프레임워크공부/Angular 2+ Lazy-loading-ngmodules를 사용하는 이유 SPA(Single Page Application)의 단점인 초기 구동 속도를 Angular로 피해갈 수는 없다. 프로젝트가 커지면 커질 수록 더 초기 구동 속도가 느려질 것이다. 그래서 이번 시간에는 초기 구동 시 전체 모듈을 불러오지 않고 관련한 모듈 페이지 로딩 시 불러올 수 있게 구글에서 만들어 놓은 Lazy-loading-ngmodules에 대해 알아보자. Lazy-loading-ngmodules를 먼저 알기 전 Angular route 기능에 대해 이해하고 들어갔으면 좋겠다. 자 그럼 이제 시작해보자. 1. app-routing (root)를 위한 app-routing.module.ts 를 만들어 보자 만약 새로운 프로젝트를 시작한다면 아래의 명령어를 치면 module을 자동적으로 생성해준다. ng new (프로젝트 이름) --routing 기존에 프로젝트에 적용하려고 한다면 app-routing.module.ts를 만들고 그 안에 아래의 내용들을 집어 넣는다. import { NgModule } from '@angular/core' ; import { Routes, RouterModule } from '@angular/router' ; const routes : Routes = []; @ NgModule ({ imports: [RouterModule. forRoot (routes)], exports: [RouterModule] }) export class AppRoutingModule { } CLI을 이용하면 자동적으로 AppModule에 import 되지만 직접 생성하였기 때문에 AppRountingModule을 app.module.ts에 import 해준다. 2. 이제 서브 라우팅을 생성하기 위해 새로운 ...
댓글 쓰기
자세한 내용 보기