mirror of
https://github.com/gnu4cn/ts-learnings.git
synced 2024-12-25 20:30:28 +08:00
updated README.md
This commit is contained in:
Unisko PENG,
parent
8f804398a8
commit
774ef0fca0
@ -6,7 +6,7 @@
|
||||
|
||||
- [Java 编程语言](https://java.xfoss.com)，"Head First Java" 书中文翻译
|
||||
|
||||
- [60天通过CCNA考试](https://ccna60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d.xfoss.com)，一本基础的网络通讯书，翻译自国外经典 CCNA 60 days
|
||||
- [60天通过CCNA考试](https://ccna60d.xfoss.com)，一本基础的网络通讯书，翻译自国外经典 CCNA 60 days
|
||||
|
||||
|
||||
|
||||
@ -114,7 +114,7 @@ TypeScript的许多优势，带来了一种好得多的app开发体验。因此
|
||||
`package.json`文件是所有NodeJS项目都有的文件，有了该文件，就可以使用`npm -i`命令，在本地安装项目依赖包。于是项目就可以运行起来了。
|
||||
|
||||
+ `tsconfig.json` 文件
|
||||
|
||||
|
||||
该文件表明此NodeJS项目是一个 TypeScript项目，其中包含了`files`、`include`、`exclude`、`compilerOptions`等属性，用于将 TypeScript代码编译为 JavaScript目标代码过程。
|
||||
|
||||
```json
|
||||
|
||||
360
index.html
Normal file
360
index.html
Normal file
@ -0,0 +1,360 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html lang="en" class="sidebar-visible no-js light">
|
||||
<head>
|
||||
<!-- Book generated using mdBook -->
|
||||
<meta charset="UTF-8">
|
||||
<title>TypeScript手册</title>
|
||||
|
||||
|
||||
<!-- Custom HTML head -->
|
||||
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="theme-color" content="#ffffff" />
|
||||
|
||||
<link rel="icon" href="favicon.svg">
|
||||
<link rel="shortcut icon" href="favicon.png">
|
||||
<link rel="stylesheet" href="css/variables.css">
|
||||
<link rel="stylesheet" href="css/general.css">
|
||||
<link rel="stylesheet" href="css/chrome.css">
|
||||
<link rel="stylesheet" href="css/print.css" media="print">
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="stylesheet" href="FontAwesome/css/font-awesome.css">
|
||||
<link rel="stylesheet" href="fonts/fonts.css">
|
||||
|
||||
<!-- Highlight.js Stylesheets -->
|
||||
<link rel="stylesheet" href="highlight.css">
|
||||
<link rel="stylesheet" href="tomorrow-night.css">
|
||||
<link rel="stylesheet" href="ayu-highlight.css">
|
||||
|
||||
<!-- Custom theme stylesheets -->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="body-container">
|
||||
<!-- Provide site root to javascript -->
|
||||
<script>
|
||||
var path_to_root = "";
|
||||
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
|
||||
</script>
|
||||
|
||||
<!-- Work around some values being stored in localStorage wrapped in quotes -->
|
||||
<script>
|
||||
try {
|
||||
var theme = localStorage.getItem('mdbook-theme');
|
||||
var sidebar = localStorage.getItem('mdbook-sidebar');
|
||||
|
||||
if (theme.startsWith('"') && theme.endsWith('"')) {
|
||||
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
|
||||
}
|
||||
|
||||
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
|
||||
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
|
||||
}
|
||||
} catch (e) { }
|
||||
</script>
|
||||
|
||||
<!-- Set the theme before any content is loaded, prevents flash -->
|
||||
<script>
|
||||
var theme;
|
||||
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
|
||||
if (theme === null || theme === undefined) { theme = default_theme; }
|
||||
var html = document.querySelector('html');
|
||||
html.classList.remove('no-js')
|
||||
html.classList.remove('light')
|
||||
html.classList.add(theme);
|
||||
html.classList.add('js');
|
||||
</script>
|
||||
|
||||
<!-- Hide / unhide sidebar before it is displayed -->
|
||||
<script>
|
||||
var html = document.querySelector('html');
|
||||
var sidebar = null;
|
||||
if (document.body.clientWidth >= 1080) {
|
||||
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
|
||||
sidebar = sidebar || 'visible';
|
||||
} else {
|
||||
sidebar = 'hidden';
|
||||
}
|
||||
html.classList.remove('sidebar-visible');
|
||||
html.classList.add("sidebar-" + sidebar);
|
||||
</script>
|
||||
|
||||
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
|
||||
<div class="sidebar-scrollbox">
|
||||
<ol class="chapter"><li class="chapter-item expanded affix "><a href="../index.html" class="active">TypeScript手册</a></li><li class="chapter-item expanded "><a href="00_tsconfig-json.html"><strong aria-hidden="true">1.</strong> tsconfig.json</a></li><li class="chapter-item expanded "><a href="01_basic_data_types.html"><strong aria-hidden="true">2.</strong> 基本数据类型</a></li><li class="chapter-item expanded "><a href="02_variables_declaration.html"><strong aria-hidden="true">3.</strong> 变量声明</a></li><li class="chapter-item expanded "><a href="03_classes.html"><strong aria-hidden="true">4.</strong> 类</a></li><li class="chapter-item expanded "><a href="04_interfaces.html"><strong aria-hidden="true">5.</strong> 接口</a></li><li class="chapter-item expanded "><a href="05_functions.html"><strong aria-hidden="true">6.</strong> 函数</a></li><li class="spacer"></li><li class="chapter-item expanded affix "><li class="part-title">进阶</li><li class="chapter-item expanded "><a href="06_generics.html"><strong aria-hidden="true">7.</strong> 泛型</a></li><li class="chapter-item expanded "><a href="07_enums.html"><strong aria-hidden="true">8.</strong> 枚举</a></li><li class="chapter-item expanded "><a href="08_type_inference.html"><strong aria-hidden="true">9.</strong> 类型推导</a></li><li class="chapter-item expanded "><a href="09_type_compatibility.html"><strong aria-hidden="true">10.</strong> 类型兼容性</a></li><li class="chapter-item expanded "><a href="10_advanced_types.html"><strong aria-hidden="true">11.</strong> 高级类型</a></li><li class="chapter-item expanded "><a href="11_symbols.html"><strong aria-hidden="true">12.</strong> 符号</a></li><li class="spacer"></li><li class="chapter-item expanded affix "><li class="part-title">高级特性</li><li class="chapter-item expanded "><a href="12_iterators_and_generators.html"><strong aria-hidden="true">13.</strong> 迭代器与生成器</a></li><li class="chapter-item expanded "><a href="13_modules.html"><strong aria-hidden="true">14.</strong> 模块</a></li><li class="chapter-item expanded "><a href="14_namespaces.html"><strong aria-hidden="true">15.</strong> 命名空间</a></li><li class="chapter-item expanded "><a href="15_modules_and_namespaces.html"><strong aria-hidden="true">16.</strong> 模块与命名空间</a></li><li class="chapter-item expanded "><a href="16_module_resolution.html"><strong aria-hidden="true">17.</strong> 模块解析</a></li><li class="chapter-item expanded "><a href="17_declaration_merging.html"><strong aria-hidden="true">18.</strong> 声明的融合</a></li><li class="chapter-item expanded "><a href="18_jsx.html"><strong aria-hidden="true">19.</strong> JSX</a></li><li class="chapter-item expanded "><a href="19_decorators.html"><strong aria-hidden="true">20.</strong> 装饰器</a></li><li class="chapter-item expanded "><a href="20_mixins.html"><strong aria-hidden="true">21.</strong> 混入Mixins</a></li><li class="chapter-item expanded "><a href="21_triple-slash_directives.html"><strong aria-hidden="true">22.</strong> 三斜杠指令</a></li></ol>
|
||||
</div>
|
||||
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
|
||||
</nav>
|
||||
|
||||
<div id="page-wrapper" class="page-wrapper">
|
||||
|
||||
<div class="page">
|
||||
<div id="menu-bar-hover-placeholder"></div>
|
||||
<div id="menu-bar" class="menu-bar sticky bordered">
|
||||
<div class="left-buttons">
|
||||
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
|
||||
<i class="fa fa-bars"></i>
|
||||
</button>
|
||||
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
|
||||
<i class="fa fa-paint-brush"></i>
|
||||
</button>
|
||||
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
|
||||
<li role="none"><button role="menuitem" class="theme" id="light">Light</button></li>
|
||||
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
|
||||
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
|
||||
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
|
||||
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
|
||||
</ul>
|
||||
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
|
||||
<i class="fa fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h1 class="menu-title"></h1>
|
||||
|
||||
<div class="right-buttons">
|
||||
<a href="print.html" title="Print this book" aria-label="Print this book">
|
||||
<i id="print-button" class="fa fa-print"></i>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="search-wrapper" class="hidden">
|
||||
<form id="searchbar-outer" class="searchbar-outer">
|
||||
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
|
||||
</form>
|
||||
<div id="searchresults-outer" class="searchresults-outer hidden">
|
||||
<div id="searchresults-header" class="searchresults-header"></div>
|
||||
<ul id="searchresults">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
|
||||
<script>
|
||||
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
|
||||
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
|
||||
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
|
||||
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="content" class="content">
|
||||
<main>
|
||||
<h1 id="typescript-学习记录"><a class="header" href="#typescript-学习记录">TypeScript 学习记录</a></h1>
|
||||
<p>你可以直接在 xfoss.com 阅读本书：<a href="https://ts.xfoss.com/">ts.xfoss.com</a>。xfoss.com 还有其他书籍：</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p><a href="https://rust-lang.xfoss.com">Rust 编程语言</a>，Rust 官方教程中文翻译</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><a href="https://java.xfoss.com">Java 编程语言</a>，"Head First Java" 书中文翻译</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><a href="https://ccna60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d.xfoss.com">60天通过CCNA考试</a>，一本基础的网络通讯书，翻译自国外经典 CCNA 60 days</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>你可以在 https://github.com/gnu4cn/ts-learnings 上 fork 本项目，并提交你的修正。</p>
|
||||
<p>ECMAScript 2015 (ES6)已经正式发布，所有浏览器均已支持，同时许多项目，如Angular, Ionic, Electron框架等，均已在往ES6迁移。故需要学习掌握这一新版的Javascript。</p>
|
||||
<h2 id="变更日志"><a class="header" href="#变更日志">变更日志</a></h2>
|
||||
<ul>
|
||||
<li>2019-3-27, 重新整理<code>package.json</code>、<code>tsconfig.json</code>与<code>gulpfile.js</code>文件，让<code>.gitignore</code>生效，令到项目大小得以缩小</li>
|
||||
</ul>
|
||||
<h2 id="es6与-javascript"><a class="header" href="#es6与-javascript">ES6与 Javascript</a></h2>
|
||||
<p>ES6仍然是Javascript, 只不过是在我们已经熟悉的Javascript上加入了一些新的东西。使得Javascript更为强大，可以应对大型程序的要求。</p>
|
||||
<h2 id="es6的实现"><a class="header" href="#es6的实现">ES6的实现</a></h2>
|
||||
<p>ES6只是新一代Javascript的规范，几大公司、各个浏览器引擎等都有具体的实现。微软TypeScript、社区的CoffeeScript等都是ES6的具体实现。</p>
|
||||
<p>参考链接：</p>
|
||||
<ul>
|
||||
<li>https://blog.mariusschulz.com/2017/01/13/typescript-vs-flow</li>
|
||||
<li>http://blog.ionicframework.com/ionic-and-typescript-part-1/</li>
|
||||
</ul>
|
||||
<p>鉴于Angular与Ionic都是使用了微软的TypeScript, 因此在学习ES6时，将学习TypeScript这一实现。</p>
|
||||
<h2 id="关于typescript"><a class="header" href="#关于typescript">关于TypeScript</a></h2>
|
||||
<p>TypeScript是Javascript的超集，有着以下优势：</p>
|
||||
<ul>
|
||||
<li>可选的静态类型（关键就是这里的“可选”, Optional static typing, the key here is optional）</li>
|
||||
<li>类型推理，此特性在并没有使用到类型的情况下，带来那些类型的诸多益处（Type Inference, which gives some of the benefits of types, without actually using them）</li>
|
||||
<li>可在主流浏览器尚未对ES6/ES7提供支持之前，通过TypeScript用上ES6及ES7的特性</li>
|
||||
<li>TypeScript有着将程序向下编译到所有浏览器都支持的某个Javascript版本的能力</li>
|
||||
<li>IntelliSense提供了极好的工具支持</li>
|
||||
</ul>
|
||||
<p>因为TypeScript带给如你一样的开发者这些不错的特性及巨大优势，Ionic是以TypeScript编写的，而不是ES6（这里就表明了<strong>TypeScript并不是ES6</strong>）。</p>
|
||||
<h3 id="关于可选的静态类型"><a class="header" href="#关于可选的静态类型">关于可选的静态类型</a></h3>
|
||||
<p>可能TypeScript最能打动人心的，就是其所提供到的可选静态类型系统了。将给变量、函数、属性等加上类型。这将帮到编译器，且在app尚未运行时，就给出有关代码中任何潜在错误的警告。在使用到库及框架时，类型也有帮助，这是由于类型可令到开发者准确知悉那些APIs期望何种类型的数据。而关于类型系统，你首先要记住的是它是可选的。TypeScript并不强制要求开发者在他们不想添加的上必须添加类型。但随着应用变得越来越大、越来越复杂，类型确实可以提供到一些很棒的优势。</p>
|
||||
<p>关于 IntelliSense:</p>
|
||||
<blockquote>
|
||||
<p>一种 Microsoft 技术，这种技术通过在光标悬停在函数上时显示类定义和注释，从而让您可以分析源代码。当您在 IDE 中键入函数名时，IntelliSense 还可以完成这些名称。</p>
|
||||
</blockquote>
|
||||
<p>TypeScript的一大优势，就是其代码补全与IntelliSense了。IntelliSense在敲入代码时，提供有用的提示。因为Ionic本身就是用TypeScript写就的，代码编辑器就可以展示出所有可用的方法，以及这些方法所期望的参数。当今所有最好的集成开发环境，比如VScode、Atom、Sublime text，甚至那些诸如Vim/Neovim等命令行的编辑器，都有对代码补全的支持。</p>
|
||||
<p>TypeScript的许多优势，带来了一种好得多的app开发体验。因此，Ionic将全力压注到TypeScript上，而不提供ES6的启动器。</p>
|
||||
<p>摘录自：</p>
|
||||
<blockquote>
|
||||
<p><a href="https://ionicframework.com/docs/developer-resources/typescript/">TypeScript的优势</a></p>
|
||||
</blockquote>
|
||||
<h2 id="本教程特色"><a class="header" href="#本教程特色">本教程特色</a></h2>
|
||||
<p>针对新特性的详细讨论，并与与实例代码结合。TypeScript是在Javascript的基础上，引入了诸多新特性，本教程将逐一讨论这些新特性，并同时编写相应代码加以验证。</p>
|
||||
<h2 id="环境的建立"><a class="header" href="#环境的建立">环境的建立</a></h2>
|
||||
<p>环境的建立主要由三个文件构成：</p>
|
||||
<ul>
|
||||
<li><code>package.json</code> -- NodeJS 的项目文件，该文件包含了项目的各种信息与包依赖，比如项目名称、所有者信息、许可证、git地址等信息，包含各种依赖包等。</li>
|
||||
</ul>
|
||||
<pre><code class="language-json">{
|
||||
"name": "typescript-learnings",
|
||||
"version": "0.1.0",
|
||||
"description": "TypeScript Learning stuffs.",
|
||||
"main": "/dist/main.js",
|
||||
"scripts": {
|
||||
"gulp": "gulp &",
|
||||
"start": "live-server dist/",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/gnu4cn/ts-learnings.git"
|
||||
},
|
||||
"keywords": [
|
||||
"TypeScript"
|
||||
],
|
||||
"author": "Peng Hailin, unisko@gmail.com",
|
||||
"license": "ISC",
|
||||
"bugs": {
|
||||
"url": "https://github.com/gnu4cn/ts-learnings/issues"
|
||||
},
|
||||
"homepage": "https://github.com/gnu4cn/ts-learnings#readme",
|
||||
"devDependencies": {
|
||||
"@types/reflect-metadata": "^0.1.0",
|
||||
"gulp": "^4.0.0",
|
||||
"gulp-sourcemaps": "^2.6.1",
|
||||
"gulp-typescript": "^5.0.1",
|
||||
"gulp-uglify": "^3.0.0",
|
||||
"live-server": "^1.2.0",
|
||||
"typescript": "^3.4.1"
|
||||
},
|
||||
"dependencies": {}
|
||||
}
|
||||
</code></pre>
|
||||
<p><code>package.json</code>文件是所有NodeJS项目都有的文件，有了该文件，就可以使用<code>npm -i</code>命令，在本地安装项目依赖包。于是项目就可以运行起来了。</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p><code>tsconfig.json</code> 文件</p>
|
||||
<p>该文件表明此NodeJS项目是一个 TypeScript项目，其中包含了<code>files</code>、<code>include</code>、<code>exclude</code>、<code>compilerOptions</code>等属性，用于将 TypeScript代码编译为 JavaScript目标代码过程。</p>
|
||||
</li>
|
||||
</ul>
|
||||
<pre><code class="language-json">{
|
||||
"include": [
|
||||
"src/*.ts"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"noImplicitAny": true,
|
||||
"target": "es5",
|
||||
"outDir": "dist/",
|
||||
"experimentalDecorators": true,
|
||||
"emitDecoratorMetadata": true,
|
||||
"types": [
|
||||
"reflect-metadata"
|
||||
]
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
<ul>
|
||||
<li>
|
||||
<p><code>gulpfile.js</code> 文件</p>
|
||||
<p>该文件是 Gulp 自动化工具的配置文件。利用 Gulp 来自动化处理有关编译、打包及SourceMap相关工作。在上面的<code>package.json</code>文件中包含了对 <code>gulp</code>、<code>gulp-typescript</code>的依赖，其中<code>gulp-typescript</code>就是 Gulp中的 TypeScript编译器。</p>
|
||||
</li>
|
||||
</ul>
|
||||
<pre><code class="language-javascript">var gulp = require('gulp');
|
||||
var ts = require('gulp-typescript');
|
||||
|
||||
var tsProject = ts.createProject('tsconfig.json');
|
||||
|
||||
let paths = {
|
||||
pages: ["src/*.html"]
|
||||
};
|
||||
|
||||
gulp.task("copy-html", ()=>{
|
||||
return gulp.src(paths.pages)
|
||||
.pipe(gulp.dest("dist"))
|
||||
});
|
||||
|
||||
gulp.task('tsc', () => {
|
||||
return gulp.src('src/*.ts')
|
||||
.pipe(tsProject())
|
||||
.pipe(gulp.dest('dist'));
|
||||
});
|
||||
|
||||
// 这里 watch 里必须使用 gulp.series
|
||||
gulp.task('watch', () => {
|
||||
gulp.watch('src/*.ts', gulp.series('tsc'));
|
||||
});
|
||||
|
||||
|
||||
// 这里必须要有一个 default 任务
|
||||
gulp.task('default', gulp.series('copy-html', 'tsc', 'watch'));
|
||||
</code></pre>
|
||||
<p>有了这三个文件，就意味着环境建立起来了，可以开始TypeScript代码的编写了。<code>src</code>目录下的所有<code>.ts</code>代码，都将被编译到 <code>dist</code>目录下。</p>
|
||||
|
||||
</main>
|
||||
|
||||
<nav class="nav-wrapper" aria-label="Page navigation">
|
||||
<!-- Mobile navigation buttons -->
|
||||
|
||||
<a rel="next" href="00_tsconfig-json.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
||||
<i class="fa fa-angle-right"></i>
|
||||
</a>
|
||||
|
||||
<div style="clear: both"></div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="nav-wide-wrapper" aria-label="Page navigation">
|
||||
|
||||
<a rel="next" href="00_tsconfig-json.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
||||
<i class="fa fa-angle-right"></i>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Livereload script (if served using the cli tool) -->
|
||||
<script>
|
||||
const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
const wsAddress = wsProtocol + "//" + location.host + "/" + "__livereload";
|
||||
const socket = new WebSocket(wsAddress);
|
||||
socket.onmessage = function (event) {
|
||||
if (event.data === "reload") {
|
||||
socket.close();
|
||||
location.reload();
|
||||
}
|
||||
};
|
||||
|
||||
window.onbeforeunload = function() {
|
||||
socket.close();
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
window.playground_copyable = true;
|
||||
</script>
|
||||
|
||||
|
||||
<script src="elasticlunr.min.js"></script>
|
||||
<script src="mark.min.js"></script>
|
||||
<script src="searcher.js"></script>
|
||||
|
||||
<script src="clipboard.min.js"></script>
|
||||
<script src="highlight.js"></script>
|
||||
<script src="book.js"></script>
|
||||
|
||||
<!-- Custom JS scripts -->
|
||||
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
173
src/README.md
173
src/README.md
@ -1,173 +0,0 @@
|
||||
# TypeScript 学习记录
|
||||
|
||||
你可以直接在 xfoss.com 阅读本书：[ts.xfoss.com](https://ts.xfoss.com/)。xfoss.com 还有其他书籍：
|
||||
|
||||
- [Rust 编程语言](https://rust-lang.xfoss.com)，Rust 官方教程中文翻译
|
||||
|
||||
- [Java 编程语言](https://java.xfoss.com)，"Head First Java" 书中文翻译
|
||||
|
||||
- [60天通过CCNA考试](https://ccna60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d60d.xfoss.com)，一本基础的网络通讯书，翻译自国外经典 CCNA 60 days
|
||||
|
||||
|
||||
|
||||
|
||||
你可以在 https://github.com/gnu4cn/ts-learnings 上 fork 本项目，并提交你的修正。
|
||||
|
||||
|
||||
|
||||
ECMAScript 2015 (ES6)已经正式发布，所有浏览器均已支持，同时许多项目，如Angular, Ionic, Electron框架等，均已在往ES6迁移。故需要学习掌握这一新版的Javascript。
|
||||
|
||||
## 变更日志
|
||||
|
||||
+ 2019-3-27, 重新整理`package.json`、`tsconfig.json`与`gulpfile.js`文件，让`.gitignore`生效，令到项目大小得以缩小
|
||||
|
||||
## ES6与 Javascript
|
||||
|
||||
ES6仍然是Javascript, 只不过是在我们已经熟悉的Javascript上加入了一些新的东西。使得Javascript更为强大，可以应对大型程序的要求。
|
||||
|
||||
## ES6的实现
|
||||
|
||||
ES6只是新一代Javascript的规范，几大公司、各个浏览器引擎等都有具体的实现。微软TypeScript、社区的CoffeeScript等都是ES6的具体实现。
|
||||
|
||||
参考链接：
|
||||
|
||||
- https://blog.mariusschulz.com/2017/01/13/typescript-vs-flow
|
||||
- http://blog.ionicframework.com/ionic-and-typescript-part-1/
|
||||
|
||||
鉴于Angular与Ionic都是使用了微软的TypeScript, 因此在学习ES6时，将学习TypeScript这一实现。
|
||||
|
||||
## 关于TypeScript
|
||||
|
||||
TypeScript是Javascript的超集，有着以下优势：
|
||||
|
||||
- 可选的静态类型（关键就是这里的“可选”, Optional static typing, the key here is optional）
|
||||
- 类型推理，此特性在并没有使用到类型的情况下，带来那些类型的诸多益处（Type Inference, which gives some of the benefits of types, without actually using them）
|
||||
- 可在主流浏览器尚未对ES6/ES7提供支持之前，通过TypeScript用上ES6及ES7的特性
|
||||
- TypeScript有着将程序向下编译到所有浏览器都支持的某个Javascript版本的能力
|
||||
- IntelliSense提供了极好的工具支持
|
||||
|
||||
因为TypeScript带给如你一样的开发者这些不错的特性及巨大优势，Ionic是以TypeScript编写的，而不是ES6（这里就表明了**TypeScript并不是ES6**）。
|
||||
|
||||
### 关于可选的静态类型
|
||||
|
||||
可能TypeScript最能打动人心的，就是其所提供到的可选静态类型系统了。将给变量、函数、属性等加上类型。这将帮到编译器，且在app尚未运行时，就给出有关代码中任何潜在错误的警告。在使用到库及框架时，类型也有帮助，这是由于类型可令到开发者准确知悉那些APIs期望何种类型的数据。而关于类型系统，你首先要记住的是它是可选的。TypeScript并不强制要求开发者在他们不想添加的上必须添加类型。但随着应用变得越来越大、越来越复杂，类型确实可以提供到一些很棒的优势。
|
||||
|
||||
关于 IntelliSense:
|
||||
|
||||
> 一种 Microsoft 技术，这种技术通过在光标悬停在函数上时显示类定义和注释，从而让您可以分析源代码。当您在 IDE 中键入函数名时，IntelliSense 还可以完成这些名称。
|
||||
|
||||
TypeScript的一大优势，就是其代码补全与IntelliSense了。IntelliSense在敲入代码时，提供有用的提示。因为Ionic本身就是用TypeScript写就的，代码编辑器就可以展示出所有可用的方法，以及这些方法所期望的参数。当今所有最好的集成开发环境，比如VScode、Atom、Sublime text，甚至那些诸如Vim/Neovim等命令行的编辑器，都有对代码补全的支持。
|
||||
|
||||
TypeScript的许多优势，带来了一种好得多的app开发体验。因此，Ionic将全力压注到TypeScript上，而不提供ES6的启动器。
|
||||
|
||||
摘录自：
|
||||
|
||||
> [TypeScript的优势](https://ionicframework.com/docs/developer-resources/typescript/)
|
||||
|
||||
## 本教程特色
|
||||
|
||||
针对新特性的详细讨论，并与与实例代码结合。TypeScript是在Javascript的基础上，引入了诸多新特性，本教程将逐一讨论这些新特性，并同时编写相应代码加以验证。
|
||||
|
||||
## 环境的建立
|
||||
|
||||
环境的建立主要由三个文件构成：
|
||||
|
||||
+ `package.json` -- NodeJS 的项目文件，该文件包含了项目的各种信息与包依赖，比如项目名称、所有者信息、许可证、git地址等信息，包含各种依赖包等。
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "typescript-learnings",
|
||||
"version": "0.1.0",
|
||||
"description": "TypeScript Learning stuffs.",
|
||||
"main": "/dist/main.js",
|
||||
"scripts": {
|
||||
"gulp": "gulp &",
|
||||
"start": "live-server dist/",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/gnu4cn/ts-learnings.git"
|
||||
},
|
||||
"keywords": [
|
||||
"TypeScript"
|
||||
],
|
||||
"author": "Peng Hailin, unisko@gmail.com",
|
||||
"license": "ISC",
|
||||
"bugs": {
|
||||
"url": "https://github.com/gnu4cn/ts-learnings/issues"
|
||||
},
|
||||
"homepage": "https://github.com/gnu4cn/ts-learnings#readme",
|
||||
"devDependencies": {
|
||||
"@types/reflect-metadata": "^0.1.0",
|
||||
"gulp": "^4.0.0",
|
||||
"gulp-sourcemaps": "^2.6.1",
|
||||
"gulp-typescript": "^5.0.1",
|
||||
"gulp-uglify": "^3.0.0",
|
||||
"live-server": "^1.2.0",
|
||||
"typescript": "^3.4.1"
|
||||
},
|
||||
"dependencies": {}
|
||||
}
|
||||
```
|
||||
|
||||
`package.json`文件是所有NodeJS项目都有的文件，有了该文件，就可以使用`npm -i`命令，在本地安装项目依赖包。于是项目就可以运行起来了。
|
||||
|
||||
+ `tsconfig.json` 文件
|
||||
|
||||
该文件表明此NodeJS项目是一个 TypeScript项目，其中包含了`files`、`include`、`exclude`、`compilerOptions`等属性，用于将 TypeScript代码编译为 JavaScript目标代码过程。
|
||||
|
||||
```json
|
||||
{
|
||||
"include": [
|
||||
"src/*.ts"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"noImplicitAny": true,
|
||||
"target": "es5",
|
||||
"outDir": "dist/",
|
||||
"experimentalDecorators": true,
|
||||
"emitDecoratorMetadata": true,
|
||||
"types": [
|
||||
"reflect-metadata"
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
+ `gulpfile.js` 文件
|
||||
|
||||
该文件是 Gulp 自动化工具的配置文件。利用 Gulp 来自动化处理有关编译、打包及SourceMap相关工作。在上面的`package.json`文件中包含了对 `gulp`、`gulp-typescript`的依赖，其中`gulp-typescript`就是 Gulp中的 TypeScript编译器。
|
||||
|
||||
```javascript
|
||||
var gulp = require('gulp');
|
||||
var ts = require('gulp-typescript');
|
||||
|
||||
var tsProject = ts.createProject('tsconfig.json');
|
||||
|
||||
let paths = {
|
||||
pages: ["src/*.html"]
|
||||
};
|
||||
|
||||
gulp.task("copy-html", ()=>{
|
||||
return gulp.src(paths.pages)
|
||||
.pipe(gulp.dest("dist"))
|
||||
});
|
||||
|
||||
gulp.task('tsc', () => {
|
||||
return gulp.src('src/*.ts')
|
||||
.pipe(tsProject())
|
||||
.pipe(gulp.dest('dist'));
|
||||
});
|
||||
|
||||
// 这里 watch 里必须使用 gulp.series
|
||||
gulp.task('watch', () => {
|
||||
gulp.watch('src/*.ts', gulp.series('tsc'));
|
||||
});
|
||||
|
||||
|
||||
// 这里必须要有一个 default 任务
|
||||
gulp.task('default', gulp.series('copy-html', 'tsc', 'watch'));
|
||||
```
|
||||
|
||||
有了这三个文件，就意味着环境建立起来了，可以开始TypeScript代码的编写了。`src`目录下的所有`.ts`代码，都将被编译到 `dist`目录下。
|
||||
@ -2,7 +2,7 @@
|
||||
# 入门
|
||||
|
||||
|
||||
[TypeScript手册](README.md)
|
||||
[TypeScript手册](../README.md)
|
||||
- [tsconfig.json](00_tsconfig-json.md)
|
||||
- [基本数据类型](01_basic_data_types.md)
|
||||
- [变量声明](02_variables_declaration.md)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user