1. 安装TypeScript
npm i -g typescript
2. 如何在VsCode中监视ts文件自动打包
- 2.1 第一步 tsc --init 生成tsconfig.json 改“outDir”: "./js"
- 2.2 在VsCode中找到菜单栏 - 任务 - 运行任务 监视tsConfig.json
3. typeeScript 的数据类型
typeScript中为了使编写的代码更规范,更有利于维护,增加了类型校验,在typeScript中主要为我们提供了以下几种数据类型:
- 布尔类型 boolean
- 数字类型 number
- 字符串类型 string
- 数组类型 array
- 元组类型 tuple
- 枚举类型 enum
- 任意类型 any
- null 和 undefined
- void类型
- never类型
4. 各数据类型介绍 即简单demo
4.1 boolean类型
es5的写法(正确写法) 在ts中(错误写法)
var flag = true;
flag = 456; // ts 错误
在ts中为了编写的代码更规范,更有利于维护,增加了类型校验
写ts代码必须指定类型
var flag: boolean = true;
// flag = 123; // 错误
flag = false; // 正确
4.2 数字类型 number
var num: number =123;
num = 456;
4.3 字符串类型 string
var str: string = 'this is ts';
str = 'hahha'; // right
str = true; // error
4.4 数组类型 array ts中定义数组有三种方式
// es 定义数组是: var arr = ['1', '2'];
// 第一种定义数组的方式
var arr: number[] = [11, 12, 13]; // right
var arr: number[] = [11, '12']; // error
// 第二种定义数组的方式
var arr: Array<number> = [11, 12, 13];
// 第三种定义数组的方式
var arr: any[] = [123, '12']; // right
4.5 元组类型 tuple 属于数组的一种
let arr: [number, string] = [123, 'this is ts']
元组类型可以给数组的每一项指定类型
4.6 枚举类型 enum
随着随着计算机的不断普及,程序不仅只用于数值计算,还更广泛的用于处理非数值的数据。
例如: 性别、月份、星期几、颜色、单位名称、学历、职业等。都不是数值数据。
在其他程序设计语言中,一般用一个数值来代表某一状态,这种处理方式不直观,易读性差。
如果能在程序中用自然语言中有相应含义的单词来代表某一状态,则程序就很容易阅读和理解。
也就说,实现考虑到某一变量可能取的值,尽量用自然语言中含义清楚的单词来表达他的每一个值。
这种方法称为枚举方法,用这种方法定义的类型称枚举类型、
enum 枚举名 {
标识符 [= 整形常数],
标识符 [= 整形常数]
....
}
enum Flag {
test,
success = 3,
error
}
let s: Flag = Flag.success;;
let t: Flag = Flag.test;
let e:Flag = Flag.error
console.log(s); //3 如果表示符没有赋值,它的值就是下标。
console.log(t); // 0
console.log(e);// 4
4.7 任意类型
var oBox: any = document,getElementById('box');
oBox.style.color = 'red';
4.8 null 和undefined
var num: number;
console.log(num); // 报错 虽然能输出undefined
var num: undefined
console.log(num); // undefined
var num: number | undefined;
num = 123;
console.log(num);
var num: null;
num = 3; // error
一个元素可能是number 可能是null 可能是undefined
var num: number | null | undefined;
num = 1234;
4.9 void 类型
ts中的void表示没有任何类型,