首先官网祭天 ---> https://www.tslang.cn/
TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准。
TypeScript 由微软开发的自由和开源的编程语言。
TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。
我们使用一张图来说明TypeScript和JavaScript的关系:
使用更加简单的说法:
TypeScript = JavaScript + 类型约束 + 高级特性
TypeScript最终会编译成js来运行,所以我们需要先准备好将TypeScript编译为js的环境。
首先全局安装ts
npm install -g typescript
然后可以使用命令来验证安装是否成功了。
tsc --version
tsc ./src/xxx.ts
然后我们就可以执行对应的js文件
但是每次都使用tsc命令编译单个文件会比较麻烦,所以我们可以做一个统一配置
先使用 tsc --init
命令初始化一个 tsconfig.json
文件
里面配置如下:
{ "compilerOptions": { "target": "ESNext", "module": "ESNext", "outDir": "./dist", "skipLibCheck": true, ... } }
然后我们只需要tsc一下,所有的ts文件就能被编译了
之后我们只需要启动vscode的监听任务功能,就能自动编译了。
1.选择终端 -> 运行任务
2.选择typescript类型的任务
3.选择监视任务
string,number,boolean,symbol,null,undefined
export {}; // 第一行增加这个是为了使文件里的变量不污染全局 let num: number = 1; // number let str: string = "2"; // string let bool: boolean = true; // boolean let sy: symbol = Symbol(); // symbol let undef: undefined = undefined; // undefined let nul:null = null; // null let vd: void = undefined; // 可以把undefined类型赋值给void类型,但是反过来不行 // 函数没有返回值,那么函数的返回值类型就是void function fn(): void { return undefined; }
注意:
void只用在函数没有返回值的情形下。
undefined和null最大的价值主要体现在接口类型上,表示可缺省、未定义的属性;null表示对象或者属性是空值。这个可以先有个印象,后面说到接口会讲
单纯声明 undefined 或者 null 类型的变量是无比鸡肋的,上面的例子只是说明原始类型
如果不写类型,typescript是可以推断类型的,但注意let、const的区别
小object:代表的是非原始类型的类型,也就是不能是string,number,boolean,symbol,严格模式:多包括null,undefined
let obj1: object = 3; // 报错 let obj2: object = "3"; // 报错 let obj3: object = true; // 报错 let obj4: object = null; // 报错 let obj5: object = undefined; // 报错 let obj6: object = Symbol(); // 报错 let obj7:object = {a: 1, b: '2'}; let obj8:object = [1, 2, 3];
大Object :代表所有拥有 toString、hasOwnProperty 方法的类型,所以所有原始类型、非原始类型都可以赋给 Object,严格模式下不包括null,undefined。{}空对象类型和大 Object 一样。
let obj1: Object = 3; let obj2: Object = "3"; let obj6: Object = Symbol(); let obj3: Object = true; let obj4: Object = null; // 报错 let obj5: Object = undefined; // 报错 let obj7: Object = { a: 1, b: "2" }; let obj8: Object = [1, 2, 3];
注意: 1. 官方文档说可以使用小 object 代替大 Object,但是我们仍要明白大 Object 并不完全等价于小 object。 2. 上面的例子看起来,大Object是小object的父类型,但并不是!!!真实的情况是大Object才是小object的子类型
数组类型的定义:
let arr1: Array<number> = [1, 2, 3]; arr1.push('3'); // 报错 arr1.push(5); let arr2: string[] = ['4', '5', 'a']; arr2[3] = '6';
export {}; // 字面量类型 let num: 2 = 2; // num = 3; let str: "hello"; str = "hello"; // str = "123"; let bool: true; // bool = false;//报错 // 联合类型 a | b let num1: 2 | "3"; num1 = 2; num1 = "3"; // num1 = true;//报错 // 交叉类型 a & b let str1: string & number; let obj: { name: string } & { age: number }; obj = { name: "张三", age: 20, }; // 联合类型|要比交叉类型&优先级要低 let obj1: | ({ id: number } & { name: string }) | ({ id: string } & { age: number }); obj1 = { id: 1, name: "", }; obj1 = { id: "", age: 1, };
export {}; // any: 任意类型, 跳过类型检测 // unknown: 未知, Typescript3.0,描述类型不确定的变量,它会进行类型检测 let num: any = 1; num.toFixed(2); let num1: unknown; if (true) { num1 = 1; } // num.a=1; //报错 (num1 as {a:number}).a=3 // 类型缩小 if (typeof num1 === "number") { num1.toFixed(2); } // 类型缩小 (num1 as number).toFixed(2);//断言
never表示永远不会发生值的类型
function throwErrFn():never { throw new Error('出错了'); }
注意:
如果函数里是死循环,返回值类型也是never
never 是所有类型的子类型
TypeScript 不仅能帮助前端改变思维方式,还能强化面向接口编程的思维和能力,而这正是得益于 Interface 接口类型。
使用接口定义变量和函数参数的类型
interface PersonInfo { name: string; age: number; } // 定义变量的类型 let zhangsan: PersonInfo = { name: "张三", age: 20, }; // 定义数组的类型 interface ArrayNumber { [idx: number]: number; } let arr1: ArrayNumber = [1, 2, 3]; // 定义函数的类型 interface PersonFn { (p: PersonInfo): void; } let Person1: PersonFn = (obj)=> { console.log(obj.name, obj.age); };
注意:
很少使用接口类型来定义函数的类型,更多使用内联类型或类型别名配合箭头函数语法来定义函数类型;
多个不同接口之间是可以实现继承的,但是如果继承的接口PersonInfo和被继承的接口NameInfo有相同的属性,并且类型不兼容,那么就会报错。
interface NameInfo { name: string; } interface AgeInfo { age: number; } interface PersonInfo extends NameInfo, AgeInfo { height: number; } let zs: PersonInfo = { name: "张三", age: 20, height: 177, };
多个不同的接口可以实现继承,组合成一个新的接口,那么如果出现多个相同名字的接口会怎么样?
多个相同名字的接口,会进行合并,得到一个新的接口;这个接口的特性一般用在扩展第三方库的接口类型。
interface PersonInfo { name: string, age: number } interface PersonInfo { name: string, height: number } let zs: PersonInfo = { name: "张三", age: 20, height: 177, };
interface PersonInfo { name?: string; // 缺省 readonly height: number; // 只读 }
接口类型的一个作用是将内联类型抽离出来,从而实现类型可复用。其实,我们也可以使用类型别名接收抽离出来的内联类型实现复用。格式:type
别名名称 = 类型定义。
export {}; // type 类型名称 = 类型定义 type ArrType<V> = { [index: number]: V }; let arr: ArrType<number> = [1, 2]; type ObjType = { name?: string; age?: number }; let obj: ObjType = { name: "", age: 1, }; // 类型别名不能重名 // type ObjType // 类型别名是可以直接使用交叉类型和联合类型,接口类型不能 type Type1 = number | string | boolean; type Type2 = ArrType<number> & ObjType; // 定义函数 type FnType = (num: number, str: string) => 1; let fn: FnType = function (num, str) { return 1; }; // Required是Typescript自带的工具类型 type ReType = Required<ObjType>;
实际上,在大多数的情况下使用接口类型和类型别名的效果等价,但是在某些特定的场景下这两者还是存在很大区别。
重复定义的接口类型,它的属性会叠加,这个特性使得我们可以极其方便地对全局变量、第三方库的类型做扩展
如果我们重复定义类型别名,那么就会报错
显式指定函数参数和返回值的类型
const add = (a: number, b: number): number => { return a + b; }
或者用type来声明函数类型
type addFnType = (a: number, b:number) => number; let addFn: addFnType = (num1, num2) => { return num1 + num2; }
参数一般有:可选参数、默认参数、剩余参数;
在类型标注的:
前添加?
表示 log 函数的参数 x 就是可缺省的;
function log(msg?: string):void { console.log(msg); }
可缺省是不是相当于msg参数的类型就是和string | undefined
等价呢?这个当然不是,string | undefined
的意思是这两个类型中的一种,而可缺省是不传的意思。
function addFn1(num1: number = 1, num2: number = 2):number { return num1 + num2; }
function sum(...nums: number[]) { return nums.reduce((a, b) => a + b, 0); } sum(1, 2); // => 3 sum(1, 2, 3); // => 6