TypeScript 快速上手

最新推荐文章于 2024-04-07 11:30:57 发布

写Bug的大雄

最新推荐文章于 2024-04-07 11:30:57 发布

阅读量353

点赞数

分类专栏： TypeScript 文章标签： typescript 前端

本文链接：https://blog.csdn.net/m0_64344940/article/details/121775545

版权

TypeScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

TypeScript 介绍

TypeScript是由微软开发，是一种跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码

TypeScript 安装

npm install -g typescript

TypeScript 使用

创建ts文件

  function name(str) {
    return str;
  }
  let username = "aaa"
  console.log(name(username));

创建html文件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  //不可以直接引入ts文件，需要把ts文件转化为js文件
  <script src="./js/index.js"></script>
</head>

<body>

</body>

</html>

手动编译

tsc 文件名.ts

自动编译

生成配置文件 tsconfig.json
tsc --init
运行自动编译命令
tsc -p 文件目录\tsconfig.json --watch
（tsconfig.json 中 outDir 字段可以更改生成js放置的目录）

TypeScript 常用语法

1. 类型注解

约束传入的数据类型

  let studentName: string = "小明"
  
  let age: number = 20
  
  let isNan: boolean = true
  
  let und: undefined = undefined
  
  let nul: null = null

 //undefined和null可以看做是其他类型的子类型（非严格模式下），例如
  let undStr: string = undefined
  let nulStr: string = null
  
  
  // 数组类型 定义的时候只定义类型，不定义个数
  let arr1: number[] = [1, 2, 3]
  // 这种方法为泛型的写法
  let arr2: Array<number> = [1, 2, 3]


  // 元祖类型 直接定义类型和个数
  let arr3: [number, boolean, string] = [1, true, "aaa"]
  
  
  // 枚举是对类型的补充
  enum sex {
    女,
    男
  }
  // 获取到元素的编号，默认从0开始
  console.log(sex.女);
  // 获取到元素的值
  console.log(sex[0]);


  // any 不做类型检验，当不确定类型时，可以使用
  let any01: any = 1
  let any02: any = "aaa"
  ...


  // void 表示没有返回值，经常出现在函数
  function voidFun(str: string): void {
    console.log(str);
  }
  
  
  // object 表示对象 基本类型首字母大写或者 new 基本类型首字母大写 可以说都等于对象
  function objFun(obj: object): void {
    console.log(obj);
  }
  objFun({ aaa: 'aaa' })
  objFun(new Number(1))
  objFun(Number)


  // 联合类型 参数可以是定义的类型的其中一种
  function demo(str: number | string): void {
    console.log(str);
  }
  demo(1);
  demo("aaa")
  
  
  // 类型断言 想当于告诉编译器知道当前参数是什么类型
  // 语法 <type>参数  或者  参数 as type
  function strLength(str: number | string): void {
    if ((<string>str).length) {
      console.log((str as string).length);
    } else {
      console.log(str.toString.length);
    }
  }
  strLength("aaa")
  strLength(2)

2. 接口

对象属性和方法的描述，是一种约束

  interface IPerson {
    // readonly表示该属性只读，不可更改
    readonly id: number,
    name: string,
    // ?表示该属性可有可无
    sex?: string
  }
  let person: IPerson = {
    id: 1,
    name: "aaa",
    sex: "男"
  }
  function showPerson(person) {
    console.log(person);
  }
  showPerson(person)
  //person里面加入其他字段，在showPerson()会报错，但是还是可以运行，不过建议还是通过接口约束好


  // 定义函数的参数类型和返回类型
  interface ISearch {
    (source: string, search: string): boolean
  }

  const searchBoolean: ISearch = function (source, search) {
    return source.search(search) > -1
  }
  console.log(searchBoolean("aaa", 'a'));

  interface IFly {
    fly()
  }
  interface IJump {
    jump()
  }

  // 通过 extends 继承其他的接口
  interface FlyAndIump extends IFly, IJump { }

  // 通过 implements 实现接口
  class Animal implements FlyAndIump {
    fly() {
      console.log("fly");
    }
    jump() {
      console.log("jump");
    }
  }
  const animal = new Animal()
  animal.fly();

3. 类

约束传入参数的属性、类型，包含了接口所需要的字段，所以和接口有很好的兼容性

  class Person {
    name: string
    age: number
    constructor(name: string, age: number) {
      this.name = name
      this.age = age
    }
    say() {
      console.log("哈啊哈");
    }
  }

  const person = new Person("xiaoming", 20)
  person.say()
  console.log(person);
  // 和接口的关系可查看接口部分的第二个代码块

4. 继承

类各类之间的关系

  // 被继承的类为父类（基类），继承的类为派生类（子类）
  class Person {
    name: string
    age: number
    constructor(name: string, age: number) {
      this.name = name
      this.age = age
    }
    say() {
      console.log("哈啊哈111");
    }
  }

  class Student extends Person {
    constructor(name: string, age: number) {
      super(name, age)
    }
    say() {
      super.say()
    }
  }

  let person = new Person("父", 30);
  let student = new Student("子", 20)
  student.say()

5. 多态

父类型指向子类型的对象，针对相同的方法，产生不同的结果

  class Person {
    name: string
    constructor(name: string) {
      this.name = name
    }
    say() {
      console.log(this.name);
    }
  }

  class Man extends Person {
    constructor(name: string) {
      super(name)
    }
    say() {
      super.say()
    }
  }

  class Woman extends Person {
    constructor(name: string) {
      super(name)
    }
    say() {
      super.say()
    }
  }

  let man: Person = new Man("儿子")
  let woman: Person = new Woman("女儿")
  // 运行的方法为各自类中的方法
  man.say()
  woman.say()

6. 成员修饰符

类中的属性和方法默认都是 public ，任何位置都可以访问
protected 修饰属性或者方法，外部无法访问，类中和其子类可以访问
private 修饰属性或者方法，之能在当前类中访问
readonly 修饰属性，表示该属性只读
（1）在实例化时赋值
（2）在构造函数中改变属性值

7. 存取器

对象中的成员进行访问，通过 get 和 set 进行操作

  class Person {
    name: string
    sex: string
    constructor(name: string, sex: string) {
      this.name = name
      this.sex = sex
    }
    get personInfo() {
      console.log(this.name + '-' + this.sex);
      return this.name + '-' + this.sex
    }
    set personInfo(value) {
      const info = value.split('-')
      this.name = info[0]
      this.sex = info[1]
      console.log(this.name, this.sex);
    }
  }
  const person = new Person("小明", "男")
  person.personInfo
  person.personInfo = "小红-女"

8. 静态成员

静态成员在使用时只能通过类名. 的方式调用

  class Person {
    static age: number
    constructor() {
    }
  }
  Person.age = 20
  console.log(Person.age);

9. 抽象类

抽象类可以有抽象属性和方法，也可以有实例属性和方法，抽象类不能实例化，只能给子类进行实现

  abstract class Person {
    // abstract 修饰的属性和方法不是有具体实现方法
    abstract name: string
    abstract eat()

    say() {
      console.log("haha");
    }
  }
  class Student extends Person {
    name: string;
    eat() {
      console.log("eat");
    }
  }
  const student = new Student()
  student.name = "lala"
  console.log(student);
  student.eat()
  student.say()

10. 剩余参数

放在参数的最后面，可以用在参数不确定的情况下

  function data(str: number, ...args: number[]) {
    console.log(str);
    console.log(args);
  }
  data(1, 2, 3, 4, 5)

11. 函数重载

对函数执行进行说明

  //函数重载
  function add(x: number, y: number): number
  function add(x: string, y: string): string

  function add(x: number | string, y: number | string): number | string {
    if (typeof x === "number" && typeof y === "number") {
      return x + y
    } else if (typeof x === "string" && typeof y === "string") {
      return x + y
    }
  }
  add(1, 2)
  add("1", "2")
  // 报错，不符合函数重载
  add(1, "2")

12. 泛型

定义时不能确定类型，使用时传入类型

  //单个泛型
  function arrPush<T>(value: T): T[] {
    const arr: T[] = []
    arr.push(value)
    console.log(arr);
    return arr;
  }
  arrPush<number>(1)
  arrPush<string>("1")

  //多个泛型
  function arrData<K, V>(key: K, value: V): [K, V] {
    console.log([key, value]);
    return [key, value]
  }
  arrData<string, number>("age", 10)

13. 泛型接口

  interface IBase<T> {
    data: T[]
    add(t: T): T[]
  }

  class Person {
    id: number
    name: string
    constructor(id: number, name: string) {
      this.id = id
      this.name = name
    }
  }

  class Student implements IBase<Person> {
    data: Person[] = []
    add(person: Person): Person[] {
      this.data.push(person)
      console.log(this.data);
      return this.data
    }
  }

  const student = new Student()
  student.add(new Person(1, "aaa"))

14. 泛型类

  class NumberAdd<T>{
    defaultNum: T
    add: (x: T, y: T) => T
  }
  const num = new NumberAdd<number>()
  num.defaultNum = 10
  num.add = (x: number, y: number): number => {
    console.log(x + y);
    return x + y
  }
  num.add(1, 2)

15. 泛型约束

约束泛型是否拥有某些属性和方法

  interface ILength {
    length: number,
    split(separator: string | RegExp): string[]
  }

  function strLength<T extends ILength>(value: T): void {
    console.log(value.length);
    console.log(value.split("-"));

  }
  strLength<string>("aaa-abc")

16. 声明文件

使用第三方库时，需要添加声明文件，可以获取提示等功能，同时也不会出现报错提示

//创建 名称.d.ts   名称可以任意，文件里面可以声明多个
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

//此时使用了 vue-cropper 组件
declare module 'vue-cropper'