TypeScript个人学习记录

最新推荐文章于 2023-08-22 03:08:26 发布
最新推荐文章于 2023-08-22 03:08:26 发布
阅读量87 收藏
点赞数 1
文章标签： typescript javascript 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53401111/article/details/125688583
版权

TypeScript学习记录

  • 引言

    前面我们已经大致了解和学习过什么是HTML、CSS、JavaScript了，接下来我们将接触一门相比于JavaScript更加精细的技术：TypeScript。
    那么，什么是TypeScript?

    TypeScript是JavaScript类型的超集（当前我们处于ES5），它可以编译成纯JavaScript。
    TypeScript给JavaScript加上可选的类型系统，给JavaScript加上静态类型后，就能将调试从运行期提前到编码期，诸如类型检查、越界检查这样的功能才能真正发挥作用。 TypeScript的开发体验远远超过以往纯JavaScript的开发体验，无需运行程序即可修复潜在bug。

    TypeScript支持未来的ES6甚至ES7。在TypeScript中，可以直接使用ES6的最新特性，在编译时它会自动编译到ES3或ES5。
    TypeScript可以构建大型程序，并在任何浏览器、任何计算机和任何操作系统上运行，且是开源的。

1.TypeScript 配置

安装好NodeJS后，以管理员身份运行终端，使用npm -g install ts-node typescript命令进行全局安装
如在VSCode中开发，请安装TSLint、TypeScript Hero、Bracket Pair Colorizer等插件
新建一个.ts后缀的文件，任意写一段JS代码，点击运行试试是否配置成功

2.构建第一个TypeScript 文件

在编辑器，将下面的代码输入到greeter.ts文件里：

function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);
编译代码

我们使用了.ts扩展名，但是这段代码仅仅是JavaScript而已。 你可以直接从现有的JavaScript应用里复制/粘贴这段代码。

在命令行上，运行TypeScript编译器：

tsc greeter.ts

输出结果为一个greeter.js文件，它包含了和输入文件中相同的JavsScript代码。 一切准备就绪，我们可以运行这个使用TypeScript写的JavaScript应用了！

接下来让我们看看TypeScript工具带来的高级功能。 给 person函数的参数添加: string类型注解，如下：

function greeter(person: string) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);
类型注解

TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式。 在这个例子里，我们希望 greeter函数接收一个字符串参数。 然后尝试把 greeter的调用改成传入一个数组：

function greeter(person: string) {
    return "Hello, " + person;
}

let user = [0, 1, 2];

document.body.innerHTML = greeter(user);

重新编译，你会看到产生了一个错误。

greeter.ts(7,26): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

类似地，尝试删除greeter调用的所有参数。 TypeScript会告诉你使用了非期望个数的参数调用了这个函数。 在这两种情况中，TypeScript提供了静态的代码分析，它可以分析代码结构和提供的类型注解。

要注意的是尽管有错误，greeter.js文件还是被创建了。 就算你的代码里有错误，你仍然可以使用TypeScript。但在这种情况下，TypeScript会警告你代码可能不会按预期执行。

接口

让我们开发这个示例应用。这里我们使用接口来描述一个拥有firstName和lastName字段的对象。 在TypeScript里，只在两个类型内部的结构兼容那么这两个类型就是兼容的。 这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以，而不必明确地使用 implements语句。

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

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Jane", lastName: "User" };

document.body.innerHTML = greeter(user);
类

最后，让我们使用类来改写这个例子。 TypeScript支持JavaScript的新特性，比如支持基于类的面向对象编程。

让我们创建一个Student类，它带有一个构造函数和一些公共字段。 注意类和接口可以一起共作，程序员可以自行决定抽象的级别。

还要注意的是，在构造函数的参数上使用public等同于创建了同名的成员变量。

class Student {
    fullName: string;
    constructor(public firstName, public middleInitial, public lastName) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

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

function greeter(person : Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);

重新运行tsc greeter.ts，你会看到生成的JavaScript代码和原先的一样。 TypeScript里的类只是JavaScript里常用的基于原型面向对象编程的简写。

运行TypeScript Web应用

在greeter.html里输入如下内容：

<!DOCTYPE html>
<html>
    <head><title>TypeScript Greeter</title></head>
    <body>
        <script src="greeter.js"></script>
    </body>
</html>

在浏览器里打开greeter.html运行这个应用！

可选地：在Visual Studio里打开greeter.ts或者把代码复制到TypeScript playground。 将鼠标悬停在标识符上查看它们的类型。 注意在某些情况下它们的类型可以被自动地推断出来。 重新输入一下最后一行代码，看一下自动补全列表和参数列表，它们会根据DOM元素类型而变化。 将光标放在 greeter函数上，点击F12可以跟踪到它的定义。 还有一点，你可以右键点击标识，使用重构功能来重命名。

以下我们就Typescript涉及前端框架Angular和相关特性的一些知识点进行介绍

3.let 和 const

不使用var，使用let或const申明变量，并加上类型说明，且作用域为块级即以{}为界

let lang: string = 'TypeScript';//如果省略类型说明，TS也可进行自动推断
lang = 1010;//error! 如果需要可以使用联合类型：let lang: number | string = 'TS';
let age: number = 89;
let age = 64;//error!

const pi: number = 3.14159;//pi以后不可改变，类似常量
pi = 3.14;//error!

4. 解构

将对象、数组中的元素拆分到指定变量中，以方便使用

//解构数组
let input = [89, 64, 2018, 10];
let [first, second] = input;//注意使用[]
console.log(first); // 89
console.log(second); // 64
let [one, ...others] = input; //剩余变量
console.log(...others);
//展开
let newArr = [89, ...others, 18];
console.log(newArr);
//解构对象
let o = {
  a: "foo",
  b: 12,
  c: "bar"
};
let {a, b} = o;//注意使用{}，且变量名需与对象中道属性名一致
console.log(a, b);

5.函数

使用完整函数类型定义

//命名函数，有完整的参数和返回类型。可以不用，TS将自动进行类型推断但推荐使用！
function add(x: number, y: number): number {
  return x + y;
}
//匿名函数
let myAdd = function(x: number, y: number): number { return x + y; };
console.log(myAdd(1, '2'));//error
console.log(myAdd(1));//error
console.log(typeof myAdd(1, 2));//number

可选参数

//可选参数，必须放在必要参数后
function greeting(firstName: string, lastName?: string) {
  if(lastName) {
      return `Hello ${firstName} ${lastName}!`;
  }
  return `Hello ${firstName}!`;
}
console.log(greeting('QiGe'));
console.log(greeting('QiGe', 'Wang'));
console.log(greeting('QiGe', 'Wang', 'Yong'));//error!

默认参数

//默认参数，不必在必要参数后
function greeting(firstName: string, lastName = 'Wang') {
  return `Hello ${firstName} ${lastName}!`;
}
console.log(greeting('QiGe'));
console.log(greeting('QiGe', 'HaHaHa'));
console.log(greeting('QiGe', 'HaHaHa', 'Yong'));//error!

剩余参数

必要参数，默认参数和可选参数有个共同点：它们表示某一个参数。 有时，你想同时操作多个参数，或者你并不知道会有多少参数传递进来， 在TypeScript里，你可以把所有参数收集到一个变量里

//剩余参数，会被当做个数不限的可选参数。可以一个都没有，也可以有任意个
function greeting(firstName: string, ...restName: string[]) {
  return `Hello ${firstName} ${restName.join(' ')}!`;
}
console.log(greeting('Osama', 'bin', 'Muhammad', 'bin', 'Awad', 'bin', 'Laden'));
console.log(greeting('Laden'));

箭头函数

特点：简化函数定义、解决this问题（如需进一步了解可查看文档）

//无参数，函数体代码只有一行，则该行结果即为函数返回值
let greeting1 = () => `Hello TS!`;
console.log(greeting1());
//一个参数，函数体代码只有一行，则该行结果即为函数返回值
let greeting2 = (name: string) => `Hello ${name}`;
console.log(greeting2('QiGe'));
//两个及以上的参数，函数体代码只有一行，则该行结果即为函数返回值
let add1 = (n1: number, n2: number) => n1 + n2;
console.log(add1(1, 2));
//两个及以上的参数，函数体代码多于一行,则必须用{}包裹，且显式给出return
let add2 = (n1: number, n2: number) => {
  let sum = n1 + n2;
  return sum;//改为sum++结果如何？
}
console.log(add2(1, 2));

6.类class

类是属性（有些什么）和函数（能干什么）的集合，是生成对象（Object）或类实例的模板。（请注意，我们要用的Angular框架大量使用类）

类的定义和使用

//类的定义和使用
class MyInfo { //class是关键字，类名默认全部大写首字母
  name: string; //属性
  weather: string; //属性
  
  constructor(name: string, weather: string){ //构造函数，一般用于初始化。如果没有，TS会自动生成一个，以备用new创建类实例时调用。
    this.name = name;
    this.weather = weather;
  }
  printInfo(): void { //其它函数，无返回值
    console.log(`Hello, ${this.name}.`);
    console.log(`Today is ${this.weather}.`);
  }
}

let myData = new MyInfo('QiGe', 'raining'); //使用new关键字生成对象，即该类的实例
myData.printInfo();

类的属性和函数的访问权限

类中的属性和函数都有访问权限，默认为public即全局可访问，其次为protected即可在类的内部和其子类的内部可访问，最后为private，只能在该类内部可访问。

//访问权限
class MyInfo { //class是关键字，类名默认全部大写首字母
  public name: string; //public属性，可省略
  private _weather: string; //私有属性，习惯以_开头进行命名
  
  constructor(name: string, weather: string){ //构造函数，一般用于初始化
    this.name = name;
    this._weather = weather;
  }
  printInfo(): void { //其它函数
    this._test();
    console.log(`Hello, ${this.name}.`);
    console.log(`Today is ${this._weather}.`);
  }
  private _test(): void {
    console.log('You can not call me outside!');
  }
}

let myData = new MyInfo('QiGe', 'raining'); //使用new关键字生成对象
console.log(myData._weather); //error!
myData._test(); //error
myData.printInfo();

存取器-getter、setter

当在类外部时，建议设置getter和setter操作其private属性，即使public属性也如此。

//getter和setter
class MyInfo { //class是关键字，类名默认全部大写首字母
  private readonly _name: string; //私有属性，外部不可访问。readonly使其只能在初始化时赋值，以后不可更改。    
  private _weather: string; //私有属性，习惯以_开头进行命名

  constructor(name: string, weather: string){ //构造函数，一般用于初始化
    this._name = name;
    this._weather = weather;
  }
  get name(): string {
    return this._name;
  }
  set name(value: string) {  //error！ _name有readonly属性
    this._name = value;
  }
  get weather(): string {
    return this._weather;
  }
  set weather(value: string) {
    this._weather = value;
  } 
}
  
let myData = new MyInfo('QiGe', 'raining'); //使用new关键字生成对象
console.log(myData.name, myData.weather);
myData.weather = 'sunny'; //OK
myData.name = 'Wang'; //error!
console.log(myData);

静态属性

类中的属性或函数有static修饰，则可直接使用而不需要实例化

//静态属性，内建或自定义，无需new即可使用
console.log(Math.round(89.64)); //90
console.log(Math.pow(2, 8)); //256
class MyStaticClass {
  static place = 'Earth';
  static printInfo() {
    console.log('We have only one Earth!');
  }
}
console.log(MyStaticClass.place);
MyStaticClass.printInfo();

继承

可以通过extends关键字继承其它类，从而成为其子类

class Animal {
  // 当构造函数传入的参数加上了“访问权限控制符”，则同时会声明同名类属性，并赋值
  constructor(public name: string) { }
  protected log(message: string) {
    console.log(message);
  }
  move(distanceInMeters: number = 0) {        
    this.log(`${this.name} moved ${distanceInMeters}m.`);//请注意name来自何处
    this.log('==============');
  }
}

class Horse extends Animal {
  constructor(name: string) { 
    super(name); // 通过super调用父类构造器
  }
  run(distanceInMeters = 50) { //自己独有的函数
    this.log("Clop, clop..."); 
    super.move(distanceInMeters); // 通过super调用父类方法
  }
}

class Eagle extends Animal {
  constructor(name: string) { super(name); }
  reborn() { //自己独有的函数
    console.log('Reborn？ It is a joke, hahaha!');
  }

}

let tom: Horse = new Horse("Tommy the Palomino");
tom.run(8964);
let sam: Eagle = new Eagle("Sammy the Hawk");
sam.move(1024);//sam的move函数来自何处？
sam.reborn();

7.总结

本次对于TypeScript的学习，对于过程而言是十分痛苦的：相比于HTML和CSS，TypeScript的难度完全不是一个等级的。这让刚从JavaScript的磨炼中走出来的我又有点措手不及了。不过好在先前接受了JavaScript的洗礼，在面对TypeScript的时候不至于落荒而逃。

毕竟人总是需要成长的，在通过艰难的匍匐前进后，我对于TypeScript这门技术总算是有一点点了解和能够稍微运用那么一点了。可喜可贺可喜可贺。但是如果仅仅是这样那是远远达不到要求的，无论是老师的要求还是我自己的要求。所以我将继续砥砺前进，争取学出一片自己的天空！

另外，本次学习也使我对于TypeScript的用法有了更加深入的了解，虽然不能说算是能够灵活运用，但是在一定的条件下还是可以使用一下的，这也算是一种学习收获吧。

在此特别感谢我的老师王勇，是王勇老师的谆谆教诲使我能够更进一步。

特别鸣谢！

参考网址1：棋哥教学网
参考网址2：TypeScript中文网
学生：何家豪

枝江中单王木木
关注
【TypeScript】深入学习TypeScript装饰器
前端之行，任重道远！
08-06 6626
本篇文章将深入去讲解TypeScript中的装饰器，这也许会是你看过的最全面最细致的TypeScript，关注博主学习TypeScript不迷路！！！
后端小白的TypeScript入门学习笔记
5akura's Blog
06-19 1760
文章目录写在前面一、TypeScript入门了解1.1、什么是TypeScript1.2、快速上手安装TypeScript代码文件编写编译（ts -> js）1.3、TypeScript自动编译（vscode）1.4、搭建Webpack项目环境准备基础测试二、TypeScript特性2.1、基础类型number、string、booleanArray、Tupleenumundefined、null、voidanyobject2.2、高级类型联合类型类型断言接口基本使用可选属性只读属性函数类型类构造函数
Typescript学习指南
Boboy
01-14 352
官网学习 速成学习版 入门学习版 中文学习版 深入学习版 书写TS指南
一个简单的ts学习计划
最新发布
小创果技术交流博客
08-22 353
请注意，每个阶段的学习时间因个人而异，可以根据你的学习进度和需要进行调整。记得在学习过程中不断编写代码、解决问题，并积极参与社区讨论，这样你的 TypeScript 技能会不断地提升！
typeScript基础篇学习【前言】
cabbageboiling的博客
05-04 120
静态类型检查：TypeScript是一种静态类型检查的编程语言，即在代码编写时就能够检查出类型错误，而JavaScript则是动态类型检查的编程语言，需要在运行时才能检查出类型错误。1、从官方文档入手，了解TypeScript与JavaScript在语法、数据类型等方面的异同，并学习如何编写TypeScript的变量、函数和类。5、深入理解TypeScript的类型系统，包括类型推断、类型兼容性、类型保护等。2、了解TypeScript的高级特性，如枚举、泛型、接口、元组、类型别名等。
TypeScript入门学习之路
牛先森家的博客
11-21 7375
TypeScript学习之路TypeScript学习之路安装typescript环境typescript起步 TypeScript学习之路 安装typescript环境 npm install -g typescript 查看版本 tsc -v typescript起步 1、新建hello.ts const hello : string = "Hello World!" console.log(hello) 2、通过 tsc 命令编译 tsc hello.ts 3、此时路径下会生成一个hello.
Typescript(二）
大大黄的博客
01-28 412
注：Typescript 中的面向对象 TS面向对象 面向对象是程序中一个非常重要的思想，它被很多同学理解成了一个比较难，比较深奥的问题，其实不然。面向对象很简单，简而言之就是程序之中所有的操作都需要通过对象来完成。 举例来说： 操作浏览器要使用window对象 操作网页要使用document对象 操作控制台要使用console对象 一切操作都要通过对象，也就是所谓的面向对象，那么对象到底是什么呢？这就要先说到程序是什么，计算机程序的本质就是对现实事物的抽象，抽象的反义词是具体，比如：照片是对一个
portfolio:用TypeScript编写的个人作品集
03-05
**TypeScript 概述** TypeScript 是一种由微软开发的开源编程语言，它是 JavaScript 的超集，增加了静态类型系统和一些高级语法特性。...这个项目可以作为学习 TypeScript 和前端开发的优秀实例。
learning-typescript:从udemy学习打字稿
04-08
**TypeScript 深度解析：从 Udemy 学习之旅** 在当今的软件开发领域，TypeScript 作为 JavaScript 的超集，已经成为许多开发者青睐的编程语言，尤其在大型项目和团队协作中。本篇文章将深入探讨从 Udemy 学习 ...
blog:我个人的博客，记录了我职业生涯中的所有学习经历！
03-28
【标题】：“blog:我个人的博客，记录了我职业生涯中的所有学习经历！”这一标题揭示了这是一个个人博客项目，其中包含了作者在IT职业生涯中积累的学习经验与技术成长的记录。这个博客很可能是一个分享技术知识、...
最全的TypeScript学习指南
IT教育任姐姐的博客
01-19 1693
大家好，今天给大家带来 某机构教研总监陆神的开年之作《最全TypeScript学习指南》可以说是非常的细致、全面 TypeScript 是由微软2012年推出的，自由和开源的编程语言。这门语言在业界已经相当的流行。我们熟知的Vue, React, Angular这些广泛应用的前端框架，都在使用TypeScript进行开发，鸿蒙系统3.0也重点推荐使用JS开发应用，在最新推出的开发框架ArkUI，也全面拥抱TS了。 TypeScript是JavaScript的超集，正式因为她是建立在JavaScript
TypeScript 学习之路
程序猿小白的博客
08-31 1688
一种由微软开发的自由和开源的编程语言，简称TS。TypeScript是JavaScript的超集，即包含JavaScript的所有元素，能运行JavaScript的代码，并扩展了JavaScript的语法。相比于JavaScript，它还增加了静态类型、类、模块、接口和类型注解方面的功能，相对于JavaScript，TypeScript属于强类型语言，所以对于项目而言，会使代码更加规范，从而解决了大型项目代码的复杂性。更易于大项目的开发...
一文教你如何学习TypeScript
纸飞机博客
10-29 4802
在看这篇文章之前，我是强烈推荐TypeScript 入门教程这本书的。因为这本书它是：从 JavaScript 程序员的角度总结思考，循序渐进的理解TypeScript。文章来源也是该书，但听我一句话：踩过坑才代表会了。【建议收藏】 希望你看这本书之前已经具备了以下技能： 熟练使用JavaScript开发日常项目 一、什么是TypeScript？ 1、TypeScript词解 Typed JavaScript at Any Scale。 添加了类型系统的 JavaScript，适用于任何规模的项.
typescript学习日记，从基础到进阶（第二章）
luoluoyang23的博客
05-01 435
typescript从基础到进阶
TypeScript学习总结
手可摘星辰博客
07-04 321
Typescript入门
TypeScript 入门学习（一）：TypeScript 环境准备
Star's Tech Blog
07-18 350
TypeScript入门学习 TypeScript介绍 TypeScript是由微软开发的一款开源的编程语言。 TypeScript是JavaScript的超集，遵循最新的ES5、ES6脚本语言规范。 TypeScript拓展了JavaScript的语法，任何已经存在的JavaScript程序可以不加改动的在TypeScript环境下运行。 TypeScript的优势 支持ES6规范 强大的...
下一代前端开发语言typescript学习之安装typescript
m0_46269977的博客
04-17 288
打开终端 windows电脑中 使用npm install -g typescript 全局安装最新版本 mac电脑中 使用sodu npm install -g typescript 输入密码后全局安装最新版本 如果不加sodu会报错 查看是否安装成功typescript 使用命令: tsc-v 恭喜你成功安装typescript ...
TypeScript学习笔记
weixin_44627989的博客
04-27 545
typescript与javascript typescript是一个js的超集，个人理解为包装了面向对象编程逻辑的语法糖，所以一般使用typescript的语言来编写代码，然后再使用typescript编译为原生js，这样就可以作为普通js脚本运行了。typescript语法很多地方于java类似，作为java程序员学起来不会很吃力。 安装typescript npm install -g ty...
学习计划与目标
weixin_33690963的博客
07-01 552
学习计划与目标 1.学习计划 每天早上七点起床，回顾昨天所学习的内容，默写自己已经掌握的内容 上午全神贯注的听老师讲课，做好随手笔记 下午整理笔记，写作业，预习第二天所要学习的内容 2.目标 将Python基础知识，学习扎实 月薪>10k 转载于:https://www.cnblogs.com/liubing8/p/11115789.html...
typescript 如何学习
05-09
TypeScript 是一种由 Microsoft 开发的开源编程语言，它是 JavaScript 的超集，提供了更多的功能和类型检查，可以更好地帮助开发者编写更可靠的代码。 以下是学习 TypeScript 的一些步骤： 1. 学习 JavaScript 基础知识：TypeScript 是 JavaScript 的超集，因此首先需要掌握 JavaScript 的基础知识。 2. 学习 TypeScript 的基础语法：了解 TypeScript 的基础语法，包括变量声明、数据类型、函数、类等。 3. 学习 TypeScript 的高级特性：了解 TypeScript 的高级特性，例如泛型、接口、枚举、装饰器等。 4. 使用 TypeScript 开发项目：在实际项目中使用 TypeScript，可以更好地理解 TypeScript 的使用方法和优势。 5. 学习 TypeScript 的工具和框架：掌握 TypeScript 的工具和框架，例如 TypeScript 编译器、TypeScript 的语法高亮插件、Angular 框架等。 6. 参与 TypeScript 社区：参与 TypeScript 社区，了解最新的 TypeScript 版本和技术，也可以与其他 TypeScript 开发者交流经验和技巧。 总之，学习 TypeScript 需要掌握 JavaScript 基础知识，了解 TypeScript 的基础语法和高级特性，实践使用 TypeScript 开发项目，并参与 TypeScript 社区。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值