TypeScript快速入门

TypeScript快速入门

Vue3完全拥抱ts，学习与掌握ts已是燃眉之急！

1、TypeScript编译器的安装

node和typescript版本对应关系如下

https://blog.csdn.net/zsh501736479/article/details/128489424

因为我电脑的node版本是v10.12.0所以使用npm安装typescript时要指定版本，如

npm install [email protected] -g

验证安装是否成功，终端命令行输入tsc即可，如

laizhenghua@laizhenhuadeAir bin % tsc
Version 4.1.2
Syntax:   tsc [options] [file...]
...
# 输出一些说明信息就安装成功了

如何使用tsc呢？tsc (typescript compile)的作用就是将.ts文件编译成js文件，类似javac命令。以至于可以让node或者是浏览器直接执行，例如

dist.ts

export { }
let msg: string = 'hello typescript'
console.log(msg) // hello typescript

进行编译tsc ./dist.ts后会得到dist.js文件，这个文件就可以直接用node执行，如

laizhenghua@laizhenghuadeMacBook-Air code % tsc ./dist.ts 
laizhenghua@laizhenghuadeMacBook-Air code % node ./dist.js
hello typescript

2、TypeScript数据类型

1、常见的数据类型

类型	举例	描述
number	1,123,-45	任意数字
string	‘hello’	任意字符串
boolean	true,false	布尔值
any	*	任意类型
unknown	*	类型安全的any
void	空值（undefined）	没有值或者是undefined
never	没有值	不能是任何值
object	{}	任意的js对象
array	[]	任意的js数组
tuple	[2,3]	ts新增的数据类型也就是固定长度的数组
enum	enum {A, B}	枚举，ts新增的数据类型

2、类型申明写法

// 1.先申明再赋值
let a: number = 1;
// 2.声明和赋值同时进行(ts中也有变量类型自动推断，推断出来后这个变量只能该类型的值)
let b = '123';
// b = 1 会报错

// 3.字面量或常量的申明
let a: 10;
a = 10; // 可以赋值
a = 11; // 报错

// 4.可以使用 | 来连接多个类型（联合类型）
let b: 10 | 11; 
b = 10; // 可以赋值
b = 11; // 可以赋值

// 5.函数返回值
function sum(a: number, b: number): number {
    return a + b;
}
// 6.对变量关闭类型检测（回归原始js）
let key: any; // 也可以写成 let key; 隐式声明any
key = 1;
key = true;
key = 'abc'

// 7.unknown类型也可以关闭类型检测
let key: unknown;
key = 1;
key = true;
key = 'abc'

// 8.unknown实际上就是一个类型安全的any 不能直接赋值给其他变量
let primary: string;
primary = key; // 报错 不能直接赋值给其他变量

// 9.类型断言
let primary: string;
primary = key as string; // 告诉解析器就是一个string
// primary =  key;

// 10.对象写法
let d1: {name: string};
// 强制要求对象的 key-value 结构保持一致
d1 = {name: 'alex'};
// d1 = {name: 'alex', age: 12} 报错
let d2: {name: string, age ? : number}; // ? 表示age属性是可选的有没有都可以
d2 = {name: 'alex'};

// 任意属性写法
let d3: {name: string, [propName: string]: any};

// 11.函数变量写法
let fn: (a: number, b: number) => number;

fn = function(a: number, b: number): number {
    return a + b;
}

// 12.数组变量写法（ts中要求数组中元素类型必须保持一致）
let list: string[];
list = ['1', '2'];
let dic: Array<string>;
dic = list;

// 13.元组（固定长度的数组）
let a: [string, string];
a = ['1', '2'];

3、为什么要加数据类型?消除一些安全隐患，让程序变得可控制

// js
function sum1(a, b) {
    return a + b;
}
sum1(1, "123") // 不报错，存在一些不确定的安全隐患

// ts
function sum2(a: number, b: number) {
    return a + b;
}
sum2(1, "123") // 报错信息：Argument of type 'string' is not assignable to parameter of type 'number'.

END