2023-03-28 17:09:22 +08:00
<!DOCTYPE HTML>
2023-03-28 21:49:09 +08:00
< html lang = "zh_CN" class = "sidebar-visible no-js light" >
2023-03-29 10:24:06 +08:00
< head >
<!-- Book generated using mdBook -->
< meta charset = "UTF-8" >
< title > TypeScript手册 - Yet another Chinese TypeScript tutorial.< / 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 -->
< link rel = "stylesheet" href = "theme/pagetoc.css" >
< / head >
< body >
2023-03-28 17:09:22 +08:00
< div id = "body-container" >
2023-03-29 10:24:06 +08:00
<!-- 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 >
2023-03-28 17:09:22 +08:00
< / div >
2023-03-29 10:24:06 +08:00
< h1 class = "menu-title" > Yet another Chinese TypeScript tutorial.< / h1 >
< div class = "right-buttons" >
< a href = "https://rust-lang.xfoss.com" title = "Yet another Chinese rust-lang book"
aria-label="Yet another Chinese rust-lang book">
⚙️
< / a >
< a href = "https://java.xfoss.com" title = "Head First Java 中文版" aria-label = "Head First Java 中文版" >
☕·Head First Java 中文
< / a >
< a href = "https://ccna60d.xfoss.com" title = "CCNA in 60 days" aria-label = "CCNA 60 天" >
🖧·60 天通过 CCNA
< / a >
< a href = "https://snippets.xfoss.com" title = "代码片段与技术笔记，
aria-label="代码片段与技术笔记，
✨·代码片段与技术笔记
< / a >
< a href = "https://books.xfoss.com" title = "捐赠， aria-label = "捐赠， >
🎁·捐赠，
< / a >
< 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 > < div class = "sidetoc" > < nav class = "pagetoc" > < / nav > < / div >
< h1 id = "typescript-学习记录" > < a class = "header" href = "#typescript-学习记录" > TypeScript 学习记录< / a > < / h1 >
2023-03-28 17:09:22 +08:00
< 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 > ， < / p >
< / li >
< li >
< p > < a href = "https://java.xfoss.com" > Java 编程语言< / a > ， " Head First Java" 书中文翻译< / p >
< / li >
< li >
2023-03-28 21:43:06 +08:00
< p > < a href = "https://ccna60d.xfoss.com" > 60天通过CCNA考试< / a > ，一本基础的网络通讯书，翻译自国外经典 CCNA 60 days< / p >
2023-03-28 17:09:22 +08:00
< / li >
< / ul >
< p > 你可以在 https://github.com/gnu4cn/ts-learnings 上 fork 本项目，并提交你的修正。< / p >
< p > ECMAScript 2015 (ES6)已经正式发布， ， ， ， < / 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的规范， < / 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时， < / 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 > 类型推理， ， （ ） < / li >
< li > 可在主流浏览器尚未对ES6/ES7提供支持之前， < / li >
< li > TypeScript有着将程序向下编译到所有浏览器都支持的某个Javascript版本的能力< / li >
< li > IntelliSense提供了极好的工具支持< / li >
< / ul >
< p > 因为TypeScript带给如你一样的开发者这些不错的特性及巨大优势， ， （ < strong > TypeScript并不是ES6< / strong > ）。< / p >
< h3 id = "关于可选的静态类型" > < a class = "header" href = "#关于可选的静态类型" > 关于可选的静态类型< / a > < / h3 >
< p > 可能TypeScript最能打动人心的， ， ， ， ， ， ， < / p >
< p > 关于 IntelliSense:< / p >
< blockquote >
< p > 一种 Microsoft 技术，这种技术通过在光标悬停在函数上时显示类定义和注释，从而让您可以分析源代码。当您在 IDE 中键入函数名时， < / p >
< / blockquote >
< p > TypeScript的一大优势， ， ， ， ， ， ， < / p >
< p > TypeScript的许多优势， ， ， < / 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 > 针对新特性的详细讨论， ， ， ， < / p >
< h2 id = "环境的建立" > < a class = "header" href = "#环境的建立" > 环境的建立< / a > < / h2 >
< p > 环境的建立主要由三个文件构成：< / p >
< ul >
< li > < code > package.json< / code > -- NodeJS 的项目文件， ， ， < / 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 > 有了这三个文件， ， < code > src< / code > 目录下的所有< code > .ts< / code > 代码，都将被编译到 < code > dist< / code > 目录下。< / p >
2023-03-29 10:24:06 +08:00
< / main >
2023-03-28 17:09:22 +08:00
2023-03-29 10:24:06 +08:00
< nav class = "nav-wrapper" aria-label = "Page navigation" >
<!-- Mobile navigation buttons -->
2023-03-28 17:09:22 +08:00
2023-03-29 10:24:06 +08:00
< 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 >
2023-03-28 17:09:22 +08:00
2023-03-29 10:24:06 +08:00
< div style = "clear: both" > < / div >
2023-03-28 17:09:22 +08:00
< / nav >
2023-03-29 10:24:06 +08:00
< / div >
2023-03-28 17:09:22 +08:00
< / div >
2023-03-29 10:24:06 +08:00
< 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 >
2023-03-28 17:09:22 +08:00
2023-03-29 10:24:06 +08:00
< / 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 >
2023-03-28 17:09:22 +08:00
2023-03-29 10:24:06 +08:00
< script >
window.playground_copyable = true;
< / script >
2023-03-28 17:09:22 +08:00
2023-03-29 10:24:06 +08:00
< script src = "elasticlunr.min.js" > < / script >
< script src = "mark.min.js" > < / script >
< script src = "searcher.js" > < / script >
2023-03-28 17:09:22 +08:00
2023-03-29 10:24:06 +08:00
< script src = "clipboard.min.js" > < / script >
< script src = "highlight.js" > < / script >
< script src = "book.js" > < / script >
2023-03-28 17:09:22 +08:00
2023-03-29 10:24:06 +08:00
<!-- Custom JS scripts -->
< script src = "theme/pagetoc.js" > < / script >
2023-03-28 17:09:22 +08:00
< / div >
2023-03-29 10:24:06 +08:00
< / body >
2023-03-28 17:09:22 +08:00
< / html >
