1、TypeScript安装与编译
TS是javascript的超集，包括了ES5和ES6的语法，在使用npm命令之前电脑必须得安装node.js
安装：
npm install -g typescript
cnpm install -g typescript
yarn global add typescript
安装cnpm：
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装yarn
npm install -g yarn
测试是否安装成功：
tsc -v显示出对应的版本号即安装成功
二、Typescript开发工具vscode自动编译
1. 创建tsconfig.json文件，tsc --init生成配置文件
2. 项目文件会生成tsconfig.json文件
3. 找到文件的 "outDir": "./*", outDir设置为./js
4.然后在vscode中 终端->运行生成任务->监视tsconfig.json
5.执行后就会自动编译ts文件，生成的js文件会放在一个大的js文件夹中。
三、数据类型
ts中的数据类型共分为：
- 布尔类型（boolean）
- 数字类型（number）
- 字符串类型（string）
- 数组类型（array）
- 元祖类型（tuple）
- 枚举类型（enum）
- 任意类型（any）
- null和undefined
- void类型
- never类型
布尔类型
var flag: boolean = true;
flag = false;
console.log(flag);
数字类型
var num: number = 10;
console.log(num);
num = 11.5;
console.log(num);
字符串类型
var character: string = '这是字符串';
console.log(character);
character = '赋值字符串'
console.log(character);
数组类型
定义数组有两种方式
- 1、指定数组类型
let arr: number[] = [1, 2, 3, 4, 5]; //定义死了数组的类型就不能再去这个数组里存放非数字类型的数据元素
console.log(arr);
//let array:number[] = [1,2,3,'string']; //会出现报错情况
// 定义一个string类型的数组
let strArr: string[] = ['a', 'b', 'c'];
console.log(strArr);
- 2、使用Array<数组类型>,使用泛型去处理
let arrNum: Array<number> = [10, 11, 12, 13, 14];
console.log(arrNum);
let arrString: Array<string> = ['11', '12', '13'];
console.log(arrString);
tuple元祖类型
在typescript中，元祖类型属于数组的一种，是可以指定数组每个元素的数据类型
let arrTuple: [number, string, boolean, Array<string>] = [2, 'aa', true, ['1', '2', '3']];
console.log(arrTuple);
枚举类型
enum 枚举名 {
标识符[=整型常数],
标识符[=整型常数],
标识符[=整型常数],
}
定义state枚举
enum state {
success = 1,
error = 0,
}
使用state枚举
var suc: state = state.success;
console.log(suc);
var err: state = state.error;
console.log(err);
定义color枚举
enum color { red, green, blue, yellow }
使用color枚举
var g = color.green;
console.log(g);//不设置值的话就是默认数组元素的索引值下标
定义colors枚举
enum colors { red, blue = 5, orange }
使用colors枚举
var o = colors.orange;
console.log(o);//在设定值的后面的话，就默认从上一个值继续加1往后走，前面是5，所以打印的是6
任意类型
任意类型的用处，类似于ES5中的没有指定类型
var numAny: any = 123;
numAny = 'str';
console.log(numAny);
空类型null和undefined
- 1、undefined
var test: number;
// console.log(test); // 打印的值为undefined
// 如果需要的是未定义的undefined的话，那么就
var test2: undefined;
console.log(test2);
// 定义了但是没有赋值的情形
var test3: number | undefined;
console.log(test3);
test3 = 20;
console.log(test3);
- 2、null
var test4: null;
test4 = null;
console.log(test4);
void类型
表示没有任何类型，一般用于定义方法的时候没有返回值
function run() {
console.log('run')
}
run()
// 如果方法没有任何返回值
function run2(): void {
console.log('run2')
}
run2();
// 如果返回的是数字类型
function numfn(): number {
return 1;
}
console.log(numfn());
never类型
是其他类型（包括null和undefined）的子类型，代表从不会出现的值,一般来说，用不着
var a: never;
a = (() => {
throw new Error('错误');
})()
四、ts中的函数定义与使用
以前ES5的函数定义方法
- 第一种
function gn() {
return 'run';
}
- 第二种: 匿名函数
var gn2 = function () {
return 'run2'
}
ts的定义方法
function gn3(): number {
// 指定返回值的数据类型
return 123;
}
// 方法返回的是一个字符串
function gn4(): string {
return '1234';
}
// 方法返回的是一个数组
var gn5 = function (): Array<number> {
return [1, 2, 3];
}
console.log(gn3())
console.log(gn4())
console.log(gn5())
ts中方法传参
function gn6(name: string, age: number) {
console.log('姓名：' + name, '年龄：' + age);
}
gn6('xiaochen', 20);
var gn7 = function (addr: string, gra: string) {
console.log('地址：' + addr, '毕业院校：' + gra);
}
gn7('湖南省长沙市', '岳麓第一中学');
方法的可选参数
在ES5中方法的实参和形参可以是不一样的,但是ts中必须要一样的，给需要做可传处理的参数加上问号，标记该参数是可传，可不传的，注意可选参数必须要写在参数的最后面
function gn8(name: string, age?: number, addr?: string): string {
if (age && addr) {
return `姓名：${name},年龄：${age},地址：${addr}`
} else if (age && !addr) {
return `姓名：${name},年龄：${age}`
} else if (addr && !age) {
return `姓名：${name},地址：${addr}`
} else {
return `姓名：${name},年龄,地址均暂无`
}
}
console.log(gn8('xiaochen'))
console.log(gn8('xiaochen', 20))
console.log(gn8('xiaochen', 20, '湖南省长沙市'))
默认的参数
也被称为可选参数的另外一种形式
function gn9(name: string, age: number = 20): string {
return `姓名：${name}, 年龄：${age}`;
}
console.log(gn9('xiaochen', 30));
剩余参数
function sum(num1: number, num2: number, num3: number): number {
return num1 + num2 + num3;
}
function sum2(...numArray: number[]): number {
var sum = 0;
for (var i = 0; i < numArray.length; i++) {
sum += numArray[i]
}
return sum;
}
function sum3(num1: number, num2: number, ...numArray: number[]): number {
var sum = num1 + num2;
for (var i = 0; i < numArray.length; i++) {
sum += numArray[i]
}
return sum;
}
console.log(sum2(10, 2, 3, 4))
console.log(sum2(10, 20, 30, 14))
函数重载
通过同一个函数名提供多个函数类型定义来试下多种功能的目的
在ES5中，下面出现的同名方法会覆盖前面的那个方法
但是在ts中，可以去实现同名函数重载去处理
