一、环境搭建
1TypeScript介绍
1、ts是js类型的超集，它可以编译成纯js；
2、ts可以在任何浏览器、任何计算机和任何操作系统上运行（不需要考虑兼容性问题）；
3、ts是一门由微软开发的开源的编程语言，拥有自己的特性（eg：类）。
2ts环境搭建
mac：
1、npm安装；
2、使用npm安装ts，npm install -g typescript；
获取最高权限sudo npm install -g typescript，安装指令不报错
3、启动编译工具，tsc文件名.ts
编译成为原生js，命令为：tsc xxx.ts，运行之后生成一个新的xxx.js文件
二、基本数据类型
1、boolean
// 布尔类型
let isDone:boolean = true;
// 编译后原生js：
var isDone = true;
2、string
// 字符串类型
let str:string = "abc";
// 编译后原生js：
var str = "abc";
3、number
// 数字类型(初始值可以为二进制，八进制，十进制等等)
let num:number = 10;
// 编译后原生js：
var num = 10;
4、array
// 数组类型
let arr:number[] = [1,2,3];
let arrStr:string[] = ['a','b'];
let arr2:Array<number> = [1,2,3]; // 自带Array类型
arr[0] // 可以通过数组下标访问数组
// 编译后原生js：
var arr = [1,2,3]; // 数组存的是数字类型
var arrStr = ['a','b']; // 数组存的是字符串类型
var arr2 = [1,2,3]
5、tuple
// 元祖类型
let per:[number,string]; // 数组可以保存不同类型的数据类型
per = [18，"Lucky"]; // 赋初始值,按照赋值的顺序
// 编译后原生js：
var per;
per = [18, "Lucky"];
6、enum（原生js没有此类型，枚举类型是ts对js的扩展）
// 枚举类型
enum Season{Spring，Summer，Autumn，Winter}; // 声明：创造一个枚举类型
let season:Season = Season.Spring; // 取值：访问枚举类型的值
// 可以通过代码修改里面的值
enum Season1{Spring=1，Summer，Autumn，Winter};
enum Season2{Spring=1，Summer=2，Autumn=3，Winter=4};
let season2:string = Season1[1]; // 赋值
7、any
// 任意值
let a:any = 4;
a = "abc"; // 可再赋其他类型的值
8、void 空值
9、null和undefined
let c:undefined = undefined；
// 可以把null和undefined类型的变量赋值给其他类型
10、泛型identify，不仅支持当前数据类型，同时也支持未来的数据类型。
不用any，是因为any会丢失一些信息，导致无法确定返回值类型。泛型可保证入参与返回值类型相同。
// 最初设计函数参数为String类型
function identity(age: string) {
return age
}
console.log(identity('20'))
// 业务迭代之后需要支持Number类型
function identity(age: string) {
return age
}
console.log(identity(20)
三、接口
1、接口的定义
// 定义
interface Person{
name：String；
age：number；
}
// 使用
function creatPerson(per:Person) {
console.log(per.age);
}
// 定义个变量，赋值
let perNew = {name:"Lily",age:18};
// 调用
creatPerson(perNew)
// 编译后原生js:
function creatPerson(per) {
console.log(perNew)
}
var perNew = { name: "lily", age: 18 };
creatPerson(perNew);
2、可选属性(通过问号来进行)
interface Animal{
color?: string;
size?: number;
}
function createAnimal(ani:Animal):
{color:string,size:number}{
var aniTemp = {
color: "yellow";
size: 100;
}
if (ani.color) {
aniTemp.color = ani.color;
}
if (ani.size) {
aniTemp.size = ani.size;
}
return aniTemp;
}
createAnimal({color: "red"})
四、类
1、类的定义
class Person {
// 成员
// 属性
name: string;
// 构造函数
constructor(nameNew:string) {
this.name = nameNew;
}
// 方法
info() {
return this.name；
}
}
// 实例化一个Person类的对象
let person = new Person("小明")；
// 继承 封装 多态
// 子类继承父类
class Animal{
// 可见度
public name：string；
private age: number;
protected sex: string
}
class Cat extends Animal {
}
五、函数
1、函数定义
// 原生j函数的写法：
function sum(a, b) { return a + b; };
var result = sum(1, 2);
// ts中的函数:
// 为函数定义类型
function sum(x:number, y:number):number {
return x + y;
}
// 完整的函数类型
// 函数类型有两部分组成：参数类型和函数返回值的类型
// x和y是参数的名字 number是参数的类型
// =>number指的是函数返回值的类型
let num:number = 10;
let mySum:(x:number, y:number)=>number =
function(x:number, y:number):number{
return x + y;
}
// 当函数无返回值时，使用void关键字
function test(a:string):void{
}
2、可选形参
// 函数有两个形参b和c，其中b是可选形参
// 注意：可选形参要放在必选形参后面
function test2(c:number,b?:number):void{
console.log(c);
if (b) {
console.log(b);
}
}
test2(10);
