怎么定义TypeScript呢? TypeScript是一个工具 是一个编译器

  1. 编译代码

    TypeScript,通过它的能力,默认使用tsc命令,可以根据.ts为后缀名的文件生成一个新的js文件

2、类型注解

TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式。TypeScript提供了静态的代码分析,它可以分析代码结构和提供的类型注解。

function doSth(who: string): string {
return "I want to say hello to " + who;
} let who = 'her'; const doWhat = doSth(who); console.log('doWhat:', doWhat)
// doWhat: I want say hello to her

这里插个题外话,如果部分语法产生error的话,要考虑tsconfig.json这样的配置文件(比如lib部分)是否支持了你需要的Javascript规范,如果不支持的话,建议使用polyfill

3、接口

允许我们在实现接口时候只要保证包含了接口要求的结构就可以

interface Girl {
hair: string;
face: string;
} function describe(girl: Girl): string {
let words = 'she has '
let decs = Object.entries(girl)
let len = decs.length for (let i = 0; i < len; i++) {
const [where, like] = decs[i];
words+=(like + ' ' + where)
words+=(i === len - 1 ? '' : ' and ')
}
return words
} const sentence = describe({
hair: 'long',
face: 'beautiful'
}) console.log('sentence:', sentence);
// sentence: she has long hair and beautiful face

4、类

支持基于类的面向对象编程

在构造函数的参数上使用public等同于创建了同名的成员变量

class She {
praise: string;
constructor(public hair: string, public face: string) {
// this.praise = hair + ' hair' + " and " + face + ' face';
}
} interface Girl {
hair: string;
face: string;
} function describe(girl: Girl): string {
let words = 'she has '
let decs = Object.entries(girl)
let len = decs.length for (let i = 0; i < len; i++) {
const [where, like] = decs[i];
words+=(like + ' ' + where)
words+=(i === len - 1 ? '' : ' and ')
}
return words
} const she = new She('long', 'beautiful') const sentence = describe(she) console.log('sentence', sentence);

上面这段代码通过ts编译,成为了下面这段代码

var She = /** @class */ (function () {
function She(hair, face) {
this.hair = hair;
this.face = face;
// this.praise = hair + ' hair' + " and " + face + ' face';
}
return She;
}());
function describe(girl) {
var words = 'she has ';
var decs = Object.entries(girl);
var len = decs.length;
for (var i = 0; i < len; i++) {
var _a = decs[i], where = _a[0], like = _a[1];
words += (like + ' ' + where);
words += (i === len - 1 ? '' : ' and ');
}
return words;
}
var she = new She('long', 'beautiful');
var sentence = describe(she);
console.log('sentence', sentence);

看起来,只是多了一些特殊的注释,以及修改了一些局部变量名,所以ts主要的功能其实是为了规范书写,校验传入参数是否正确,从而实现更高质量的代码!

深入理解TypeScript——第一章:上手篇的更多相关文章

  1. ASP.NET自定义控件组件开发 第一章 第二篇 接着待续

    原文:ASP.NET自定义控件组件开发 第一章 第二篇 接着待续 ASP.NET自定义控件组件开发 第一章 第二篇 接着待续 很感谢大家给我的第一篇ASP.NET控件开发的支持!在写这些之前,我也看了 ...

  2. .NET Core实战项目之CMS 第一章 入门篇-开篇及总体规划

    作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9977862.html 写在前面 千呼万唤始出来,首先,请允许我长吸一口气!真没想到一份来自28岁老程序员 ...

  3. net core体系-web应用程序-4asp.net core2.0 项目实战(CMS)-第一章 入门篇-开篇及总体规划

    .NET Core实战项目之CMS 第一章 入门篇-开篇及总体规划   原文地址:https://www.cnblogs.com/yilezhu/p/9977862.html 写在前面 千呼万唤始出来 ...

  4. 深入理解Magento - 第一章 - Magento强大的配置系统

    深入理解Magento 作者:Alan Storm翻译:zhlmmc 前言第一章 - Magento强大的配置系统第二章 - Magento请求分发与控制器第三章 - 布局,块和模板第四章 - 模型和 ...

  5. 【设计模式+原型理解】第一章:使用Javascript来巧妙实现经典的设计模式

    刚开始学习设计模式之前,我是没想说要学习设计模式的,我只是因为想学习JS中的原型prototype知识,一开始我想JS中为什么要存在原型这个东西?于是慢慢通过原型而接触到设计模式,后来发现我这个过程是 ...

  6. 徒手用Java来写个Web服务器和框架吧<第一章:NIO篇>

    因为有个不会存在大量连接的小的Web服务器需求,不至于用上重量级服务器,于是自己动手写一个服务器. 同时也提供了一个简单的Web框架.能够简单的使用了. 大体的需求包括 能够处理HTTP协议. 能够提 ...

  7. 第一章入门篇CSS样式的分类、盒模型

    1.CSS样式的分类 CSS样式分为一项4种: 1.内联样式表,直接写在元素style属性里面的样式,如 <p style="color:red;">内联样式</ ...

  8. ASP.NET自定义控件组件开发 第一章 第三篇

    原文:ASP.NET自定义控件组件开发 第一章 第三篇 第三篇:第一章的完结篇 系列文章链接: ASP.NET自定义控件组件开发 第一章 待续 ASP.NET自定义控件组件开发 第一章 第二篇 接着待 ...

  9. ASP.NET自定义控件组件开发 第一章 第三篇 第一章的完结篇

    ASP.NET自定义控件组件开发 第一章 第三篇   第三篇:第一章的完结篇 系列文章链接: ASP.NET自定义控件组件开发 第一章 待续 ASP.NET自定义控件组件开发 第一章 第二篇 接着待续 ...

随机推荐

  1. chrome浏览器截图

    1.F12 打开开发者工具台 2.ctrl + shift + p,弹出搜索框之后输入: full 3.选中Mobile-- Capture fullsize screenshot ,成功保存图片.

  2. Charles 断点修改Response

    前言: 我们可以通过map功能进行重定向,但如果同一个域名进行的是不同请求与返回.此时map在这里就不适用了. 我们可以通关对某一请求进行断点,在进行修改请求或者返回.这样就可以满足我们的需求了. 一 ...

  3. Gradle Wrapper

    Gradle Wrapper 当把本地一个项目放入到远程版本库的时候,如果这个项目是以gradle构建的,那么其他人从远程仓库拉取代码之后如果本地没有安装过gradle会无法编译运行,如果对gradl ...

  4. Python开发的入门教程(九)-列表生成式

    介绍 本文主要介绍Python中列表生成式的基本知识和使用 生成列表 要生成list [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],我们可以用range(1, 11): >&g ...

  5. js中的各种常用方法(持续更新中。。。)

    我看到常用的就写上去,如果你们有,可以在评论上发表,我再把它补充到我的随笔中 some() var ages = [3, 10, 18, 20]; function checkAdult(age) { ...

  6. Laravel Facade原理及使用

    Laravel Facade原理及使用 laravel过于庞大,加之笔者水平有限,所以后面的源码解读会按模块功能介绍,希望能帮大家稍微捋顺下思路,即使能够帮助大家回顾几个函数也好.如发现错误,还望指正 ...

  7. 使用echarts 轻松搞定各种后台数据统计

    之前接到老大一个需求,需要将公私生态系统构建一个日志系统,统计公有云.私有云还有其他工具平台(如禅道,jenkins)的用户登录信息,并使用图标的形式动态显示,之前刚入门的时候接触过echarts 这 ...

  8. qqmini

    QQ玩一玩最新调试方法 https://blog.csdn.net/zyw_java/article/details/83686645 LayaBox 接入QQ玩一玩 轻游戏流程 https://bl ...

  9. PHP to .NET Compiler

    官网 https://github.com/peachpiecompiler/peachpie 非官方简介 https://blog.csdn.net/sD7O95O/article/details/ ...

  10. 用IDEA一年了,终于敢说自己会用了

    作为Java老兵,我也是用了很多年的eclipse,为了与时俱进,于是切换到了IDEA.刚开始的时候感觉很不适应,感觉这玩意儿不如eclipse好用,影响工作效率,于是又换回eclipse. 但是很多 ...