1+ <!doctype html> < html class ="" data-reactroot =""> < head > < script async ="" src ="https://www.google-analytics.com/analytics.js "> </ script > < script >
2+ window . GoogleAnalyticsObject = "ga" ; ( window . ga = window . ga || function ( ) { ( window . ga . q = window . ga . q || [ ] ) . push ( arguments ) ; } ) , ( window . ga . l = 1 * new Date ( ) ) ;
3+
4+ ga ( 'create' , 'UA-45256157-14' , 'auto' ) ;
5+ ga ( 'send' , 'pageview' ) ; </ script > < link rel ="icon " type ="image/png " href ="/favicon.png "/>
6+ < meta data-react-helmet ="true " charset ="utf-8 "/> < meta data-react-helmet ="true " http-equiv ="x-ua-compatible " content ="ie=edge "/> < meta data-react-helmet ="true " name ="description " content ="从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript。 "/> < meta data-react-helmet ="true " name ="viewport " content ="width=device-width, initial-scale=1 "/>
7+ < title data-react-helmet ="true "> TypeScript 入门教程</ title >
8+ < link data-react-helmet ="true " rel ="stylesheet " href ="/assets/index.css "/> < link data-react-helmet ="true " id ="prismTheme " rel ="stylesheet " href ="/assets/prism.css "/>
9+ < script data-react-helmet ="true " >
10+ const shouldSetIsDark = document . cookie . includes ( 'is_dark=1' ) ? true : document . cookie . includes ( 'is_dark=0' ) ? false : window . matchMedia ( '(prefers-color-scheme: dark)' ) . matches ;
11+ if ( shouldSetIsDark ) {
12+ document . documentElement . classList . add ( 'is_dark' ) ;
13+ document . getElementById ( 'prismTheme' ) . href = "/assets/prism_tomorrow.css" ;
14+ }
15+ </ script >
16+ </ head > < body > < header > < h1 class ="hide_on_mobile "> < a href ="/ "> TypeScript 入门教程</ a > </ h1 > < nav > < ul > < li class ="show_on_mobile flex_center "> < a class ="czs-menu-l " href ="# " style ="background-image:url("/assets/czs-menu-l.svg") "> </ a > </ li > < li class ="show_on_mobile "> < h1 class ="mobile_title "> < a href ="/ "> TypeScript 入门教程</ a > </ h1 > </ li > < li class ="hide_on_mobile "> < a href ="https://github.com/xcatliu/buy-me-a-coffee " target ="_blank "> 赞助作者</ a > </ li > < li class ="hide_on_mobile "> < a > 加入微信群</ a > </ li > < li class ="hide_on_mobile "> < a href ="https://jq.qq.com/?_wv=1027&k=5nkkFCl " target ="_blank "> 加入 QQ 群</ a > </ li > < li class ="hide_on_mobile "> < a href ="https://www.geekxh.com/ts.html?3prc " target ="_blank "> 下载本书</ a > </ li > < li class ="hide_on_mobile "> < a href ="https://github.com/xcatliu/pagic " target ="_blank "> 本网站使用 Pagic 构建</ a > </ li > < li style ="flex-grow:1 "> </ li > < li class ="flex_center "> < a class ="czs-github-logo " href ="https://github.com/xcatliu/typescript-tutorial " target ="_blank " style ="background-image:url("/assets/czs-github-logo.svg") "> </ a > </ li > < li class ="toggle_dark flex_center "> < span class ="czs-sun " style ="background-image:url("/assets/czs-sun.svg") "> </ span > < span class ="czs-sun-l " style ="background-image:url("/assets/czs-sun-l.svg") "> </ span > < span class ="czs-moon " style ="background-image:url("/assets/czs-moon.svg") "> </ span > < span class ="czs-moon-l " style ="background-image:url("/assets/czs-moon-l.svg") "> </ span > </ li > </ ul > </ nav > </ header > < aside class ="sidebar "> < ol class ="list_style_none "> < li class ="unfold "> < a href ="/introduction/index.html " class ="nav_link "> 简介< span class ="czs-angle-up-l " style ="background-image:url("/assets/czs-angle-up-l.svg") "> </ span > < span class ="czs-angle-down-l " style ="background-image:url("/assets/czs-angle-down-l.svg") "> </ span > </ a > < ol class ="list_style_none "> < li class =""> < a href ="/introduction/what-is-typescript.html " class ="nav_link "> 什么是 TypeScript</ a > </ li > < li class =""> < a href ="/introduction/get-typescript.html " class ="nav_link "> 安装 TypeScript</ a > </ li > < li class =""> < a href ="/introduction/hello-typescript.html " class ="nav_link "> Hello TypeScript</ a > </ li > </ ol > </ li > < li class ="unfold "> < a href ="/basics/index.html " class ="nav_link "> 基础< span class ="czs-angle-up-l " style ="background-image:url("/assets/czs-angle-up-l.svg") "> </ span > < span class ="czs-angle-down-l " style ="background-image:url("/assets/czs-angle-down-l.svg") "> </ span > </ a > < ol class ="list_style_none "> < li class =""> < a href ="/basics/primitive-data-types.html " class ="nav_link "> 原始数据类型</ a > </ li > < li class =""> < a href ="/basics/any.html " class ="nav_link "> 任意值</ a > </ li > < li class =""> < a href ="/basics/type-inference.html " class ="nav_link "> 类型推论</ a > </ li > < li class =""> < a href ="/basics/union-types.html " class ="nav_link "> 联合类型</ a > </ li > < li class =""> < a href ="/basics/type-of-object-interfaces.html " class ="nav_link "> 对象的类型——接口</ a > </ li > < li class =""> < a href ="/basics/type-of-array.html " class ="nav_link "> 数组的类型</ a > </ li > < li class =""> < a href ="/basics/type-of-function.html " class ="nav_link "> 函数的类型</ a > </ li > < li class =""> < a href ="/basics/type-assertion.html " class ="nav_link "> 类型断言</ a > </ li > < li class =""> < a href ="/basics/declaration-files.html " class ="nav_link "> 声明文件</ a > </ li > < li class =""> < a href ="/basics/built-in-objects.html " class ="nav_link "> 内置对象</ a > </ li > </ ol > </ li > < li class ="unfold "> < a href ="/advanced/index.html " class ="nav_link "> 进阶< span class ="czs-angle-up-l " style ="background-image:url("/assets/czs-angle-up-l.svg") "> </ span > < span class ="czs-angle-down-l " style ="background-image:url("/assets/czs-angle-down-l.svg") "> </ span > </ a > < ol class ="list_style_none "> < li class =""> < a href ="/advanced/type-aliases.html " class ="nav_link "> 类型别名</ a > </ li > < li class =""> < a href ="/advanced/string-literal-types.html " class ="nav_link "> 字符串字面量类型</ a > </ li > < li class =""> < a href ="/advanced/tuple.html " class ="nav_link "> 元组</ a > </ li > < li class =""> < a href ="/advanced/enum.html " class ="nav_link "> 枚举</ a > </ li > < li class =""> < a href ="/advanced/class.html " class ="nav_link "> 类</ a > </ li > < li class =""> < a href ="/advanced/class-and-interfaces.html " class ="nav_link "> 类与接口</ a > </ li > < li class =""> < a href ="/advanced/generics.html " class ="nav_link "> 泛型</ a > </ li > < li class =""> < a href ="/advanced/declaration-merging.html " class ="nav_link "> 声明合并</ a > </ li > < li class =""> < a href ="/advanced/further-reading.html " class ="nav_link "> 扩展阅读</ a > </ li > </ ol > </ li > < li class ="unfold "> < a href ="/engineering/index.html " class ="nav_link "> 工程< span class ="czs-angle-up-l " style ="background-image:url("/assets/czs-angle-up-l.svg") "> </ span > < span class ="czs-angle-down-l " style ="background-image:url("/assets/czs-angle-down-l.svg") "> </ span > </ a > < ol class ="list_style_none "> < li class =""> < a href ="/engineering/lint.html " class ="nav_link "> 代码检查</ a > </ li > < li class =""> < a href ="/engineering/compiler-options.html " class ="nav_link "> 编译选项</ a > </ li > </ ol > </ li > < li class =""> < a href ="/thanks/index.html " class ="nav_link "> 感谢</ a > </ li > </ ol > </ aside > < section class ="main "> < div class ="main_article "> < article > < p > 你可能或多或少听说过这样的言论：</ p >
17+ < ul >
18+ < li > TypeScript 只适用于大公司的大型项目</ li >
19+ < li > TypeScript 适合多人协作开发，一个人维护的项目就没必要使用了</ li >
20+ < li > TypeScript 学习成本高，开发成本高</ li >
21+ < li > 旧项目是 JavaScript，所以没必要改造成 TypeScript 了</ li >
22+ </ ul >
23+ < p > 我想说，都 2021 年了，赶紧上车吧，绝大部分项目都应该使用 TypeScript！</ p >
24+ < p > 大型项目不必多说，TypeScript 的类型系统能够集成到 IDE（或编辑器）中，通过代码补全、代码提示、跳转到定义等功能，极大的提高代码的可维护性，提高开发效率，降低 bug 率。</ p >
25+ < blockquote >
26+ < p > 动态类型一时爽，代码重构火葬场。</ p >
27+ </ blockquote >
28+ < p > 如果你没有学过 TypeScript，那么可能连这样的接口提示都看不懂了：</ p >
29+ < p > < img src ="../assets/what-is-typescript-tip.png " alt ="what-is-typescript-tip "> </ p >
30+ < h2 id ="%E4%B8%BA%E4%BB%80%E4%B9%88%E9%80%89%E6%8B%A9-typescript "> 为什么选择 TypeScript< a class ="anchor " href ="#%E4%B8%BA%E4%BB%80%E4%B9%88%E9%80%89%E6%8B%A9-typescript "> §</ a > </ h2 >
31+ < p > [TypeScript 官网][TypeScript]列举了一些优势，不过我更愿意自己总结一下：</ p >
32+ < h3 id ="typescript-%E5%A2%9E%E5%8A%A0%E4%BA%86%E4%BB%A3%E7%A0%81%E7%9A%84%E5%8F%AF%E8%AF%BB%E6%80%A7%E5%92%8C%E5%8F%AF%E7%BB%B4%E6%8A%A4%E6%80%A7 "> TypeScript 增加了代码的可读性和可维护性< a class ="anchor " href ="#typescript-%E5%A2%9E%E5%8A%A0%E4%BA%86%E4%BB%A3%E7%A0%81%E7%9A%84%E5%8F%AF%E8%AF%BB%E6%80%A7%E5%92%8C%E5%8F%AF%E7%BB%B4%E6%8A%A4%E6%80%A7 "> §</ a > </ h3 >
33+ < ul >
34+ < li > 类型系统实际上是最好的文档，大部分的函数看看类型的定义就可以知道如何使用了</ li >
35+ < li > 可以在编译阶段就发现大部分错误，这总比在运行时候出错好</ li >
36+ < li > 增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、代码重构等</ li >
37+ </ ul >
38+ < h3 id ="typescript-%E9%9D%9E%E5%B8%B8%E5%8C%85%E5%AE%B9 "> TypeScript 非常包容< a class ="anchor " href ="#typescript-%E9%9D%9E%E5%B8%B8%E5%8C%85%E5%AE%B9 "> §</ a > </ h3 >
39+ < ul >
40+ < li > TypeScript 是 JavaScript 的超集，< code > .js</ code > 文件可以直接重命名为 < code > .ts</ code > 即可</ li >
41+ < li > 即使不显式的定义类型，也能够自动做出< a href ="../basics/type-inference.html "> 类型推论</ a > </ li >
42+ < li > TypeScript 的类型系统是图灵完备的，可以定义从简单到复杂的几乎一切类型</ li >
43+ < li > 即使 TypeScript 编译报错，也可以生成 JavaScript 文件</ li >
44+ < li > 兼容第三方库，即使第三方库不是用 TypeScript 写的，也可以编写单独的类型文件供 TypeScript 读取</ li >
45+ </ ul >
46+ < h3 id ="typescript-%E6%8B%A5%E6%9C%89%E6%B4%BB%E8%B7%83%E7%9A%84%E7%A4%BE%E5%8C%BA "> TypeScript 拥有活跃的社区< a class ="anchor " href ="#typescript-%E6%8B%A5%E6%9C%89%E6%B4%BB%E8%B7%83%E7%9A%84%E7%A4%BE%E5%8C%BA "> §</ a > </ h3 >
47+ < ul >
48+ < li > 大部分第三方库都有提供给 TypeScript 的类型定义文件</ li >
49+ < li > Angular、Vue、VS Code、Ant Design 等等耳熟能详的项目都是使用 TypeScript 编写的</ li >
50+ < li > TypeScript 拥抱了 ES6 规范，支持 ESNext 草案中处于第三阶状态（Stage 3）的特性</ li >
51+ </ ul >
52+ < h3 id ="typescript-%E7%9A%84%E7%BC%BA%E7%82%B9 "> TypeScript 的缺点< a class ="anchor " href ="#typescript-%E7%9A%84%E7%BC%BA%E7%82%B9 "> §</ a > </ h3 >
53+ < p > 任何事物都是有两面性的，我认为 TypeScript 的弊端在于：</ p >
54+ < ul >
55+ < li > 有一定的学习成本，需要理解接口（Interfaces）、泛型（Generics）、类（Classes）、枚举类型（Enums）等前端工程师可能不是很熟悉的概念</ li >
56+ < li > 短期可能会增加一些开发成本，毕竟要多写一些类型的定义，不过对于一个需要长期维护的项目，TypeScript 能够减少其维护成本</ li >
57+ < li > 集成到构建流程需要一些工作量</ li >
58+ < li > 可能和一些库结合的不是很完美</ li >
59+ </ ul >
60+ < p > 大家可以根据自己团队和项目的情况判断是否需要使用 TypeScript。</ p >
61+ < p > StackOverflow 2020 开发者调查报告，TypeScript 击败 Python
</ p > </ article > < div id ="
gitalk-container "
> </ div > < link id ="
gitalk-css "
rel ="
preload "
href ="
https://cdn.pagic.org/[email protected] /dist/gitalk.css "
as ="
style "
/> < script defer =""
src ="
https://cdn.pagic.org/[email protected] /dist/gitalk.min.js "
> </ script > </ div > < div class ="
main_toc_container nav_link_container "
> < div class ="
main_toc "
> < aside > < nav class ="
toc "
> < ol > < li > < a href ="
#%E4%B8%BA%E4%BB%80%E4%B9%88%E9%80%89%E6%8B%A9-typescript "
> 为什么选择 TypeScript
</ a > < ol > < li > < a href ="
#typescript-%E5%A2%9E%E5%8A%A0%E4%BA%86%E4%BB%A3%E7%A0%81%E7%9A%84%E5%8F%AF%E8%AF%BB%E6%80%A7%E5%92%8C%E5%8F%AF%E7%BB%B4%E6%8A%A4%E6%80%A7 "
> TypeScript 增加了代码的可读性和可维护性
</ a > </ li > < li > < a href ="
#typescript-%E9%9D%9E%E5%B8%B8%E5%8C%85%E5%AE%B9 "
> TypeScript 非常包容
</ a > </ li > < li > < a href ="
#typescript-%E6%8B%A5%E6%9C%89%E6%B4%BB%E8%B7%83%E7%9A%84%E7%A4%BE%E5%8C%BA "
> TypeScript 拥有活跃的社区
</ a > </ li > < li > < a href ="
#typescript-%E7%9A%84%E7%BC%BA%E7%82%B9 "
> TypeScript 的缺点
</ a > </ li > </ ol > </ li > </ ol > </ nav > </ aside > </ div > </ div > </ section > < footer > Powered by
< a href ="
https://github.com/xcatliu/pagic "
target ="
_blank "
> Pagic
</ a > </ footer > < div class ="
tools flex_center hide_on_mobile "
> < a class ="
czs-pen button "
href ="
https://github.com/xcatliu/typescript-tutorial/edit/master/./introduction/why-typescript.md "
target ="
_blank "
style ="
background-image:url("/assets/czs-pen.svg") "
> </ a > < a class ="
czs-angle-up-l button "
href ="
# "
style ="
background-image:url("/assets/czs-angle-up-l.svg") "
> </ a > </ div > < script src ="
https://cdn.pagic.org/[email protected] /umd/react.production.min.js "
> </ script > < script src ="
https://cdn.pagic.org/[email protected] /umd/react-dom.production.min.js "
> </ script > < script type ="
module "
src ="
/index.js "
> </ script > </ body > </ html > 
0 commit comments