30分钟速成TypeScript

这篇具有很好参考价值的文章主要介绍了30分钟速成TypeScript。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


一、TypeScript 是什么?


TypeScript 是 JavaScript 的超集,在 JavaScript 的基础上增加了类、模块、接口、泛型和静态类型(可选)等常见的概念。


从编程语言的动、静来区分,TypeScript属于静态类型的编程语言,JS属于动态类型的编程语言,静态类型是编译期做类型检查,动态类型是执行期做类型检查。


所有 JavaScript 代码都是有效的 TypeScript 代码,任何 JavaScript 项目都可以无缝引入 TypeScript,TypeScript 编译器最终会把 TypeScript 代码编译成 JavaScript 代码。


本文只关注 TypeScript 额外增加的区别于 JavaScript 的语法。


二、为什么要使用TypeScript


1、OOP面向对象特性

TypeScript 对于 OOP(面向对象程序设计) 背景的人来说感觉应该熟悉,其实开发 TypeScript 的工程师正是领导 C# 开发的微软工程师,但工程师们谨慎地只借用了对 TypeScript 有意义的特性,TypeScript 其实它更像 JavaScript 本身。


2、提高了开发效率

不可否认,一个 TypeScript 项目将会比同等的 JavaScript 代码有更多的行数,但是它有助于描述你正在操纵的数据,从而降低了整体的认知成本。它 通过减少记忆成本和消除打开不相关的文件手动检查类型来提高开发速度。


三、TypeScript 详细介绍


1、布尔类型

let isVisable: boolean = false;

2、数值类型

let count: number = 20;


3、字符串类型

let name: string = 'xiaowang';

如果不知道是什么类型,可以使用 “any” (任意)类型

let sure: any = 5;
sure = '重新赋值转换为字符串类型';
sure = false;       // 还可以重新定义为布尔类型

4、常量

使用 const 关键字将一个字面量修饰为常量。

const num = 9;
num = 1; 			// 常量不能重新被赋值,这里会报错

5、数组

TypeScript 中的数组有两种表示形式,一种是有类型的数组,另一种是泛型数组。

有类型的数组:

// 
let list: number[] = [1, 2, 3];


泛型数组:

let list: Array<number> = [1, 2, 3];

6、枚举

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

7、 void 关键词

它用于表明函数没有任何返回值的情况:

function Alert(): void {
  alert('我是弹出框!');
}

8、函数

支持使用 lambda 胖箭头表达式和类型推断

一般的函数

let fun1 = function(n: number): number { return n * n; };

根据返回值推断函数返回类型

let fun2 = function(n: number) { return n * n; };

胖箭头表达式

let fun3 = (n: number): number => { return n * n; };

根据返回值推断返回类型的胖箭头表达式

let fun4 = (n: number) => { return n * n; };

根据返回值推断返回类型的胖箭头表达式,省略花括号的同时,可以同时省去 return 关键字

let fun4 = (i: number) =>  i * i;

9、接口

接口是结构化的,任何具备接口中声明的全部属性的对象,都与该接口兼容。

interface Student {
  name: string;
  age?: number;    // 使用 "?" 标识,表明该属性是一个非必需属性
  move(): void;    // 函数
}

实现 “Student” 接口的对象,当它具备 “name” 属性和 “move” 方法之后可被视为一个 “Student”

let p: Student = { name: 'xaioming', move: () => {} };

带可选属性的对象

let smallStudent: Student = { name: 'xaioming', age: 5, move: () => {} };

下例由于该对象 “age” 属性的类型不是 “number” ,所以不是一个 “Student”

let invalidStudent: Student = { name: 'Bobby', age: true };

接口也可以描述一个函数的类型

interface FindFunc {
  (source: string, subString: string): boolean;
}

参数名并不重要,参数类型才重要

let myFind: FindFunc;
myFind = function(src: string, sub: string) {
  return src.search(sub) !== -1;
};

10、类

类成员访问权限默认都是公共的 (public).

类构造函数- 在类构造函数中使用 public/private 关键字修饰的变量,会被声明为类的成员属性。

下例:age 会像 name 一样被声明定义为类成员属性,而不再需要额外代码。

class Student {

  name: string;   // 成员属性

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

  // 成员函数
  move() { retun this.age++;}

  // 静态成员
  static normal = new Student('xiaoming', 10);
}

let p1 = new Student('xiaowang', 12);
let p2 = new Student('xiaoxi');      // age 为构造器中指定的默认值:1

类的继承

class BigStudent extends Student {
  constructor(name:string,  age: number, public major:string="计算机") {
    super(name, age); // 必须显式调用父类的构造函数
  }

  // 重写父类中的 dist() 函数
  dist() {
    let d = super.dist();
    return d+d;
  }
}

11、模块

模块 “.” 符号可以作为子模块的分隔符:

module Geometry {
  export class Square {
    constructor(public length: number = 0) {
    }
    area() {
      return Math.pow(this.length, 2);
    }
  }
}

let s1 = new Geometry.Square(6);

为模块创建一个本地别名:

import G1 = Geometry;
let s2 = new G1.Square(2);

12、 泛型

类泛型

class Student<T1, T2> {
  constructor(public param1: T1, public param2: T2) {
  }
}

接口泛型

interface Student<T> {
  param1: T;
  param2: T;
}

函数泛型

let student2 = function<T>(p: Student<T>) {
  return new Student(p.param1, p.param2);
};


let tuple = student2({ param1: 'hello', param2: 'world'});

13、模板字符串

使用反引号的字符串

// 嵌入变量的模板字符串
let name = 'wangming';
let greeting = `Hi ${name}, how are you?`;

// 有多行内容的模板字符串
let multiline = `This is an example
of a multiline string`;

14、引用定义文件

<reference path="jquery.a.ts" />

参考资料:文章来源地址https://www.toymoban.com/news/detail-684147.html

  • TypeScript官网

到了这里,关于30分钟速成TypeScript的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • TypeScript:为什么JavaScript需要类型检查?

    JavaScript是当今最为流行的编程语言之一。它是一种高级的、解释性的编程语言,用于Web应用程序的开发。然而,JavaScript的灵活性也是它的弱点之一。JavaScript中的变量、函数、类等都是动态类型,这意味着它们的类型可以在运行时发生变化。虽然这种灵活性为JavaScript开发人员

    2024年02月04日
    浏览(44)
  • TypeScript是什么?它与JavaScript有什么区别?

    面试题-TS(1):TypeScript是什么?它与JavaScript有什么区别? TypeScript是一种编程语言,它是JavaScript的超集。它通过添加静态类型、类、接口和模块等功能来扩展JavaScript。 JavaScript是一种广泛应用于Web开发的脚本语言,它的灵活性和易用性使得它成为了开发者们的首选。然而,JavaS

    2024年02月16日
    浏览(37)
  • Vue框架:适用于TypeScript的JavaScript框架

    Vue 是一个高效、灵活、易于学习的 JavaScript 框架,它采用了 MVVM 架构,能够快速构建交互式的用户界面。作为一种现代化的框架,Vue已经成为了许多开发者的首选,其中也包括了很多使用 TypeScript 的开发者。 Vue 框架的最大特点是轻量级、易于上手、灵活和高效,这一点也是

    2024年02月11日
    浏览(31)
  • typeof 在TypeScript中和JavaScript中的区别

            在TypeScript中和JavaScript中都有typeOf,但是作用用法却大有不同。 一、typeof用来判断数据类型返回结果: 基本数据类型:string,number,boolean,undefined 引用数据类型:object (不管是什么引用类型就返回object),function 二、typeof判断变量是否存在         ts中的typeof可

    2024年02月09日
    浏览(35)
  • TypeScript 从入门到精通:打造可靠、高效的现代 JavaScript

    TypeScript作为一种静态类型的编程语言,可以显著改善JavaScript项目的可维护性、可读性和开发效率。本篇博客将带你从入门到精通TypeScript,探索其强大的特性和用法。我们将深入了解基本类型和变量声明、函数和类、模块和命名空间等核心概念,并通过更多的案例代码帮助你

    2024年02月13日
    浏览(42)
  • TypeScript:赋予JavaScript数据类型新的力量,提升编程效率!

    🎬 岸边的 风: 个人主页  🔥  个人专栏  : 《 VUE 》 《 javaScript 》 ⛺️  生活的理想,就是为了理想的生活 ! ​ TypeScript: 扩展 JavaScript 数据类型,赋予编程更强大的表达能力! 在现代Web开发中, TypeScript 已经成为了一种备受欢迎的编程语言。它不仅继承了 JavaScript 的

    2024年02月09日
    浏览(33)
  • TypeScript的魔法:如何轻松提升JavaScript项目的稳定性

    JavaScript,作为Web开发的核心语言,因其灵活性和广泛的应用受到开发者的喜爱。然而,这种灵活性也带来了挑战,尤其是在大型项目中,代码的维护和错误的追踪变得越来越困难。 TypeScript,起初被许多开发者视为“带类型的JavaScript”,但实际上,它远不止于此。确实,Ty

    2024年02月10日
    浏览(35)
  • 面试题-TS(一):TypeScript是什么?它与JavaScript有什么区别?

    面试题-TS(一):TypeScript是什么?它与JavaScript有什么区别? TypeScript是一种编程语言,它是JavaScript的超集。它通过添加静态类型、类、接口和模块等功能来扩展JavaScript。 JavaScript是一种广泛应用于Web开发的脚本语言,它的灵活性和易用性使得它成为了开发者们的首选。然而,Jav

    2024年02月15日
    浏览(36)
  • JavaScript、TypeScript、ES5、ES6之间的联系和区别

    ECMAScript:  一个由 ECMA International 进行标准化,TC39 委员会进行监督的语言。通常用于指代标准本身。 JavaScript:  ECMAScript 标准的各种实现的最常用称呼。这个术语并不局限于某个特定版本的 ECMAScript 规范,并且可能被用于任何不同程度的任意版本的 ECMAScript 的实现。 ECMAS

    2024年02月13日
    浏览(31)
  • 前端经典面试题 | 吊打面试官系列 之 说说你对TypeScript 和 JavaScript的理解

    🖥️ 前端经典面试题 专栏:吊打面试官系列 之 说说你对TypeScript 和 JavaScript的理解 🧑‍💼 个人简介:一个不甘平庸的平凡人🍬 ✨ 个人主页:CoderHing的个人主页 🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️ 👉 你的一键三连是我更新的最大动力❤️ 目录 一、回答

    2024年01月17日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包