"中文编程"知乎专栏原文

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的更多相关文章

  1. 2018-06-21 中文代码示例视频演示Python入门教程第五章 数据结构

    知乎原链 续前作: 中文代码示例视频演示Python入门教程第四章 控制流 对应在线文档: 5. Data Structures 这一章起初还是采取了尽量与原例程相近的汉化方式, 但有些语义较偏(如T ...

  2. 2018-06-20 中文代码示例视频演示Python入门教程第四章 控制流

    知乎原链 续前作: 中文代码示例视频演示Python入门教程第三章 简介Python 对应在线文档: 4. More Control Flow Tools 录制中出了不少岔子. 另外, 输入法确实是一 ...

  3. 2018-06-20 中文代码示例视频演示Python入门教程第三章 简介Python

    知乎原链 Python 3.6.5官方入门教程中示例代码汉化后演示 对应在线文档: 3. An Informal Introduction to Python 不知如何合集, 请指教. 中文代码示例P ...

  4. 2017-10-31 中文代码示例教程之Vuejs入门&后续计划

    "中文编程"知乎专栏原链 为了检验中文命名在主流框架中的支持程度, 这里把vuejs官方入门教程第一部分的示例代码中尽量使用了中文命名. 过程中有一些发现, 初步看来Vuejs对中 ...

  5. 中文代码示例之Angular入门教程尝试

    原址: https://zhuanlan.zhihu.com/p/30853705 原文: 中文代码示例教程之Angular尝试 为了检验中文命名在Angular中的支持程度, 把Angular官方入 ...

  6. 2017-11-07 中文代码示例之Angular入门教程尝试

    "中文编程"知乎专栏原址 原文: 中文代码示例教程之Angular尝试 为了检验中文命名在Angular中的支持程度, 把Angular官方入门教程的示例代码中尽量使用了中文命名. ...

  7. 中文代码示例之Vuejs入门教程(一)

    原址: https://zhuanlan.zhihu.com/p/30917346 为了检验中文命名在主流框架中的支持程度, 在vuejs官方入门教程第一部分的示例代码中尽量使用了中文命名. 所有演示 ...

  8. 2017-11-09 中文代码示例之Vuejs入门教程(一)

    "中文编程"知乎专栏原链 为了检验中文命名在主流框架中的支持程度, 在vuejs官方入门教程第一部分的示例代码中尽量使用了中文命名. 所有演示都在本地测试通过, 源码在这里. 下面 ...

  9. 2018-08-11 中文代码示例之Spring Boot 2.0.3问好

    上次试用Spring Boot还是两年前: 中文代码示例之Spring Boot 1.3.3演示. 打算用在一个讨论组内小项目上, 于是从官网Building an Application with ...

随机推荐

  1. Java语言编程 - Java历史简介

    1.1 Sun公司 介绍Java的历史之前,先介绍一下Java语言的缔造公司,Sun公司,Sun公司的全称是:Stanford University Network.值得一提的是,Sun公司从1982 ...

  2. 【ODI】| 数据ETL：从零开始使用Oracle ODI完成数据集成（一）

    0. 环境说明及软件准备 ODI(Oracle Data Integrator)是Oracle公司提供的一种数据集成工具,能高效地实现批量数据的抽取.转换和加载.ODI可以实现当今大多数的主流关系型数 ...

  3. java游戏开发杂谈 - 实现游戏主菜单

    经常玩游戏的同学,大家都知道,游戏都会有个主菜单,里面有多个菜单选项:开始游戏.游戏设置.关于游戏.退出游戏等等,这个菜单是怎么实现的呢. 有一定桌面软件开发基础的同学可能会想到,用JButton组件 ...

  4. 前端笔记之Canvas

    一.Canvas基本使用 Canvas是HTML5的画布,Canvas算是“不务正业”的面向对象大总结,将面向对象玩极致. 算法为王!就是说canvas你不会,但是算法好,不怕写业务,不怕代码量,只要 ...

  5. netcore程序部署到docker

    1.基础准备 1. ubuntu 18.04 2. docker version 18.09 3. netcore 2.1 2.简介 自从netcore支持跨平台之后,以及现在很多公司都是采用容器化部 ...

  6. Docker最全教程之使用 Visual Studio Code玩转Docker（二十）

    前言 VS Code是一个年轻的编辑器,但是确实是非常犀利.通过本篇,老司机带你使用VS Code玩转Docker——相信阅读本篇之后,无论是初学者还是老手,都可以非常方便的玩转Docker了!所谓是 ...

  7. geoserver发布mysql表数据

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.环境部署 Geoserver中并不自带mysql数据发布功能,需要下 ...

  8. 读懂 Gradle 的 DSL

    现在 Android 开发免不了要和 Gradle 打交道,所有的 Android 开发肯定都知道这么在 build.gradle 中添加依赖,或者添加配置批量打包,但是真正理解这些脚本的人恐怕很少. ...

  9. 团队DevOps实践之一

    团队DevOps实践之一 ------------------------------------------------------------------ 今天先到这儿,希望对您技术领导力, 企业 ...

  10. Chrome内核浏览器打开网页报 错误代码： ERR_TIMED_OUT

    升级win10之后如果出现chrome内核的浏览器网页总是打不开 打开很慢  而ie和edge是可以正常访问的 用这个方法可以  我弄了几天终于 搞好了我直接转载过来了近期,工程师收到大量反馈360浏 ...