TypeScript简介
- TypeScript是JavaScript的超集。
- 它对JS进行了扩展,向JS中引入了类型的概念,并添加了许多新的特性。
- TS代码需要通过编译器编译为JS,然后再交由JS解析器执行。
- TS完全兼容JS,换言之,任何的JS代码都可以直接当成TS使用。
- 相较于JS而言,TS拥有了静态类型,更加严格的语法,更强大的功能;TS可以在代码执行前就完成代码的检查,减小了运行时异常的出现的几率;TS代码可以编译为任意版本的JS代码,可有效解决不同JS运行环境的兼容问题;同样的功能,TS的代码量要大于JS,但由于TS的代码结构更加清晰,变量类型更加明确,在后期代码的维护中TS却远远胜于JS。
类型声明
- 变量和函数类型声明——声明变量的同时声明类型。
语法:let 变量: 类型;
let a: string;
- 声明变量同时声明类型+赋初始值。
语法:let 变量: 类型 = 值;
let b: number = 3;
b = '';
- 声明变量时直接赋值,TS可以对变量类型进行检测。
语法:let 变量 = 值;
let c = 3;
c = true;
- & 且,合并多种类型。
语法:let 对象: 类型1 & 类型2
let obj5: {name:string} & {age:number}
obj5 = {name: '悟空', age: 10}
- 使用字面量进行类型声明,变量的值是该字面量的值。
语法:let 变量:值
语法:可以使用 | 来连接多个类型
// let d: 'e' | 'f';
let d: number | string;
d = 1;
d = 'f';
- any 表示任意类型。
一个变量设置类型为any后相当于对其关闭了TS的类型检测;
any可以赋值给任意类型的值,不安全,不建议使用;
声明变量时不赋值也不声明类型,相当于any类型。
/**一个变量设置类型为any后相当于对其关闭了TS的类型检测*/
let m : any;
m = true;
m = false;
/**any可以赋值给任意类型的值,不安全,不建议使用*/
let o: string | number;
o = m;
console.log(typeof o);
/**声明变量时不赋值也不声明类型,相当于any类型*/
let n;
n= true;
- unknown 实际上是一个类型安全的any。
unknown类型的变量,不能直接赋值给其他类型的变量;
要用if判断或者类型断言。
let un: unknown;
un = 1;
un = true;
// if判断
let o: string | number;
if ( typeof un === 'string') {
o = un;
}
- 类型断言,可以用来告诉解析器变量的实际类型。
语法: 变量 as 类型 | <类型>变量
let o: string | number;
let un: unknown;
o = un as string;
o = <string>un;
- void用来表示空。
function fn1(){
// return 1;
// return undefined;
return null;
}
let v: void;
// v = undefined;
v = fn1();
- never类型没有返回值,是任意类型的子集,可以赋值给任意类型,但不能被任意类型赋值(包括any),除了自身。例如:抛出错误
throw new Error('报错')
。
function fn2():never {
throw new Error()
}
- object 表示js对象,广义上的。
语法:{key1:类型, key2:类型},用来指定对象中包含哪些属性,key值及value的类型
let obj4: object;
obj4 = {};
obj4 = [];
obj4 = function () {};
let obj7: {name: string, age: number};
obj7 = {name: 'yan', age: 18};
- 在属性名后面加上?,表示该属性是可选的。
语法: {key1:类型, key2?:类型}
let obj2 : {name:string, age?: number};
obj2 = {name:'pig'}
-
[propName: string]: any
,表示任意个数的属性,propName可以用任意值表示。
语法: {key1:类型, [propName: string]: any}
let obj3: {name:string, [xx: string]: any}
obj3 = {name: 'a', age:12, gender: 'male'};
- TS函数中的规定参数的类型和个数,规定返回值类型。
语法:function fn(参数: 类型, 参数: 类型): 类型 {...}
function fn(a:number, b:number){
return a +b;
// return a + '';
}
fn(1, 10); // 11
fn(1, '10') // 110 这个例子说明了类型声明的重要性,没有类型校验的话,函数会返回意料外的值,并且没有错误提示。
- 设置函数结构的参数和返回值类型声明。
语法:let 变量: (a:类型, b:类型) => 类型,a、b可以是任意值形参名
let fn3: (a:number, b:number) => number;
fn3 = function (n1: number, n2: number) {
return 10;
}
- 数组的类型声明。
语法:let 变量: 类型[] | Array<类型>
let arr1: number[];
arr1 = [1, 2];
let arr2: Array<number>;
arr2 = [1, true, '2'];
- 元组: 数组长度固定,每一项数组类型固定。
语法:[类型,类型,类型]
let y: [string, number, boolean]
y = ['', 1, true]
- 枚举enum。
语法:enum 枚举类型{ 类型1 = 0, 类型2 = 1}
enum Gender{
Male = 0,
Female = 1
}
let p : {name: string, gender: 0|1 }
p = {name: '志远', gender: Gender.Male}
- 类型的别名
语法:type 别名 = 1|2|3;
type t1 = 1|2|3;
let aa : 1|2|3;
let bb: 1|2|3;
let cc: t1;
cc = 1;