TypeScript vs Vue.js
When comparing TypeScript vs Vue.js, the Slant community recommends TypeScript for most people. In the question“What are the best solutions to "The JavaScript Problem"?” TypeScript is ranked 2nd while Vue.js is ranked 23rd. The most important reason people chose TypeScript is:
Typescript has optional static typing with support for interfaces and generics, and intelligent type inference. It makes refactoring large codebases a breeze, and provides many more safeguards for creating stable code.
Specs
Ranked in these QuestionsQuestion Ranking
Pros
Pro Optional static typing
Typescript has optional static typing with support for interfaces and generics, and intelligent type inference.
It makes refactoring large codebases a breeze, and provides many more safeguards for creating stable code.
Pro Strong typed language
Lot of benefits of it, you can read this.
Pro Strict superset of Javascript
Every existing Javascript program is already a valid TypeScript program giving it the best support for existing libraries, which is particularly useful if you need to integrate with an existing Javascript code base.
Pro First party Visual Studio support
As a Microsoft developed project, it has first party Visual Studio support that's on par with its C# support with features like syntax sensitive statement completion.
Pro Has a repository of high quality TypeScript type definitions for popular libraries
There are many ready to use and high quality TypeScript definitions for popular libraries including jquery, angular, bootstrap, d3, lodash and many-many more.
Pro Adds support for object-oriented programming
Typescript enables familiar object-oriented programming patterns: classes, inheritance, public/private methods and properties, et cetera.
Pro Polyfill for ES6 fat-arrow syntax
Typescript implements the fat arrow syntax, which always maintains the current context for this
and is a shorter/more convenient syntax than traditional function definition.
Pro Great support for React, integrated typed JSX parsing
Strongly typed react components, so UI "templating" automatically gains type safety.
Pro Great support for editors (Sublime, Code, Vim, IntelliJ...)
Pro Works well with existing Javascript code
Both can call Javascript code and be called by Javascript code. Making transitioning to the language very easy.
Pro Compiles to very native looking code
Compiles to simple looking Javascript making it easy to understand what is happening and learn the language (if you already know Javascript).
Pro Built and supported by Microsoft
Being built by Microsoft, TypeScript is much more likely than most other similar open-source projects to receive continued long-term support, good documentation, and a steady stream of development.
Pro Ability to do functional programming
Pro Clear roadmap
TypeScript has a clear and defined roadmap with rapid and constant releases.
Pro Low number of logical errors brought in by built-in type annotations
TypeScript's built-in type signatures allow developers to fully document interfaces and make sure that they will be correctly compiled. Therefore, cutting down on logical errors.
Pro Works well with Angular 2
Angular 2 is built using TypeScript and applications built using it can make use of that (or not).
Pro Can be used with any front-end stack
Vue can easily be integrated with other front-end libraries. This makes it an extremely versatile tool and it's easy to fix its shortcomings or missing features by just plugging in another library.
Pro Single file component
Very useful.
Pro Lightweight
Vue.js weighs in at 16kb min+gzip.
Pro Vuex store, events system
Pro Reactivity system
Pro CLI and Webpack integration
Pro Responsive server-side rendering
Since most of the mainstream server-side rendering implementations are synchronous, they can block the server's event loop when the application is complex.
Vue implements streaming server-side rendering, which allows you to render your component, get a readable stream and directly pipe that to the HTTP response. This allows you to have a responsive server and decreases the time your users have to wait before they get your rendered content.
Pro Supports inline templating
Although you can build components in JavaScript files, you can also use inline handlebars-like templating in your HTML views where simplicity is often a more sane choice.
Pro Can be made even lighter
Since the template-to-virtual-DOM and compiler can be separated, you can compile the templates in your machine and then deploying only the interpreter which is 12KB minified and gzipped.
Pro Support for both templates and JSX
You can choose to use either a templating language, or if you feel it's necessary to drop on a lower virtual-dom level, you can use JSX. This is simply done by replacing the template
option with a render
function.
Or alternatively, you can embed functions inside templates by using the <render>
tag.
Pro SEO friendly
Starting with Vue 2.0, Vue supports server-side rendering. This helps with SEO a lot, since the views are rendered directly on the server, which are indexed by search engines.
Pro VueRouter
Cons
Con Too similar to Javascript
Presents some advantages compared to Javascript, but because it is designed to be a superset of Javascript, it means all the bad parts of Javascript are still present.
Con Type checking not enforced by default
You have to use compiler flags to make sure it catches flaws like usage of implicit any, etc.
Con Type inference coverage is incomplete
The default type when declaring and using a variable is any
. For example, the following should break but does not:
function add(a:number) { return a + 1 }
function addAB(a, b) {return add(a) + b}
addAB("this should break but doesn't :(", 100)
In order to avoid this, you have to declare type signatures for every variable or parameter or set the flag --noImplicityAny
when running the compiler.
Con Requires "this" for field access
Even in cases were there is no ambiguity, you still have to use "this.fieldName" instead of just "fieldName".
Con Syntax is too verbose
Con No support for dead code elimination
Typescript compiler does not remove dead code from generated file(s), you have to use external tools to remove unused code after compilation. This is harder to achieve, because Typescript compiler eliminated all type information.
Con No support for conditional compilation
There is no clean way to have debug and release builds compiled from the same source, where the release version removes all debugging tools and outputs from the generated file(s).
Con Awful error messages
Comparing to Elm or Rust for example, TypeScript's error messages won't say you very much. For example if you change method of interface which your class implements it won't say your class have incorrect implementation. Instead it'll show error in usage of instances of class. In some cases it can spoil hours of your work trying to figure out why your parameters are incorrect.
Con Technical debt
As consequence of not enforcing type checking.
Con No Java-like package structure
If you prefer a Java-like approach of partitioning your code into different packages, the module system of typescript will confuse you.
Con Small community
Con No option to declare that a function throws errors
Con Poor typescript support
Very basic typescript support.