TS（一）环境搭建与基本类型

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