了解TypeScript | 青训营

雾绕空山丶
60 阅读7分钟

了解TypeScript

TS与JS

TypeScriptJavaScript
JavaScript的超集，用于解决大型项目的代码复杂性一种脚本语言，用于创建动态网页
强类型语言，支持静态和动态类型动态弱类型语言
可以在编译期间发现并纠正错误只能在运行时发现错误
不允许改变变量的数据类型变量可以被赋值成不同类型

​ TypeScript带来了类型安全；包含一些编译器，支持一些新版本的特性；拥有完整的工具链。TS不仅仅是一门语言，更是生产力工具。

TS基础

· 1、基础类型

数据类型关键字描述
任意类型any声明为 any 的变量可以赋予任意类型的值。
数字类型number双精度 64 位浮点值。它可以用来表示整数和分数。 注：没有整数类型
字符串类型string一个字符系列，使用单引号（'）或双引号（"）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式。
布尔类型boolean表示逻辑值：true 和 false。
数组类型无在元素类型后面加上[]，声明变量为数组。 let arr: number[] = [1, 2];
元组无元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。let x: [string, number]; x = ['Runoob', 1];
枚举enum枚举类型用于定义数值集合。 enum Color {Red, Green, Blue}; let c: Color = Color.Blue; console.log(c); // 输出 2
voidvoid用于标识方法返回值的类型，表示该方法没有返回值。
nullnull表示对象值缺失。
未定义undefined用于初始化变量为一个未定义的值
nevernevernever 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

· 2、函数类型

  1. 函数就是包裹在花括号中的代码块，前面使用了关键词 function：

    function add(x: number, y: number): any {
    return x + y;
}
console.log(add(1,2))   //结果为3
    • add是函数名
    • x: number, y: number是调用函数时，向函数传递的值，被称为参数
    • any是返回值的类型，此例子中返回值类型为any。
    • return 关键词后跟着要返回的结果。
    • 一般情况下，一个函数只有一个 return 语句，return之后的代码不再执行。
    • 返回值的类型需要与函数定义的返回类型一致。

  2. 可选参数

    在 TypeScript 函数里，如果我们定义了参数，则必须传入这些参数，除非将这些参数设置为可选，可选参数使用问号标识 ？。

    function userName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}

let result1 = buildName("Bob");  // 正确
let result2 = buildName("Bob", "Adams", "Sr.");  // 错误，参数太多了
let result3 = buildName("Bob", "Adams");  // 正确

    ​ 可选参数必须跟在必需参数后面。 上例 firstName 是必选参数，lastName 是可选参数。

  3. 重载函数

    重载是方法名字相同，而参数不同，返回类型可以相同也可以不同。每个重载的方法（或者构造函数）都必须有一个独一无二的参数类型列表。

    参数类型不同：

    function ex(string):void; 
function ex(number):void;

    参数数量不同：

    function ex(n1:number):void; 
function ex(x:number,y:number):void;

    参数类型顺序不同：

    function ex(n1:number,s1:string):void; 
function ex(s:string,n:number):void;

· 3、interface

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。

TypeScript 接口定义如下：

interface interface_name { 
}

特点：

​ · 可选属性：?

​ · 只读属性：readonly

​ · 可以描述函数类型

​ · 可以描述自定义属性

​ · 非常灵活

· 4、类class

  • 相对于JavaScript增加了一些定义：public、private、protected修饰符

    class Person{
    protected name:string
    private sex:steing
    public constructor(name:string){
        this.name = name
        this.sex = 'male'
    }
}

  • 抽象类只能被继承，不能实例化

  • 作为基类，抽象方法必须被子类实现

  • TypeScript 支持继承类，即我们可以在创建类的时候继承一个已存在的类，这个已存在的类称为父类，继承它的类称为子类。

    class child_class_name extends parent_class_name

    类继承使用关键字 extends，子类除了不能继承父类的私有成员(方法和属性)和构造函数，其他的都可以继承。

  • TypeScript 一次只能继承一个类，不支持继承多个类，但 TypeScript 支持多重继承（A 继承 B，B 继承 C）。

  • interface约束类，使用implements关键字

TS进阶

· 1、高级类型

  1. 联合类型（Union Types）通过|将变量设置多种类型，赋值时可以根据设置的类型来赋值。

只能赋值指定的类型，如果赋值其它类型就会报错。

let v = 类型1|类型2|...
  1. 交叉类型(intersection type)通过&把现有的多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性。

交叉类型&：产生一个包含所有属性的新类型。 联合类型|：产生一个包含所有类型的选择集类型。

  1. 类型断言可以用来手动指定一个值的类型，即允许变量从一种类型更改为另一种类型。

    语法格式：

    <类型>值
值 as 类型

  2. 类型别名（tpye或interface）可以给类型起别名

    · 两者都可以定义对象或函数，都允许继承。

    · type用来定义别名，interface用来定义对象。

    · type可以定义基本类型。

    · interface可以合并重复声明。

· 2、泛型

  • 泛型的语法是<>里写类型参数，一般用T表示
  • 两种方法指定类型
    • 定义要使用的类型
    • 通过TS类型推断，自动推导类型
  • 泛型的作用是临时占位，之后通过传来的类型进行推导
function print<T>(arg: T): T {
    console.log(arg)
    return arg;
}

print<string>('hello')  //定义T为string类型
print('hello')  //TS类型推断，自动推导类型为string

· 3、泛型工具类型

  • typeof获取类型
  • keyof获取所有键
  • in遍历枚举类型
  • T[K]索引访问
  • extends泛型约束
  • Partial<T>将类型属性转变为可选
  • Required<T>将类型属性转变为必选
  • Readonly<T>将类型属性主演变为只读

总结

TypeScript是JavaScript的超集，为JavaScript添加了静态类型和其他一些特性。

​ TypeScript引入了静态类型系统，可以在编译时检查类型错误，减少运行时错误的发生。这提高了代码的可靠性和可维护性，尤其在大型项目中更加有益。

​ TypeScript具有强大的IDE支持，包括代码补全、重构、类型检查等功能，可以提高开发效率和代码质量。常见的IDE如Visual Studio Code、WebStorm等都对TypeScript有很好的支持。

​ TypeScript与JavaScript的生态系统紧密结合，可以使用现有的JavaScript库和工具。此外，TypeScript拥有庞大的社区支持，可以方便地获取到各种资源和解决方案。

​ TypeScript是渐进增强的，可以逐步将JavaScript项目转换为TypeScript，而无需一次性重写整个代码库。这使得团队能够逐步采用TypeScript，并且可以在项目中选择性地使用其特性。

​ TypeScript支持类型定义文件（.d.ts），可以描述JavaScript库的类型信息。这使得在使用第三方库时，能够获得更好的类型推断和代码提示，提高代码的可读性和可维护性。

总的来说，TypeScript通过引入静态类型和其他特性，提供了更好的开发工具和语言功能，可以改善JavaScript项目的可靠性、可维护性和开发效率。尤其在大型项目和团队合作中，TypeScript的优势更加显著。然而，对于小型项目或仅需要快速原型开发的情况，JavaScript可能仍然是更合适的选择。

avatar
文章
阅读
粉丝