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 = {
    name:'wangwu',
    age:20,
    sex:'man',
    isMarry:false
}
// 只读属性 在属性前 添加readonly
interface Istate4 {
    name:string,
    readonly age:number|string
}
var obj4:Istate4 = {
    name:'maliu',
    age:11
}
obj4.name = 'lisi'
// obj4.age = 12 // 报错，只读属性不能更改

Typescript数组类型

• 可采用 类型+方括号 表示法
• 可采用数组泛型 Array 表示法
• 采用接口表示法

// 数组表示法
// 类型+方括号
var arr:number [] = [1, 2, 3];
var arr2:string [] = ['1', '2', '3'];
var arr3:any [] = [1, '2', true]

// 可采用数组泛型 Array<elemtype> 表示法
var arrType:Array<number> = [1, 2, 3];
var arrType2:Array<string> = ['1', '2', '3'];
var arrType3:Array<any> = [1, '2', true]

// 可采用接口表示法
interface IArr {
    [index:number]:number
}
var arrType4:IArr = [1, 2, 3]

interface Istate {
    userName:string,
    age:number
}
interface IArr2 {
    [index:number]:Istate
}
var arrType5:IArr2 = [
    {userName:'lisi',age:10}
]
var arrType6:Array<Istate> = [
    {userName:'lisi',age:10}
]
var arrType7:Istate[] = [
    {userName:'lisi',age:10}
]

Typescript函数类型

• 函数约束 有函数本身的参数约束、返回值约束、函数本身赋值的变量约束
• 可采用重载的方式才支持联合类型的函数关系

// 声明式类型的函数
function funcType(name:string, age:number):number {
    return age;
}
var ageNum:number = funcType('lisi',10)

// 函数参数不确定
function funcType2(name:string, age:number, sex?:string):number {
    return age
}
var ageNum2:number = funcType2('wangwu', 12, 'man')

// 函数参数默认值 直接赋值
function funcType3(name:string='lisi', age:number=20):number {
    return age
}


// 表达式类型的函数
var funcType4 = function(name:string,age:number):number {
    return age
}

var funcType5:(name:string,age:number)=>number = function(name:string,age:number):number {
    return age;
}

interface IfuncType {
    (name:string,age:number):number
}
var funcType6: IfuncType = function(name:string,age:number):number {
    return age;
}


// 对于联合类型的函数 可以采用重载的方式
// 输入是number，输出也是number；输入是string，输出也是string
function getValue(value:number):number;
function getValue(value:string):string;
function getValue(value:string|number):string|number {
    return value;
}
var a:number = getValue(1);
var b:string = getValue('1');

Typescript类型断言

• 类型断言 可以用来手动指定一个值的类型 语法 <类型>值 或者 值 as 类型，在jsx语法（react中），必须使用as
• 类型断言不是类型转换，断言成一个联合类型中不存在的类型是不允许的

// 类型断言 只能断言联合类型中存在的类型
function getAssert(name:string|number) {
    // return (<string>name).length;
    return (name as string).length;
}

Typescript类型别名

• 类型别名可以用来给一个类型起一个新名字，采用关键字type 例如type Name = string|number，Name就表示可设置字符串和树枝类型
• 也可采用type来约束取值 只能是某些字符串中的一个：如 type eveName = ‘click’|‘scroll’|‘mousemove’

// 类型别名
type strType = string|number|boolean;
var str:strType = '10';
str = 10;
str = true;

// 对于接口也可采用类型别名
interface muchType1 {
    name:string
}
interface muchType2 {
    age:number
}
type muchType = muchType1|muchType2;
var obj1:muchType = {
    name:'lisi'
}
var obj2:muchType = {
    age:10
}
var obj3:muchType = {
    name:'lisi',
    age:20
}

// 限制字符串的选择
type sex = 'man'|'woman';
function gets(s:sex):string {
    return s;
}
gets('man')

Typescript 枚举

• 枚举（enum）类型用于取值被限定在一定范围内的场景，采用关键字enum定义，例如：enum Days{Sun,Mon,Tue,Wed,Thu,Fri,Sat}
• 枚举成员会被赋值为从0开始递增的数字，同时也会被枚举值到枚举名进行反向反射

// 使用枚举可以定义一些有名字的数字常量
enum Days{
    Sun,
    Mon,
    Tue,
    Wen,
    Thu,
    Fri,
    Sat
}
console.log(Days.Sun) //0
console.log(Days.Sat) //6

Typescript类的修饰符

• public修饰的属性和方法是共有的，可以在任何地方被访问到，默认所有的属性或者方法都是public的
• private修饰的属性或者方法是私有的，不能在声明它的类外面访问
• protected修饰的属性或者方法是受保护的，它和private类似

Typescript泛型

• 泛型是指在定义函数、接口或类的时候，不预先指定具体类型，而在使用的时候再指定类型的一种特性

// 方法中使用泛型
function createArray<T>(length: number, value: T):Array<T> {
    let arr = [];
    for (var i = 0; i < length; i++) {
        arr[i] = value;
    }
    return arr;
}
let strArray: string[] = createArray<string>(3, '1');
let numArray: number[] = createArray(3, 1); // 不传的时候，会根据类型进行倒推

// 接口当中使用泛型 使用泛型可以使代码更健壮，更利于维护
interface ICreate {
    <T>(name: string, value: T): Array<T>
}
let func: ICreate;
func = function<T>(name: string, value: T):Array<T> {
    return [];
}
let strArr: string [] = func('lisi', '2')