TypeScript入门|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第3天

1.为什么是TypeScript?

TypeScript发展历史

前端三大主流框架都支持。

TS是静态类型、弱类型语言

JS是动态类型、弱类型语言。

静态类型：编译发生在执行前；动态类型在执行的时候才会做类型匹配，编译发生在执行时。

弱类型：可以进行隐式类型转换。

• 可读性增强：基于语法解析TSDoc,ide增强
• 可维护性增强：在编译阶段暴露大部分错误=>多人合作的大型项目中，获得更好的稳定性和开发效率

JS的超集

• 包含于兼容所有Js特性，支持共存
• 支持渐进式引入与升级

编辑器推荐

• VScode

2.基本语法

通过js->ts的方式学习。

• 基础数据类型

  /* 字符串 */
  const q:string = 'string';
  /* 数字 */
  const w:number = 1;
  /* 布尔值 */
  const e:boolen = true;
  /* null */
  const r:null = null;
  /* undefined */
  const t:undefined = undefined;
  

• 数组类型

  // 字符串数组
  const strs: string[] = ['Hello World', 'Hi World']
  ​
  // 数值数组
  const nums: number[] = [1, 2, 3]
  ​
  // 布尔值数组
  const bools: boolean[] = [true, true, false]
  

• 对象（接口）

  // 定义用户对象的类型
  interface UserItem {
    name: string
    age?: number      /* ?表示可选属性 */
  }
  ​
  // 在声明变量的时候将其关联到类型上
  const petter: UserItem = {
    name: 'Petter',
    age: 20,
  }
  

• 接口调用自身属性与接口的继承

  interface UserItem {
    name: string
    age: number
    enjoyFoods: string[]
    friendList: UserItem[]    //这里接口调用自身属性
  }
  ​
  // 这里继承了 UserItem 的所有属性类型，并追加了一个权限等级属性
  interface Admin extends UserItem {
    permissionLevel: number
  }
  ​
  const admin: Admin = {
    name: 'Petter',
    age: 18,
    enjoyFoods: ['rice', 'noodle', 'pizza'],
    friendList: [
      {
        name: 'Marry',
        age: 16,
        enjoyFoods: ['pizza', 'ice cream'],
        friendList: [],
      },
      {
        name: 'Tom',
        age: 20,
        enjoyFoods: ['chicken', 'cake'],
        friendList: [],
      }
    ],
    permissionLevel: 1,
  }
  

• 类

  在 TypeScript ，通过类得到的变量，它的类型就是这个类，可能这句话看起来有点难以理解，我们来看个例子：

  // 定义一个类
  class User {
    // constructor 上的数据需要先这样定好类型
    name: string
  ​
    // 入参也要定义类型
    constructor(userName: string) {
      this.name = userName
    }
  ​
    getName() {
      console.log(this.name)
    }
  }
  ​
  // 通过 new 这个类得到的变量，它的类型就是这个类
  const petter: User = new User('Petter')
  petter.getName()  // Petter
  

  ---

  联合类型：string | number | symbol ，这其实是 TypeScript 的一个联合类型

• 函数

  // 写法一：函数声明
  function sum1(x: number, y: number): number {
    return x + y
  }
  ​
  // 写法二：函数表达式
  const sum2 = function(x: number, y: number): number {
    return x + y
  }
  ​
  // 写法三：箭头函数
  const sum3 = (x: number, y: number): number => x + y
  ​
  // 写法四：对象上的方法
  const obj = {
    sum4(x: number, y: number): number {
      return x + y
    }
  }
  ​
  // 还有很多……
  

3.如何编译为JavaScript代码

其中 tsc 是 TypeScript 用来编译文件的命令， --outDir 是它的一个选项，用来指定输出目录，如果不指定，则默认生成到源文件所在的目录下面。

tsconfig.json中是用来管理 TypeScript 在编译过程中的一些选项配置