ts常用的语法

1. 类型注解

TypeScript 是一种静态类型检查的语言,可以为变量、函数参数、函数返回值等添加类型注解:

let age: number = 20;

function add(a: number, b: number): number {
  return a + b;
}

2. 接口

TypeScript 支持使用接口来定义类、函数、对象的结构,可以提高代码的可读性和可维护性:

interface Person {
  name: string;
  age: number;
  sayHi: () => void;
}

class Student implements Person {
  name: string;
  age: number;

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

  sayHi() {
    console.log(`Hi, my name is ${this.name} and I'm ${this.age} years old.`);
  }

3. 类和继承

TypeScript 支持类和继承,可以使用 class 关键字来定义类:

class Animal {
  name: string;

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

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

class Dog extends Animal {
  bark() {
    console.log('Bark bark!');
  }
}

const dog = new Dog('Buddy');
dog.move(10); // Buddy moved 10m.
dog.bark(); // Bark bark!

4. 枚举

TypeScript 支持枚举类型,可以使用 enum 关键字来定义枚举类型:

enum Color {
  Red,
  Green,
  Blue
}

let c: Color = Color.Green;
console.log(c); // 1

enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT'
}

let d: Direction = Direction.Up;
console.log(d); // UP

5. 泛型

TypeScript 支持泛型编程,可以编写更加通用和灵活的代码:

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

console.log(identity<string>('hello')); // hello
console.log(identity<number>(123)); // 123

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在HTML中使用TypeScript语法,需要将TypeScript代码编译为JavaScript代码后再在HTML中引用。以下是一个示例: 首先,在TypeScript文件中编写代码,例如在一个名为`script.ts`的文件中: ```typescript let body: HTMLElement = document.body; let allDiv: NodeList = document.querySelectorAll('div'); document.addEventListener('click', function(e: MouseEvent) { // Do something }); ``` 然后,使用TypeScript编译器将该文件编译为JavaScript文件。可以使用以下命令进行编译: ``` tsc script.ts ``` 这将生成一个名为`script.js`的JavaScript文件。 最后,在HTML文件中引用生成的JavaScript文件。例如,在`index.html`文件中: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./script.js"></script> </head> <body> <!-- HTML内容 --> </body> </html> ``` 在`<script>`标签中引用生成的JavaScript文件`script.js`。 这样,在HTML中就可以使用TypeScript编写的代码了。 #### 引用[.reference_title] - *1* *2* [TypeScript(02)——函数,class类其他语法ts在html页面中如何使用案例](https://blog.csdn.net/weixin_43216105/article/details/105391739)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [typescriptTS)基础语法快速入门,ts编译选项,ts打包使用](https://blog.csdn.net/m0_52409770/article/details/122973043)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值