1 TypeScript 环境搭建
1 准备NodeJs环境
2 npm全局安装typeScript
npm i -g typescript
3 编写一个ts文件
4 使用tsc命令编译ts文件为js
E:\File\myNote\TypeScript>tsc hello.ts
5 使用ts-node直接运行ts文件
npm install -g ts-node
2 基本类型
基本写法
- ts文件语法存在错误也能继续编译
- ts文件可以编译为任意es版本的js文件,确保代码的兼容性,在任意浏览器都能运行
- 将js从一个动态语言变成了一个静态语言
写法一:先声明再赋值
let a: number;
a = '123';
var a;
a = '123';
写法二:声明的同时赋值
let a: number = 123;
写法三:声明的同时赋值并省略类型声明
let a = 123;
a = '123';
从写法三来看上面的写法好像都挺多余的,但是是为了应对js存在的问题:js中函数不会去考虑参数的类型和个数
function sum(a: number, b: number) {
return a + b;
}
console.log(sum(1, 2));
console.log(sum(1, '2'));;
第六行会报错了,但是仍然能够编译
类型声明
类型 | 描述 |
---|---|
number | 任意数字 |
string | 任意字符串 |
boolean | 布尔值 |
字面量 | 限制变量的值就是该字面量的值 |
any | 任意类型 |
unkown | 类型安全的any |
void | 空值或undefined |
never | 不能是任何值 |
object | 任意的js对象 |
array | 任意的js数组 |
tuple | 元素,TS新增数据类型,固定长度数组 |
enum | 枚举,TS中新增类型 |
| 联合类型
使用|来连接多个类型
let a : "123" | "456"
a = "789"
let b : number | boolean
b = "213"
均会报错
any:任意数据类型,但不建议使用
相当于对该变量关闭了TS的类型检测
let a : any;
a = 1;
a = '2';
上面的代码不会报错
在不进行类型声明的时候,变量会隐式声明为any类型
let a;
a = 1;
a = '2';
上面的代码也不会报错
unknown:未知数据类型
- unknown类型的变量在赋值的时候和any相同
- any能够赋值给任意类型的变量,而unknown不能
let a;
a = 1;
a = '2';
let b : unknown;
b = 1;
b = '2';
let c : string;
c = a;
c = b;
类型断言 as 、:告诉解析器实际类型
上面的代码添加断言后就能通过编译了:
let a;
a = 1;
a = '2';
let b : unknown;
b = 1;
b = '2';
let c : string;
c = a;
c = b as string;
c = <string> b;
let fn = function (num: number | string): void {
console.log((num as string).length)
}
fn('12345')
fn(12345)
这里需要添加断言才不会报错,但是实际运行的时候仍然会报错(下面的fn传递的实际时number),所以类型断言仅仅只是欺骗了编译器,需要慎重使用
类型断言的使用技巧:向window上添加属性
(<any>window).abc = 123
不添加断言是不允许这样做的,因为window上并没有abc这个属性
函数的类型声明
function fun() : void {
}
&交叉类型
同时拥有交叉的类型的所有属性
interface People {
name: string,
age: number
}
interface Man {
sex: number
}
const liu = function (man: People & Man) {
console.log(man)
}
liu({
name: 'liu',
age: 26,
sex: 1
})