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
})