深入浅出TS | 青训营笔记

68 阅读2分钟

typescript简介

什么是typescript?

为什么要学typescript?

它和JavaScript有什么关系?

  • typescript是为解决JavaScript缺点而生的语言。
  • typescript是有静态类型检查的JavaScript

typescript环境搭建

安装node.js

安装文件下载地址:Node.js Downloads。TypeScript源码需要进行编译成js以后才能运行,Node.js则给我们提供了typescript的编译环境。

二、安装TypeScript编译工具

安装好Node.js后,打开cmd窗口/终端,输入以下命令

node -v

确保node安装完成 ,接下来则使用node中集成的npm包管理工具安装ts包 输入代码如下

 npm install -g typescript

可以通过 tsc -v 命令查看当前TypeScript版本。命令行输出为:Version 5.0.4。代表当前最新版本是:Version 5.0.4。

ts的基本语法

ts基本类型如下

  1. boolean, number, string
  2. undefined, null
  3. any, unknown, void
  4. never
  5. 数组类型口
  6. 元组类型 tuple 如何定义一个number类型的数据

ts类型注解

在 TypeScript 中,你可以使用类型注解来显式指定变量、函数参数和函数返回值的类型。这有助于编译器检查代码的正确性。

let num : number =12;

这里定义了一个作用域是let的变量num,它的类型是number,在声明的同时进行赋值,将数字12赋值给num

接口

接口是 TypeScript 中描述对象结构的一种方式。你可以使用接口来定义一个对象的类型,以确保对象具有预期的属性和方法。

interface Person {
  firstName: string;
  lastName: string;
}

function fullName(person: Person): string {
  return person.firstName + ' ' + person.lastName;
}

let Fun: Person = {
  firstName: 'Real',
  lastName: 'Fun',
};

console.log(fullName(Fun));
//输出"RealFun"

TypeScript 支持基于类的面向对象编程,包括类、继承和封装等概念。

class Animal {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  move(distance: number = 0) {
    console.log(`${this.name} moved ${distance} meters.`);
  }
}

class Dog extends Animal {
  bark() {
    console.log('旺旺汪');
  }
}

const dog = new Dog('Rex');
dog.bark();
dog.move(10);

编译成js并且执行,结果如下: 截屏2023-05-01 11.54.22.png 这里定义了一个Animal类,构造函数传入字符串类型的name变量,以及一个方法move。后面用Dog继承Animal类,并且添加新方法brak。最后进行实例化,运行这些方法。

泛型

泛型是TypeScript中实用现代代码重用的一种方式。你可以使用泛型来创造灵魂活的函数或类,这些函数或类可以处理多种类型的数据。

function identity<T>(arg: T): T {
  return arg;
}

let numIdentity: (arg: number) => number = identity;
let strIdentity: (arg: string) => string = identity;

总结

TypeScript是一种强大的、基于JavaScript的静态类型语言。它提供了静态类型检查、更好的编辑器支持和更强的编辑能力等优势。在这篇博中客中,我们简单介绍了 TypeScript 的基本概念以及如何开始使用它。希望你能对TypeScript有一个初步的认识,从而更好地利用它来编写高质量的、可维护的代码。