typescript学习记录

typescript基础

• 数据类型

1. null undefined是所有数据类型的子类型

// 这样不会报错
 let num:number = undefined
 let str:string = null

• 任意值 any

  // 在任意值上访问任何属性都是允许的 也允许调用任何方法
 let person:any = 'xiaoming'
console.log(person.myName)
person.sing()

• 类型推论
  typescript会在没有明确的指定出一个类型时推测出一个数据类型
• 联合类型
  联合类型表示取值可以为多种类型中的一种

let myFavoriteNumber:string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7

• 对象的类型-- 接口
  在TypeScript里，我们使用接口来定义对象的类型
  接口一般建议首字符大写，有的编程语言建议首字符为I。

// 1.定义的变量比接口少一些属性是不允许的 多一些属性也是不允许的
interface IPerson {
    sex:string;
    age:number;
  }
  let zhangsan:IPerson = {
    sex: 'boy'
  }

// 报错
// Property 'age' is missing in type '{ sex: string; }' but required in type  
// 'IPerson'.ts(2741)
// 可见，赋值的时候，变量的形状必须和接口的形状保持一致。
          
// 2.可选属性 有些属性可以不存在
interface IPersonPro {
    sex:string;
    number?:number;
}
let lisi:IPersonPro = {
    sex:'hhh',
}

// 3. 任意属性：有时候我们希望一个接口有任意的属性 可以使用如下方式
interface IPersonRandom {
    sex:string;
    age?:number;
    [propName:string]:any;
}
let tom:IPersonRandom = {
    sex:'boy',
    age:18,
    face:'cool'
}
//  需要注意的是，一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集：
// 将上面代码的任意属性的类型由any改为string会报错 
// 原因是可选属性的类型为number不是任意属性类型string的子集 
interface IPersonRandom {
    sex:string;
    age?:number;
    [propName:string]:string;
}
let tom:IPersonRandom = {
    sex:'boy',
    age:18,
    face:'cool'
}
// 报错 Property 'age' of type 'number' is not assignable to string index type 'string'.ts(2411)
// 4.只读属性
// 有时候我们希望对象中的一些字段只能在创建的时候被赋值，那么可以用 readonly 定义只读属性：
interface IPersonOnlyRead {
    readonly name:string;
}
let wangwu:IPersonOnlyRead = {
    name: 'wangwu'
}

• 数组的类型
• 函数的类型
• 类型断言
  可以手动指定一个值的类型
  语法

值 as 类型
或<类型> 值
在tsx语法中必须使用前者

进阶语法

1. 类型别名 字符串字面量类型

// 类型别名
type Name = string;
type NameResolver = () => string;
type NameOrNameResolver = Name | NameResolver
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}
// 字符串字面量类型
type EventNames = 'click' | 'scroll' | 'mousemove';
function handleEvent(ele: Element, event: EventNames) {
    // do something
}

handleEvent(document.getElementById('hello'), 'scroll');  // 没问题
handleEvent(document.getElementById('world'), 'dblclick'); // 报错，event 不能为 'dblclick'