2018-05-09 5分钟入门CTS-尝鲜中文版TypeScript

知乎原链

本文为中文代码示例之5分钟入门TypeScriptCTS版本. CTS作者是@htwx(github). 它实现了关键词和标准库的所有命名汉化. 本文并未使用附带的vscode相关插件(包括CTS语言插件和拼音输入插件), 与原Typescript教程类似, 只用了命令行进行编译.

过程仍旧基于Typescript官方文档: TypeScript in 5 minutes.

源码在: program-in-chinese/cts_in_5_min

第一个CTS程序

函数 问好(那谁) {
  返回 "吃了么, " + 那谁;
}

变量 路人 = "打酱油的";

文档.体.内部HTML = 问好(路人);

运行

cts 问好.ts --useUnicodeKeywords

编译生成"问好.js"文件.
添加参数类型

函数 问好(那谁: 文字) {
   返回 "吃了么, " + 那谁;
}

如果‘那谁‘的类型不符, 比如是数组类型[0,1,2], 编译时会报错, 挺好:

问好.ts(7,30): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

添加接口

接口 人 {
  姓: 文字;
  名: 文字;
}

函数 问好(那谁: 人) {
  返回 "吃了么, " + 那谁.姓 + 那谁.名;
}

变量 路人 = {姓: "大", 名: "黄"};

这里路人的"形状"符合"人", 类型就被判定为相符.

自己误写成了:

函数 问好(那谁: 人) {
  返回 "吃了么, " + 人.姓 + 人.名;
}

编译提示‘人‘是个类型而不是值, 挺好:

问好.ts(7,20): error TS2693: '人' only refers to a type, but is being used as a value here.

添加类

类别 学生 {
  全名: 文字;
  构造(公开 姓: 文字, 公开 名: 文字) {
    本体.全名 = 姓 + 名;
  }
}

接口 人 {
  姓: 文字;
  名: 文字;
}

函数 问好(那谁: 人) {
  返回 "吃了么, " + 那谁.姓 + 那谁.名;
}

变量 路人 = 新建 学生("大", "黄");

运行第一个网络应用

为了检验js文件, 添加HTML文件:

<!DOCTYPE html>
<html>
    <head><title>TypeScript你好</title></head>
    <body>
        <script src="问好.js"></script>
    </body>
</html>

html文件在Chrome中打开显示正确:

吃了么, 大黄

原文地址:https://www.cnblogs.com/program-in-chinese/p/10489763.html

时间: 2024-08-10 11:20:25

2018-05-09 5分钟入门CTS-尝鲜中文版TypeScript的相关文章

【转】正则表达式30分钟入门教程

首页 | 常用正则表达式 | 正则表达式测试工具 正则表达式30分钟入门教程 版本:v2.33 (2013-1-10) 作者:deerchao 转载请注明来源 目录 跳过目录 本文目标 如何使用本教程 正则表达式到底是什么东西? 入门 测试正则表达式 元字符 字符转义 重复 字符类 分枝条件 反义 分组 后向引用 零宽断言 负向零宽断言 注释 贪婪与懒惰 处理选项 平衡组/递归匹配 还有些什么东西没提到 联系作者 网上的资源及本文参考文献 更新纪录 本文目标 30分钟内让你明白正则表达式是什么,

正则表达式30分钟入门教程 都是复制的

正则表达式30分钟入门教程 来园子之前写的一篇正则表达式教程,部分翻译自codeproject的The 30 Minute Regex Tutorial. 由于评论里有过长的URL,所以本页排版比较混乱,推荐你到原处查看,看完了如果有问题,再到这里来提出. 一些要说的话: 如果你没有正则表达式的基础,请跟着教程“一步步来”.请不要大概地扫两眼就说看不懂——以这种态度我写成什么样你也看不懂.当我告诉你这是“30分钟入门教程”时,请不要试图在30秒内入门. 事实是,我身边有个才接触电脑,对操作都不是

正则表达式30分钟入门教程(转)

来园子之前写的一篇正则表达式教程,部分翻译自codeproject的The 30 Minute Regex Tutorial. 由于评论里有过长的URL,所以本页排版比较混乱,推荐你到原处查看,看完了如果有问题,再到这里来提出. 一些要说的话: 如果你没有正则表达式的基础,请跟着教程“一步步来”.请不要大概地扫两眼就说看不懂——以这种态度我写成什么样你也看不懂.当我告诉你这是“30分钟入门教程”时,请不要试图在30秒内入门. 事实是,我身边有个才接触电脑,对操作都不是很熟练的人通过自己学习这篇教

js正则表达式30分钟入门教程

2011-10-27 13:23:15 如何使用本教程 最重要的是——请给我30分钟,如果你没有使用正则表达式的经验,请不要试图在30秒内入门——除非你是超人 :) 别被下面那些复杂的表达式吓倒,只要跟着我一步一步来,你会发现正则表达式其实并没有你 想像中的那么困难.当然,如果你看完了这篇教程之后,发现自己明白了很多,却又几乎什么都记不得,那也是很正常的——我认为,没接触过正则表达式的人在看 完这篇教程后,能把提到过的语法记住80以上的可能性为零.这里只是让你明白基本的原理,以后你还需要多练习,

正则表达式30分钟入门

来源:http://deerchao.net/tutorials/regex/regex.htm#lookaround 正则表达式30分钟入门教程 版本:v2.33 (2013-1-10) 作者:deerchao 转载请注明来源 目录 跳过目录 本文目标 如何使用本教程 正则表达式到底是什么东西? 入门 测试正则表达式 元字符 字符转义 重复 字符类 分枝条件 反义 分组 后向引用 零宽断言 负向零宽断言 注释 贪婪与懒惰 处理选项 平衡组/递归匹配 还有些什么东西没提到 联系作者 网上的资源及

正则表达式30分钟入门教程 ——堪称网上能找到的最好的正则式入门教程

本教程堪称网上能找到的最好正则表达式入门教程 原地址:http://www.jb51.net/tools/zhengze.html 本文目标 30分钟内让你明白正则表达式是什么,并对它有一些基本的了解,让你可以在自己的程序或网页里使用它. 如何使用本教程 最重要的是——请给我30分钟,如果你没有使用正则表达式的经验,请不要试图在30秒内入门——除非你是超人 :) 别被下面那些复杂的表达式吓倒,只要跟着我一步一步来,你会发现正则表达式其实并没有想像中的那么困难.当然,如果你看完了这篇教程之后,发现

转:正则表达式30分钟入门教程

来园子之前写的一篇正则表达式教程,部分翻译自codeproject的The 30 Minute Regex Tutorial. 由于评论里有过长的URL,所以本页排版比较混乱,推荐你到原处查看,看完了如果有问题,再到这里来提出. 一些要说的话: 如果你没有正则表达式的基础,请跟着教程“一步步来”.请不要大概地扫两眼就说看不懂——以这种态度我写成什么样你也看不懂.当我告诉你这是“30分钟入门教程”时,请不要试图在30秒内入门. 事实是,我身边有个才接触电脑,对操作都不是很熟练的人通过自己学习这篇教

10分钟入门opengl投影变换推导(内含mathjax公式)

*/ pre code { display: block; padding: 0.5em; color: #333; background: #f8f8ff } pre .comment, pre .template_comment, pre .diff .header, pre .javadoc { color: #998; font-style: italic } pre .keyword, pre .css .rule .keyword, pre .winutils, pre .javas

Angular2的五分钟入门在Windows下的实现

Angular2的五分钟入门在Windows下的实现 官网提供的是在linux的步骤,而实际直接拿这些步骤在windows下也可以实现,但唯一就是无法 --watch TypeScript文件,那就是扯蛋,改一下代码就要重新编译,谁受得了. 那么我来尝试一下直接使用Gulp来搭建. 一.创建项目 虽然Angular2允许我们使用TypeScript.Dart.ES5.ES6来写代码,但是出于Angular2也拥抱TypeScript,那么变成我们唯一最好的选择也是TypeScript. 首先创建