TypeScript入门-学习笔记

简介：TypeScript是一种由微软开发的支持ES6标准的编程语言,它是Angular2的开发语言。它可以编译成纯JavaScript，可以在任何浏览器，任何计算机和任何操作系统上运行，并且是开源的。本课程介绍了TypeScript的基本概念、常用语法和高级特性。

第1章 初识TypeScript

对本课程的大纲进行介绍

1-1 TypeScript-TypeScript介绍 

• 微软开发：TypeScript是微软开发的编程语言，ES6脚本语言规范
• JavaScript的超集：TypeScript扩展了JavaScript语法，任何已经存在的JavaScript程序在不加改动的情况下在TypeScript环境下运行
• 遵循ES6：TypeScript只是向JavaScript里添加了一些新的遵循ES6的语法以及基于类的面向对象编程

 

1-2 TypeScript-课程内容介绍

课程内容介绍

• 学习TypeScript的好处
• 安装TypeScript开发环境
• TypeScript概念、语法和特性介绍

前置知识

• 理解ES5，ES6，JavaScript，TypeScript的概念和关系
• 有基础的javaScript开发经验

可以理解为
JavaScript实现了ES5，TypeScript实现了ES6

 

第2章 TypeScript的优势

了解学习TypeScript有哪些好处

2-1 TypeScript-TypeScript的优势

• 支持ES6规范
• 强大的IDE支持：IDE支持的三大特点：类型检查、语法提示、重构（提高开发效率和代码质量 ）
• Angular2的开发语言

 

第3章 搭建TypeScript开发环境

教你如何使用compiler

3-1 TypeScript-在线compiler

什么是compiler？为什么需要compiler？

1. compiler是编译器，作用是把TypeScript代码转成JavaScript代码
2. ES6规范在2015年发布的，而目前所有的主流浏览器并没有完全的支持ES6规范。根据ES6规范写出来的代码并不能直接放在浏览器里运行

进入TypeScript官网，打开Playground，可以使用在线compiler开发

在线编译器：https://www.typescriptlang.org/play/index.html

 

3-2 TypeScript-本地compiler

npm --version  // 或者npm -v
npm install -g typescript    // 全局安装typescript
tsc --version  // 查看typescript版本
touch Hello.ts // 创建typescript文件
// Hello.ts 文件内容
export class Hello{
}

tsc Hello.ts           // 编译文件 多出一个文件Hello.js
npx tsc Hello.ts      // 若安装了nvm，可使用npx
// 编译后Hello.js文件内容
"use strict";
var Hello = (function () {
    function Hello() {
    }
    return Hello;
}());
exports.Hello = Hello;

安装TypeScript编译器，WebStorm IDE有语法提示，可自动编译
1、Create New Project 选择 ts
2、Project->New->Stylesheet->Hello.ts
3、内容写
export class Hello{
}
4、设置里，TypeScript->Compiler->Enable TypeScript Compiler 自动编译

 

第4章 字符串新特性

介绍TypeScript中的字符串

4-1 TypeScript-字符串新特性

1、多行字符串
传统JavaScript字符串换行需要+进行拼接
TypeScript不需要+拼接，而使用双撇号``包起来的模板字符串就可以直接换行，而不报错，被翻译成javascript时会加上换行符
看下面实例：

JavaScript：
var content = "aaa"+
　　　　　    "bbbb";

TypeScript：
var content = `aaa
　　　　　　bbb`;

2、字符串模板
字符串模板就是在多行字符串里用一个表达式插入变量或者调用方法。
普通字符串，变量等不会被解析。
提高开发速度和可读性

var myName = "zhang san";
var getName = function () {
    return "zhang san"；
}
//调用变量
console.log(`hello ${myName}`);        
//插入标签(这样看起来比JavaScript好多了)
console.log(
    `<div>
        <span>${myName}</span>
        <span>${getName}</span>
    </div>`

)
//调用方法
console.log(`hello ${getName}`);
console.log(`hello ${getName