Typescript知识点总结

---

一、Typescript是什么？

TypeScript是JavaScript类型的超集（当前我们处于ES5），它可以编译成纯JavaScript。

TypeScript给JavaScript加上可选的类型系统，给JavaScript加上静态类型后，就能将调试从运行期提前到编码期，诸如类型检查、越界检查这样的功能才能真正发挥作用。 TypeScript的开发体验远远超过以往纯JavaScript的开发体验，无需运行程序即可修复潜在bug。

TypeScript支持未来的ES6甚至ES7。在TypeScript中，可以直接使用ES6的最新特性，在编译时它会自动编译到ES3或ES5。

TypeScript可以构建大型程序，并在任何浏览器、任何计算机和任何操作系统上运行，且是开源的。

1.语言特性：

• 类型批注和编译时类型检查
• 类型推断
• 类型擦除
• 接口
• 枚举
• Mixin
• 泛型编程
• 名字空间
• 元组
• Await

2.组成部分

• 模块
• 函数
• 变量
• 语句和表达式
• 注释

3.JavaScript 与 TypeScript 的区别

• TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。
• TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

二、TS配置

安装好NodeJS后，以管理员身份运行终端，使用npm -g install ts-node typescript命令进行全局安装

如在VS Code中开发，请安装TSLint、TypeScript Hero、Bracket Pair Colorizer等插件

新建一个.ts后缀的文件，任意写一段JS代码，点击运行试试是否配置成功

例如：

//先创建一个初识TypeScript.ts文件
let name: string = "100";
console.log(name);
//执行命令tsc 初识TypeScript.ts
//当前目录生成一个 初识TypeScript.js文件
//转换的代码如下:
let name = "100";
console.log(name);

三、基础语法

1.tsc常用编译参数

序号	编译参数说明
1.	–help显示帮助信息
2.	–module载入扩展模块
3.	–target设置 ECMA 版本
4.	–declaration额外生成一个 .d.ts 扩展名的文件。tsc ts-hw.ts --declaration以上命令会生成 ts-hw.d.ts、ts-hw.js 两个文件。
5.	–removeComments删除文件的注释
6.	–out编译多个文件并合并到一个输出的文件
7.	–sourcemap生成一个 sourcemap (.map) 文件。sourcemap 是一个存储源代码与编译代码对应位置映射的信息文件。
8.	–module noImplicitAny在表达式和声明上有隐含的 any 类型时报错
9.	–watch在监视模式下运行编译器。会监视输出文件，在它们改变时重新编译。

2.保留关键字

3.空白和换行

TypeScript 会忽略程序中出现的空格、制表符和换行符。

空格、制表符通常用来缩进代码，使代码易于阅读和理解。

4. 区分大小写

TypeScript 区分大写和小写字符。

5.分号是可选的

每行指令都是一段语句，可以选择使用分号或不使用， 分号在 TypeScript 中是可选的，建议使用。

以下代码都是合法的：

console.log(“Runoob”) console.log(“Google”);

如果语句写在同一行则一定需要使用分号来分隔，否则会报错，如：

console.log(“Runoob”);console.log(“Google”);

6.TypeScript 注释

注释可以说明函数、了解程序相关信息、提高程序可读性

// 这是一个单行注释
 
/* 
 这是一个多行注释 
 这是一个多行注释 
 这是一个多行注释 
*/

四、let 和 const

不使用var，使用let或const申明变量，并加上类型说明，且作用域为块级即以{}为界

let lang: string = 'TypeScript';//如果省略类型说明，TS也可进行自动推断
lang = 1010;//error! 如果需要可以使用联合类型：let lang: number | string = 'TS';
let age: number = 89;
let age = 64;//error!


const pi: number = 3.14159;//pi以后不可改变，类似常量
pi = 3.14;//error!

五、解构

将对象、数组中的元素拆分到指定变量中，以方便使用

//解构数组
let input = [89, 64, 2018, 10];
let [first, second] = input;//注意使用[]
console.log(first); // 89
console.log(second); // 64
let [one, ...others] = input; //剩余变量
console.log(...others);
//展开
let newArr = [89, ...others, 18];
console.log(newArr);
//解构对象
let o = {
   
  a: "foo",
  b: 12,
  c: "bar"
};
let {
   a, b} = o;//注意使用{}，且变量名需与对象中道属性名一致
console.log(a, b