×

Typescript语法速成

Falcon 2024-03-22 views:
摘要

正在生成中……

核心语法特征

TypeScript 是一种由微软开发的开源编程语言,它是 JavaScript 的一个超集,为这门语言添加了可选的静态类型和基于类的面向对象编程。 下面是 TypeScript 的一些核心语法特性:

  1. 类型注解:您可以在变量、函数参数和函数返回类型上添加类型注解。这有助于编译器理解您期望的数据类型,从而能在编译阶段捕获类型错误。
    let count: number = 5;
    
  2. 接口:允许您定义对象的特定形状。接口可以包含属性和函数,是定义契约的良好方式。
    interface IUser {
      name: string;
      age: number;
    }
    
  3. :TypeScript 支持基于类的面向对象编程。您可以创建类、继承和实现接口。
    class User implements IUser {
      constructor(public name: string, public age: number) { }
    }
    
  4. 泛型:使您能够编写可重用的、与类型无关的函数和类。它们提供了一种方法来确保类型的一致性。
    function identity<T>(arg: T): T {
      return arg;
    }
    
  5. 枚举:是一种帮助您处理一组有限的数值集的数据结构。
    enum Color {
      Red,
      Green,
      Blue,
    }
    
  6. 高级类型:包括联合类型、交叉类型、类型别名和类型断言等。
    type StringOrNumber = string | number;
    
  7. 模块:TypeScript 支持 ES6 模块语法,用于组织和重用代码。
    import { IUser } from "./IUser";
    
  8. 装饰器:是一种特殊类型的声明,它可以被附加到类声明、方法、访问符、属性或参数上。装饰器使用 @expression 形式,expression 求值后必须为函数,它会在运行时被调用。
    @sealed
    class Greeter {
        greeting: string;
    }
    
  9. 命名空间:是另一种组织代码的方法,可以防止命名冲突。
    namespace UserUtils {
      export function getName(user: IUser) {
        return user.name;
      }
    }
    

这些只是 TypeScript 中的一些基本概念。您可以在 TypeScript 的官方文档中找到更详细的信息和高级功能,这将帮助您更好地理解和使用这种语言。

数据类型

TypeScript 是 JavaScript 的一个超集,主要提供了类型系统和对 ES6+ 的支持。TypeScript 的数据类型为开发者提供了静态类型检查,这意味着你可以在编码的时候识别可能的错误。下面是 TypeScript 中常用的数据类型,以及相应的示例。

  1. 布尔值(Boolean): 最基础的数据类型是简单的 true/false 值,在 JavaScript 和 TypeScript 里叫做 boolean
    let isDone: boolean = false;
    
  2. 数字(Number): 和 JavaScript 一样,TypeScript 里的所有数字都是浮点数。这些浮点数的类型是 number
    let decimal: number = 6;
    let hex: number = 0xf00d;
    let binary: number = 0b1010;
    let octal: number = 0o744;
    
  3. 字符串(String): 另一种基本数据类型是文本数据类型,即 string
    let color: string = "blue";
    color = 'red';
    
  4. 数组(Array): TypeScript 像 JavaScript 一样可以操作数组元素。
    let list: number[] = [1, 2, 3];
    // 或者使用数组泛型:
    let list: Array<number> = [1, 2, 3];
    
  5. 元组(Tuple): 元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。
    let x: [string, number];
    x = ["hello", 10]; // OK
    
  6. 枚举(Enum): enum 类型是对 JavaScript 标准数据类型的一个补充。
    enum Color {Red, Green, Blue}
    let c: Color = Color.Green;
    
  7. 任意值(Any): 有时候,我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。
    let notSure: any = 4;
    notSure = "maybe a string instead";
    notSure = false; // okay, definitely a boolean
    
  8. 空值(Void): 某种程度上来说,void 类型像是与 any 类型相反,它表示没有任何类型。
    function warnUser(): void {
     alert("This is my warning message");
    }
    
  9. Null 和 Undefined: 在 TypeScript 中,undefinednull 各自有自己的类型。
    let u: undefined = undefined;
    let n: null = null;
    
  10. Never: never 类型表示的是那些永不存在的值的类型。
    function error(message: string): never {
        throw new Error(message);
    }
    
  11. 对象(Object): object 是非原始类型的数据类型。
    declare function create(o: object | null): void;
    create({ prop: 0 }); // OK
    create(null); // OK...
    

流程控制

TypeScript的流程控制关键字跟JavaScript大致相同,因为它是JavaScript的超集。这些关键字用于条件判断,循环控制等编程结构。以下是一些常用的流程控制关键字及其简要用法:

  1. if...else: 条件语句,用于基于不同条件执行不同的代码块。
    if (condition) {
      // 当条件为 true 时执行
    } else {
      // 当条件为 false 时执行
    }
    
  2. switch: 用于基于不同的情况来执行不同的分支。
    switch(expression) {
      case x:
        // 如果 expression 等于 x,执行这里的代码
        break;
      case y:
        // 如果 expression 等于 y,执行这里的代码
        break;
      default:
        // 如果没有匹配的 case,执行这里的代码
        break;
    }
    
  3. for: 循环语句,可以让你重复执行一个代码块多次。
    for (let i = 0; i < 5; i++) {
      // 这个代码块会执行五次
    }
    
  4. while: 当指定的条件为真时,循环执行代码块。
    while (condition) {
      // 如果条件为 true,则执行这里的代码
    }
    
  5. do...while: 也是循环语句,不过与 while 的不同之处在于 do...while 至少会执行一次代码块,然后再判断条件是否为真。
    do {
      // 这个代码块会先执行一次,然后如果条件为 true 会继续执行
    } while (condition);
    
  6. break: 用于终止最近的循环或者 switch 语句。
    for (let i = 0; i < 10; i++) {
      if (i > 5) {
        break; // 如果 i 大于 5,终止循环
      }
    }
    
  7. continue: 跳过当前的循环迭代,继续执行下一次迭代。
    for (let i = 0; i < 10; i++) {
      if (i % 2 === 0) {
        continue; // 如果 i 是偶数,跳过当前迭代
      }
      console.log(i); // 只打印奇数
    }
    
  8. try...catch: 异常处理语句,用来处理代码块执行中的错误。
    try {
      // 尝试执行的代码,可能会抛出异常
    } catch (error) {
      // 如果上面的代码块抛出了异常,就会执行这里的代码
    }
    

这些流程控制关键字是编程语言中非常基础和重要的部分,TypeScript 通过类型安全性增强了它们的能力和效率。

函数和面向对象

在 TypeScript 中,函数和面向对象编程部分非常重要,因为它们允许你创建可复用的代码块和模块化的代码结构。

函数(Functions)

函数是执行特定任务的代码块。在 TypeScript 中,你可以为函数参数和返回类型指定类型:

function add(x: number, y: number): number {
  return x + y;
}

还可以定义可选参数和默认参数:

function buildName(firstName: string, lastName?: string) {
  if (lastName)
    return firstName + " " + lastName;
  else
    return firstName;
}
let result1 = buildName("Bob");  // 正常工作,返回"Bob"
let result2 = buildName("Bob", "Adams");  // 正常工作,返回"Bob Adams"

面向对象(Object-Oriented Programming)

TypeScript 支持面向对象的所有基本原则,例如封装、继承和多态性。

  1. 类(Classes): 类是对象的蓝图。TypeScript 通过 class 关键字支持基于类的面向对象编程。
class Animal {
  name: string;
  constructor(theName: string) { this.name = theName; }
  move(distanceInMeters: number = 0) {
    console.log(`${this.name} moved ${distanceInMeters}m.`);
  }
}
let cat = new Animal("Whiskers");
cat.move(5);
  1. 接口(Interfaces): 接口是为类型命名和为你的代码或第三方代码定义契约的强有力的方式。
interface LabelledValue {
  label: string;
}
function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}
let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);
  1. 继承(Inheritance): 继承让你能从一个类扩展另一个类,继承其属性和方法。
class Animal {
  name: string;
  constructor(theName: string) { this.name = theName; }
  move(distanceInMeters: number = 0) {
    console.log(`${this.name} moved ${distanceInMeters}m.`);
  }
}
class Snake extends Animal {
  constructor(name: string) { super(name); }
  move(distanceInMeters = 5) {
    console.log("Slithering...");
    super.move(distanceInMeters);
  }
}
let sam = new Snake("Sammy the Python");
sam.move();
  1. 泛型(Generics): 泛型提供一种方法来创建可重用的组件,一个组件可以支持多种类型的数据。
function identity<T>(arg: T): T {
  return arg;
}
let output1 = identity<string>("myString");
let output2 = identity<number>(100);

这些是 TypeScript 中与函数和面向对象编程相关的核心概念。

高级类型(Advanced Types)

除了基本的面向对象概念,TypeScript 还提供了一些高级的类型功能,增加了更灵活的代码编写能力。

  1. 联合类型(Union Types): 允许一个变量拥有多种类型,增加了类型的灵活性。
function padLeft(value: string, padding: string | number) {
  // ...
}
  1. 交叉类型(Intersection Types): 交叉类型包含了多种类型的特性,可以用来混合多种类型。
interface BusinessPartner {
  name: string;
  credit: number;
}
interface Contact {
  email: string;
  phone: string;
}
type Customer = BusinessPartner & Contact;
let customer: Customer = {
    name: 'ABC Inc.',
    credit: 200,
    email: 'info@abc.inc',
    phone: '1234567890'
};
  1. 类型保护和类型断言(Type Guards and Differentiating Types): TypeScript 允许你确保变量属于某种特定类型。
function isFish(pet: Fish | Bird): pet is Fish {
  return (pet as Fish).swim !== undefined;
}
  1. 类型别名(Type Aliases): 类型别名可以给类型取一个新的名字。
type StringOrNumber = string | number;
function setCoordinate(coord: StringOrNumber) {
  // ...
}
  1. 映射类型(Mapped Types): 可以基于现有的类型创建新的类型。
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

装饰器(Decorators)

装饰器是一种特殊类型的声明,它能够被附加到类声明,方法,访问符,属性或参数上。装饰器使用 @expression 这种形式,expression 求值后必须为一个函数,它会在运行时被调用。

function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}
@sealed
class BugReport {
  type = "report";
  title: string;
  constructor(t: string) {
    this.title = t;
  }
}

通过这些进阶概念,TypeScript 提供了强大的工具来构建复杂和健壮的系统,确保了在大型应用中代码的安全和可维护性。

其他

TypeScript 是一个极富表现力的语言,有许多高级特性可以用来构建复杂和可维护的应用程序。除了之前讨论的特性,以下是一些补充的 TypeScript 相关知识点:

模块(Modules)

TypeScript 支持模块,你可以将代码分割成可复用的单元,通过 importexport 关键字来相互导入和导出组件、接口、类型别名等。

// math.ts
export function add(x: number, y: number): number {
  return x + y;
}
// index.ts
import { add } from './math';
console.log(add(1, 2));

条件类型(Conditional Types)

这种类型能够根据条件表达式在类型层面上进行选择,类似于 JavaScript 中的条件(三元)运算符。

type Check<Type> = Type extends string ? 'String' : 'Not a String';
type Type = Check<string>; // 'String'

索引类型(Indexed Access Types)

允许你通过索引值访问到类型的一个子集。

type Person = { age: number; name: string; alive: boolean };
type Age = Person['age']; // number

枚举(Enums)

枚举是定义一组命名常量的方式。TypeScript 支持数字和基于字符串的枚举。

enum Direction {
  Up,
  Down,
  Left,
  Right,
}

环境声明(Ambient Declarations)

当你想使用现有的 JavaScript 库但又不想花时间在 TypeScript 中重新编写它时,环境声明非常有用。 .d.ts 文件通常用于此目的。

declare module 'existing-library';

构造签名(Construct Signatures)

在定义构造器类型时使用,允许你指定一个对象可以通过 new 操作符来创建。

type SomeObject = new (name: string) => object;

以上是一些补充的 TypeScript 相关知识点,但这个列表并不完全。根据项目的复杂性和具体需求,可能还需要更深入地了解其中的一些特性。随着 TypeScript 社区的不断成熟和发展,不断有新工具和库被开发出来以支持更有效的 TypeScript 编程。

本文收录于