Typescript 核心知识（二）

基础数据类型

数据类型主要有：string、boolean、number、Array、void、null、undefined、Tuple、enum、object、never、any。

Tuple元组类型： 元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。

any类型： 不清楚类型的变量指定一个类型，指定任意类型。

// 枚举类型 
enum Color {Red = 1, Green = 2, Blue = 4} 
let c: Color = Color.Green; 
// tuple类型 
let x: [string, number];    // Declare a tuple type 
x = ['hello', 10];    // OK Initialize it 
x = [10, 'hello'];    // Error Initialize it incorrectly 
// 空类型 
let unusable: void = undefined; 
// any类型 
let list: any[] = [1, true, "free"]; 
list[1] = 100;

接口

TypeScript的核心原则之一是对值所具有的结构进行类型检查, 它有时被称做“鸭式辨型法”或“结构性子类型化”。

在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约, 类可以定义为接口。

// 内联接口 
function printUserInfo(user: {age: number, name: string, sex?: string}): void {
 console.log('user', user); 
 } 
// 外联接口 
interface UserInfoObject { 
age: number,   
name: string,   
sex?: string 
} 
function printUserInfo(user: UserInfoObject): void { 
console.log('user', user); 
}

泛型的使用

软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。

// 参数和返回值类型一样，但不确定 
function getUser<T>(user: T):T { 
return user; 
} 
// 泛型接口 
interface getUserFn { 
<T>(arg: T): T; 
} 
const getMyUser:getUserFn = getUser 
// const getMyUser:<T>(arg: T) => T = getUser

泛型接口 vs 泛型类型别名 #

• 接口创建了一个新的名字，它可以在其他任意地方被调用。而类型别名并不创建新的名字，例如报错信息就不会使用别名

• 类型别名不能被 extends和 implements,这时我们应该尽量使用接口代替类型别名

• 当我们需要使用联合类型或者元组类型的时候，类型别名会更合适

类型保护

• 类型保护就是一些表达式，他们在编译的时候就能通过类型信息确保某个作用域内变量的类型

• 类型保护就是能够通过关键字判断出分支中的类型

typeof 类型保护

function double(input:string|number|boolean){if(typeof input === 'string'){  
  return input + input;
}else { 
   if(typeof input === 'number'){      
   return input*2;
    }else{ 
    return !input;
    }
 }
}

 instanceof类型保护

class Animal{
  name:string;
}class Bird extends Animal{
  swing:number
}function getName(animal:Animal){  
if(animal instanceof Bird){      
console.log(animal.swing);
  }else{      
  console.log(animal.name);
  }
}

null保护

• 如果开启了strictNullChecks选项，那么对于可能为null的变量不能调用它上面的方法和属性

function getFirstLetter(s:string|null){  //第一种方式是加上null判断
  if(s == null){    
  return '';
  }  
  //第二种处理是增加一个或的处理
  s = s || '';  
  return s.charAt(0);
}
//它并不能处理一些复杂的判断，需要加链判断运算符
function getFirstLetter2(s:string|null){    
function log(){        
console.log(s!.trim());
    }
    s = s || '';
    log();    
    return s.charAt(0);
}