Typescript学习笔记

基础类型&对象类型

  //基础类型：null 、undefined 、void 、symbol 、boolean 、number 、string
  let num:number = 1;
  let str:string = 'hello';
  let count; //先声明后赋值，TS会认为any类型
  count = 1;

  //对象类型 {} 、class 、function 、[]
  let obj:{
    name:string,
    age:number
  } = {
    name:'hello',
    age:18
  }

  let arr:(number | string)[] = [1,'32',3];

  class Person{}
  const dell:Person = new Person('hello',18);

  //1. 函数类型注解写法1（这种写法返回值类型可以不写）
  const getTotal = (str: string): number => {
    return parseInt(str, 10);
  }
  //2. 函数类型注解写法2（这种写法返回值必须写类型，否则语法不对）
  const getTotal: (str: string) => number = (str) => {
    return parseInt(str, 10);
  }

类型注解&类型推断

   //type annotation 类型注解: 告诉编译器变量的类型
   let num:number = 1;
   
   //type inference 类型推断: 编译器自动推断变量的类型
   let num = 1;

   //如果TS能够自动分析出变量类型，可以不写类型注解 
    function getTotal(num1: number, num2: number): number {  //需要注解，返回值注解是为了调用的时候能知道返回的是什么类型
      return num1 + num2;
    }

    const total = getTotal(1, 2);  //不需要注解

    //返回值为空的函数返回值类型为void
    function sayHello(name: string): void {  
      console.log(`Hello, ${name}`);
    }

    //无法执行完毕的函数 返回值类型为never
    function error(message: string): never {  
      throw new Error(message);
    }
    
    //解构赋值的函数类型注解
    function add({ name, age }: { name: string; age: number }) {}

类型别名

  //type alias 类型别名
  type User = { name: string; age: number }
  const objectArr: User[] = [{ name: 'hello', age: 18 }];

  //元组 tuple 数量有限，各项类型有限的数组
  const teacherInfo:[ string, number, boolean ] = ['hello', 18, true ]

Interface接口（不会编译成js，仅做类型校验）

  //interface和类型别名类似，但是interface可以添加任意属性
  interface Person {
      name: string;   //必选属性
      age?: number;   //可选属性
      readonly sex: string; //只读属性
      [propName: string]: any;  //任意属性
  }

  const getPerson = (person: Person): void => {
      console.log(person);
  }

  const person = {
      name: 'dlcjh',
      age: 18,
      sex: '男',
      address: '中国'
  }

  getPerson(person)  //不报错，用对象接收了
  getPerson({
      name: 'dlcjh',
      address: '中国'
  })  //可能报错，直接传递对象字面量会进行强校验

  class User implements Person { //类 应用接口
      name: string;
      age: number;
      sex: string;
      address: string;
      constructor(name: string, age: number, sex: string, address: string) {
          this.name = name;
          this.age = age;
          this.sex = sex;
          this.address = address;
      }
  }

  interface Teacher extends Person { //接口继承
      teach(): void;
  }

  interface SayHi { //函数类型接口
      (word : string) : void;
  }

静态类型的深度理解

当指定静态类型的时候，被指定的变量会具备静态类型的所有属性和方法

Typescript学习笔记 ​

Typescript学习笔记