Typescript基础知识点总结

Typescript

• Typescript是javascript的一个超集，主要提供了类型系统和对ES6的支持

为何选择Typescript

• typescript增加了代码的可读性和可维护性
• typescript非常包容 (编译报错的时候，js里依然会有结果)
• typescript拥有活跃的社区

如何使用typescript

• 全局安装命令 npm install -g typescript （如果报错可以在前面加上sudo，并使用cnpm）
• 编译文件 tsc hello.ts
• 约定文件以.ts为后缀,编写react时，以.tsx为后缀
• 主流IDE中都支持TS，包括代码不全、接口提示、跳转定义、重构

Typescript 原始数据类型

• string number boolean null undefined enum symbol
• 空值一般采用void来表示 void可以表示变量，也可以表示函数返回值

Typescript中的任意值

• 任意值（any）用来表示允许赋值为任意类型
• 声明一个标亮为任意值之后，对它的任何操作，返回内容的类型都是任意值
• 变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型

var num:any = 1; // 任意类型的值
num = true;
num = "3";

var num2; // 没有赋值操作，就会被认为任意值类型  等价于 var num2:any;
num2 = 1;
num2 = "123";

var b = 1; // 给变量赋值初始值的时候，如果没有指定类型，根据初始值倒推类型
// b = "2" //报错

var c; // 没有给c赋初始值，就会被推断为任意类型

Typescript中的类型推论

• typescript会依照类型推论的规则推断出一个类型
• 如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成any类型而完全不被类型检查

Typescript联合类型

• 联合类型表示取值可以为多种类型中的一种
• 如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成any类型而完全不被类型检测
• 只能访问此联合类型内的所有类型里共有的属性或者方法

// 联合类型
var muchtype:string|number = "hello";
muchtype = 10;
console.log(muchtype.toString()); // string和number都有的属性或方法 才可以被调用

Typescript中对象类型-接口

• 可描述类的一部分抽象行为，也可描述对象的结构形状
• 接口一般首字母大写，有的编程语言上面建议接口的名字加上 I 前缀
• 赋值的时候，变量的形状必须要跟接口的形状保持一致
• 接口中可定义可选属性、只读属性、任意属性

// 定义接口 强约束
interface Istate {
   
    name:string,
    age:number
}
var obj1:Istate;
obj1 = {
   
    name: 'zhangsan',
    age: 18
}
// 可选属性 在属性后面加一个 ?
interface Istate2 {
   
    name:string,
    age?:number // 存疑 可有可无
}
var obj2:Istate2;
obj2 = {
   
    name: 'zhangsan',
    age: 18
}
obj2 = {
   
    name: 'lisi'
}
// 属性个数不确定的时候 any必须是任意类型
interface Istate3 {
   
    name:string|number,
    age?:number,
    [propName:string]:any // 必须是any 不然可能跟上面的冲突
}
var obj3:Istate3 =