中文代码示例之5分钟入门TypeScript
Typescript官方文档起的这个噱头名字: TypeScript in 5 minutes, 虽然光看完文章就不止5分钟...走完整个文档流水账如下(代码编辑器用的是VS Code)
源码在: program-in-chinese/typescript_in_5_min_zh
第一个TypeScript程序
function 问好(那谁) {
return "吃了么, " + 那谁;
}
let 路人 = "打酱油的";
document.body.innerHTML = 问好(路人);
运行
tsc 问好.ts
编译生成"问好.js"文件.
添加参数类型
function 问好(那谁: string) {
return "吃了么, " + 那谁;
}
如果'那谁'的类型不符, 比如是数组类型[0,1,2], 编译时会报错, 挺好:
问好.ts(7,30): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
添加接口
interface 人 {
姓: string;
名: string;
}
function 问好(那谁: 人) {
return "吃了么, " + 那谁.姓 + 那谁.名;
}
let 路人 = {姓: "大", 名: "黄"};
这里路人的"形状"符合"人", 类型就被判定为相符.
自己误写成了:
function 问好(那谁: 人) {
return "吃了么, " + 人.姓 + 人.名;
}
编译提示'人'是个类型而不是值, 挺好:
问好.ts(7,20): error TS2693: '人' only refers to a type, but is being used as a value here.
添加类
class 学生 {
全名: string;
constructor(public 姓: string, public 名: string) {
this.全名 = 姓 + 名;
}
}
interface 人 {
姓: string;
名: string;
}
function 问好(那谁: 人) {
return "吃了么, " + 那谁.姓 + 那谁.名;
}
let 路人 = new 学生("大", "黄");
官方文档说添加class之后编译生成的js文件与没有class的相同, 这里不解, 实验结果是不同的.
运行第一个网络应用
为了检验js文件, 添加HTML文件:
<!DOCTYPE html>
<html>
<head><title>TypeScript你好</title></head>
<body>
<script src="问好.js"></script>
</body>
</html>
最后一个插曲:
html文件在Chrome中打开显示正确:
吃了么, 大黄
但在火狐(Firefox)浏览器中打开时报错:
The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.
%E9%97%AE%E5%A5%BD.html
将View->TextEncoding从Western改为Unicode后显示正确.
后感:
tsc编译好慢!
TypeScript代码看起来更好理解一点, 编译期的反馈信息对于减少错误很有用.
中文代码示例之5分钟入门TypeScript的更多相关文章
- 2018-06-21 中文代码示例视频演示Python入门教程第五章 数据结构
知乎原链 续前作: 中文代码示例视频演示Python入门教程第四章 控制流 对应在线文档: 5. Data Structures 这一章起初还是采取了尽量与原例程相近的汉化方式, 但有些语义较偏(如T ...
- 2018-06-20 中文代码示例视频演示Python入门教程第四章 控制流
知乎原链 续前作: 中文代码示例视频演示Python入门教程第三章 简介Python 对应在线文档: 4. More Control Flow Tools 录制中出了不少岔子. 另外, 输入法确实是一 ...
- 2018-06-20 中文代码示例视频演示Python入门教程第三章 简介Python
知乎原链 Python 3.6.5官方入门教程中示例代码汉化后演示 对应在线文档: 3. An Informal Introduction to Python 不知如何合集, 请指教. 中文代码示例P ...
- 2017-10-31 中文代码示例教程之Vuejs入门&后续计划
"中文编程"知乎专栏原链 为了检验中文命名在主流框架中的支持程度, 这里把vuejs官方入门教程第一部分的示例代码中尽量使用了中文命名. 过程中有一些发现, 初步看来Vuejs对中 ...
- 中文代码示例之Angular入门教程尝试
原址: https://zhuanlan.zhihu.com/p/30853705 原文: 中文代码示例教程之Angular尝试 为了检验中文命名在Angular中的支持程度, 把Angular官方入 ...
- 2017-11-07 中文代码示例之Angular入门教程尝试
"中文编程"知乎专栏原址 原文: 中文代码示例教程之Angular尝试 为了检验中文命名在Angular中的支持程度, 把Angular官方入门教程的示例代码中尽量使用了中文命名. ...
- 中文代码示例之Vuejs入门教程(一)
原址: https://zhuanlan.zhihu.com/p/30917346 为了检验中文命名在主流框架中的支持程度, 在vuejs官方入门教程第一部分的示例代码中尽量使用了中文命名. 所有演示 ...
- 2017-11-09 中文代码示例之Vuejs入门教程(一)
"中文编程"知乎专栏原链 为了检验中文命名在主流框架中的支持程度, 在vuejs官方入门教程第一部分的示例代码中尽量使用了中文命名. 所有演示都在本地测试通过, 源码在这里. 下面 ...
- 2018-08-11 中文代码示例之Spring Boot 2.0.3问好
上次试用Spring Boot还是两年前: 中文代码示例之Spring Boot 1.3.3演示. 打算用在一个讨论组内小项目上, 于是从官网Building an Application with ...
随机推荐
- 关于JVM的垃圾回收(GC) 这可能是你想了解的
目录 1 JVM中Java对象的分类 2 JVM的GC类型及触发条件 2.1 Young GC 2.2 Full GC 3 Java对象生成时的内存申请过程 3 Oracle JDK中的垃圾收集器 3 ...
- SpringBoot从零单排 ------初级入门篇
有人说SSM已死,未来是SpringBoot和SpringCloud的天下,这个观点可能有点极端,但不可否认的是已经越来越多的公司开始使用SpringBoot.所以我将平时学习SpringBoot的内 ...
- java基础(八)-----深入解析java四种访问权限
Java中的访问权限理解起来不难,但完全掌握却不容易,特别是4种访问权限并不是任何时候都可以使用.下面整理一下,在什么情况下,有哪些访问权限可以允许选择. 一.访问权限简介 访问权限控制: 指的是本类 ...
- Unity 捏脸整理及基于骨骼的捏脸功能实现
目前实现捏脸功能的方式主要有两种.一个是Blendshape(融合变形),一个是基于骨骼驱动的方式,通过修改骨骼矩阵(bindpose)来影响SkinMesh.这两种方式的最终原理都是在shader ...
- 基础测试jmeter5.0+badboy（从小白到入门）
1]测试工具jmeter环境安装 1.1]安装jdk环境 1:必须安装jdk8.0(我尝试安装最新版本不行,好像当时没有配置好.之后安装8.0遍可以正常运行)下载地址:单击此段 配置jdk环境:鼠标右 ...
- 教程：关于如何通过Maven仓库安装Spire系列的 Java产品
Spire系列库中已发布的Java产品目前有三个,即Spire.PDF for Java.Spire.Presentation for Java.Spire.Barcode for Java.使用该J ...
- Java虚拟机三：OutOfMemoryError异常分析
根据Java虚拟机规范,虚拟机内存中除过程序计数器之外的运行时数据区域都会发生OutOfMemoryError(OOM),本文将通过实际例子验证分析各个数据区域OOM的情况.为了更贴近生产,本次所有例 ...
- cmd 配置dchp服务器
1.安装DHCP服务器角色,这样在netsh下才会有dhcp上下文 2.编写配置dhcp的脚本 从命令行运行netsh有两种语法: 比如要获取已经配置的网络接口列表 1.写全 netsh -r Rem ...
- 【Teradata SQL】一个字段为空即取另外一个字段（连续取4个字段）-case when
目标:如果col1为空则取col2的值,如果col2也为空则取col3的值,如果col3还为则取col4的值,如果四个字段均为空则取默认值 1.数据准备 create multiset table t ...
- REST API disable / enable service auto start by API
how to disable service auto start by API as the following how to enable service auto start by API as ...