前言
typescript，即是 javascript 的超集，js并没有类型判断，很多时候代码运行后出现很多错误，仔细排查一番才会查找而出到底是哪里写错了。 ts根据这一问题应运而生？从根本上杜绝了一些代码隐患，大大降低了代码出错的概率，，而js相对来说变量声明、赋值等过于随意。从而留下隐患。js作为一门弱语言，更容易上手，当然利弊皆有。学习ts可以帮助我们更好的建立良好的编程习惯~
1.ts环境搭建
yarn add -g typescript
npm install -g typescript
// 输入 tsc -v 查看是否安装成功
image.png
2.代码尝试
- 新建 hello.ts
// hello.ts
let a: number;
a = 12;
// a = 'hello'; // Type 'string' is not assignable to type 'number'
let b: string;
b = "123";
let c: boolean = true;
c = false;
let d = false;
function sum(a: number, b: number): number {
return a + b;
}
console.log(sum(123, 456));
输入命令 tsc，编译后生成hello.js tsc -w 监听 ts 文件
// hello.js
var a;
a = 12;
// a = 'hello';
var b;
b = "123";
var c = true;
c = false;
var d = false;
function sum(a, b) {
return a + b;
}
console.log(sum(123, 456));
3.数据类型
类型1
- 字面量类型、 any、unknown、void、never、类型判断
let a = 10;
a = 10;
let b:'male' | 'female';
b = 'male';
b = 'female';
// b = '1' // Type '"1"' is not assignable to type '"male" | "female"'.
// let d; // 隐式 any 可以赋值给任意变量
let d: any;
d = 10;
d = '123';
d = true;
let e: unknown; // 实际上是一个安全的any
// 不能直接赋值给其他变量
e = 123;
e = true;
let f: string;
f = d;
// f = e
if (typeof e === 'string') f = e;
// 类型断言 告诉解析器变量的实际类型
/**
* 语法：
* 变量 as 类型
* <类型>变量
*/
f = e as 'string';
f = <string>e;
function fn(num) {
return num > 0 ? true : 123;
}
// void 表示空，以函数为例 没有返回值的函数
function fn1(num): void {}
// never 不允许返回结果
function fn2(): never {
throw new Error('报错了！')
}
类型2
- object、数组、元组、枚举、&、别名
let a: object;
a = {};
a = function () {};
/**
* {} 用来指定对象中可以包含的属性
* 语法：{属性名:属性值, 属性名: 属性值}
* 属性名后添加? 表示属性可选
*/
let b: { name: string; age?: number };
b = { name: '张三', age: 20 };
// [proopName: string]: any 表示任意类型属性
let c: { name: string; [propName: string]: any };
c = { name: '张三', gender: '男' };
let d: (a: number, b: number) => number;
// d = function (n1: string, n2 stirng): number {
// return 10
// }
/**
* 数组类型声明
* 类型[]
* Array<类型>
*/
let e: string[];
e = ['a', 'b', 'c'];
let f: Array<number>;
f = [1, 2, 3];
/**
* 元组，固定长度的数组
* 语法： [类型, 类型, 类型]
*/
let g: [string, string];
g = ['123', '123'];
/**
* 枚举
*/
enum Gender {
Male = 0,
Female = 1
}
let h: { name: string; gender: Gender };
h = {
name: '张三',
gender: Gender.Male // male
};
console.log(h.gender === Gender.Male);
// & 表示同时
let i: { name: string } & { age: number };
i = { name: '张三', age: 10 };
// 类型的别名
type myType = 1 | 2 | 3 | 4 | 5;
let j: myType;
j = 1;
j = 5;
// j = 6
