一、介绍 TypeScript
1.TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准（ES6 教程）。
2.TypeScript 由微软开发的自由和开源的编程语言。
3.TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。
4.2012年10月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript
5.TypeScript的作者是安德斯·海尔斯伯格，C#的首席架构师。它是开源和跨平台的编程语言。
6.TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以运行在TypeScript环境中。
7.TypeScript是为大型应用的开发而设计，并且可以编译为JavaScript。
8.TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6+ 的支持，它由 Microsoft 开发，代码开源于 GitHub 上
二、为什么要学习 TypeScript？
编程语言按照数据类型大体可以分为两类，一类是静态类型语言，另一类是动态类型语言。
静态类型语言在编译时便已确定变量的类型，而动态类型语言的变量类型要到程序运行的时候，待变量被赋予某个值之后，才会具有某种类型。在 JavaScript 语言中，只有当我们对一个变量赋值时才会最终确定这个变量的数据类型，因此，JavaScript 是一门典型的动态类型语言。
动态类型的自由特性经常会导致错误，这些错误不仅会降低程序员的工作效率，而且还会由于增加新代码行，使得成本增加，最终开发陷入停顿。因为 JavaScript 无法合并类型以及编译时缺乏错误检查，因此，它不适合作为企业和大型代码库中服务器端代码。而 TypeScript 类型的定义和编译器的引入可以避免这些错误的出现。
一项研究表明，TypeScript 可以检测到所有 JavaScript 错误的 15％。在不严重破坏代码的情况下，开发人员可以更轻松地避免错误并进行代码重构。
总而言之，与 JavaScript 相比，TypeScript 代码更可靠、更容易重构。
显式类型使我们的代码可读性更高，所以我们的注意力将会更集中在系统究竟如何构建，以及系统的不同部分如何相互作用上。目前，JavaScript 已经成为了 Web 应用程序的主要开发语言，但是在大型复杂的 Web 应用系统中，JS 代码会显得杂乱无章难以梳理且调试困难，而 TypeScript 的类型定义使我们可以在大型、复杂的应用程序中，编写出更清晰的代码，源码的阅读也更容易更清晰。
同时，由于 JavaScript 是 TypeScript 的子集，因此可以在 TypeScript 代码中使用您想要的所有 JavaScript 库和代码。而且与其他语言不同，TypeScript 和 JavaScript 的语法并没有明显的区别，这就意味着你无需学习很多知识就可以开始无缝编写TypeScript 代码。
总结一下：
TypeScript 让我们的代码更可靠更清晰。 TypeScript 是 JavaScript 超集，完全兼容所有 JavaScript 语法规则。
三、TypeScript 的特点
TypeScript 主要有 3 大特点：
1.始于JavaScript，归于JavaScript TypeScript 可以编译出纯净、 简洁的 JavaScript 代码，并且可以运行在任何浏览器上、Node.js 环境中和任何支持 ECMAScript 3（或更高版本）的JavaScript 引擎中。
2.强大的类型系统 类型系统允许 JavaScript 开发者在开发 JavaScript 应用程序时使用高效的开发工具和常用操作比如静态检查和代码重构。
3.先进的 JavaScript TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件。
四、安装TypeScript
命令行运行如下命令，全局安装 TypeScript：
npm install -g typescript
安装完成后，在控制台运行如下命令，检查安装是否成功(3.x)：
tsc -V
五、第一个TypeScript程序
编写TS程序
src/helloworld.ts
function greeter (person) {
return 'Hello, ' + person
}
let user = 'Yee'
console.log(greeter(user))
手动编译代码
我们使用了 .ts 扩展名，但是这段代码仅仅是 JavaScript 而已。
在命令行上，运行 TypeScript 编译器：
tsc helloworld.ts输出结果为一个 helloworld.js 文件，它包含了和输入文件中相同的 JavsScript 代码。
在命令行上，通过 Node.js 运行这段代码：
tsc helloworld.ts控制台输出：
Hello, Yeevscode自动编译
(1) 生成配置文件tsconfig.json tsc --init (2) 修改tsconfig.json配置 "outDir": "./js", "strict": false, (3) 启动监视任务: 终端 -> 运行任务 -> 监视tsconfig.json
六、TypeScript数据类型
1.基本数据类型
Typescript对比 JavaScript 来讲是一门强类型语言，不能更改原有的类型
在js中
let a = '1';
a = 1;
console.log(a); // 10在ts中
let a = '1';
a = 1; // Type '1' is not assignable to type 'string'因为强类型语言是一种强制类型定义的语言，所以一开始 a的值 string 后面就不能赋上其它类型的值
在 TypeScript 也可以这样子来定义变量
let a: string = '1';这个叫做typeScript得原型，其他原型
let a: string = '1';
let num: number = 1;
let ifLogin: boolean = false;
// 一种特殊的类型
let anything;
anything = 1;
anything = '1';可以不对当前值做初始化，此时变量可以被赋值为任意值。等同于：
let anything:any;2.TypeScript 数组、元组、枚举
1数组
在ts中数组得原型写法
let name: Array<string> = ['a','b']
//前面的Array是name这个变量的值的类型，<>里面是数组里面的值的类型
let name: Array<string> = ['a','b']
console.log(name[0]);
//转换成 js 在浏览器打印出 console.log(name[0]) 打印出 a。
let name: Array<string> = ['a','b']
name[0] = 100;
//报错 Type ‘100’ is not assignable to type ‘string’
let name: Array<string> = ['a','b']
name[0] = '100';
name = 'a'; // 报错
name = ['100']; // 没问题
name = [100] // 报错
//因为在初始化变量 name 的时候就定义好了是 array 类型，数组里面值的类型是 string。多种初始化数组变量，定义数组变量也可以这样写：
let numbers: Array<number> = [1, 2, 3];
let numbers: number[] = [1, 2, 3];
let anyArray: any[] = [1, '2', false];2元组类型（tuple)
可以在数组里面设置多个类型值
let box: [string, number] = ['hello', 2];注意：
元组和数组看起来有点类似，但是，是有区别的
元组的长度是有限的，而且分别为每一个元素定义了类型
3枚举（enum）
enum—>组织收集一组相关变量的方式
字符串枚举
enum Color{
Black,
Yellow,
Red
}
let myColor: Color = Color.Red;
console.log(myColor); // 输出 2枚举是存的数值，而不是打印出属性Red
注意：
数字的枚举----->下标从0开始，也可以自行设置枚举成员的初始值，它们会依次递增
字符串枚举
enum SIJI {
chun = '春',
xia = '夏',
qiu = '秋',
dong = '冬'
}
console.log(SIJI.chun)//春
console.log(SIJI.xia)//夏
console.log(SIJI.qiu)//秋
console.log(SIJI.dong)//冬注意：
字符串枚举类型允许使用字符串来初始化枚举成员，可以是一个字符串字面量或者另一个字符串的枚举成员
3.变量类型
1number类型
let num1 : number = 20;
let num2 : number = 175.5;
let a1 : number = Infinity; //正无穷大
let a2 : number = -Infinity; //负无穷小
let a3 : number = NaN;
//注意：Infinity, -Infinity, NaN 也属于Number类型2undefined类型
let un : undefined = undefined;注意： undefined 类型的数据只能被赋值为 undefined
在 typescript中，已声明未初始化的值要直接访问的话，类型需要定义为undefined
3null类型
let nu : null = null;注意： null 类型只能被被赋值为null
null是一个空指针对象，undefined是未初始化的变量，所以，可以把undefined看成一个空变量，把unll看成一个空对象。
特别注意： 默认情况下，undefined 和 null 类型，是所有其它类型的子类型，也可以说成，它俩可以给所有其他类型赋值。
4.函数的相关类型
1返回值的类型
function returnVal(): string{
return 'hahaha';
}
console.log(returnVal())
//打印出hahaha
function returnVal() : string{
return 100;
}
console.log(returnVal())
//打印报错 ，类型不对2参数返回值
function box(val1,val2){
return val1+val2
}
box(1, '2'); // 输出 '12';
// 等同于
function box(val1:any, val2:any){
return val1 + val2
}
box(1, '2'); // 输出 '12';
// 可以定义类型
function box(val1:number, val2:number){
return val1 + val2
}
box(1, 2); // 输出 3
box(1, '2'); //报错3设置返回值类型
function box(val1:number, val2:number):number{
return val1 * val2
}
box(1, 2); // 输出 24String类型
//值类型
let str : string = '你好！'
//引用类型
let str1 : String = new String('你好！')5Boolean类型
let boo: boolean=true;
let boo1:boolean=false6symbol类型
let sy : symbol =Symbol('bar')注意： symbol类型的值是通过Symbol构造函数创建的。
5.函数类型
function say():viod {
console.log('hahaha');
}
function box(val1:number, val2:number){
return val1 + val2
}
let myfunc;
myfunc = say;
myfunc(); // 输出 hahaha
myfunc = box;
myfunc(5, 5); // 输出 10
//这里的 myfunc 是 viod 类型，可以存储不同的函数
function say():viod {
console.log('hahaha');
}
function box(val1:number, val2:number){
return val1 + val2
}
let myfunc: (a: number,b:number) => number; // 给函数、返回值指定类型
myfunc = say; // 报错
myfunc(); // 报错
myfunc = box;
myfunc(5, 5); // 输出 106.TypeScript对象类型和type
object
let obj = {
name: "cheng",
age: 20
};
obj = {} // 报错
// 因为初始化的时候已经给 obj 这个对象设置了属性和属性值类型
obj = {
a: 'cheng',
b: 20
} // 报错
// 因为初始化的时候已经给 obj 设置格式, 包含了 name，age 所以在 obj 里面要有 name 和 age
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
