TypeScript 学习笔记

于 2024-02-23 12:40:26 发布
阅读量1k 收藏 13
点赞数 26
分类专栏： 前端 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/geji001/article/details/136250054
版权

主要内容参考菜鸟教程，结合了自己学习过程中的一些拓展

TypeScript 基础语法 | 菜鸟教程

1.1 环境配置

1.1.1 安装ts

npm install -g typescript

1.2.1 编写demo

var message:string = "Hello World" 
console.log(message)

1.3.1 运行

1.3.1.1 命令行直接运行

1.3.1.2 vs code安装插件运行
1.3.1.2 1 安装依赖
npm install typescript ts-node tslib @types/node -g
1.3.1.2 2 安装插件

1.3.1.2 2 运行

2.1 基础语法

2.1.1 特性

区分大小写；分号可选；

2.2.1 编码方法

2.2.1.1 过程型

console.log("Runoob");

2.2.1.2 面向对象

class Site { 
    name():void { 
       console.log("Runoob") 
    } 
 } 
 var obj = new Site(); 
 obj.name();

3.1 基础类型

数据类型关键字描述
任意类型any声明为 any 的变量可以赋予任意类型的值。
数字类型number

双精度 64 位浮点值。它可以用来表示整数和分数。

let decLiteral: number = 6;    // 十进制
字符串类型string

一个字符系列，使用单引号（'）或双引号（"）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式。

let name: string = "Runoob";
let years: number = 5;
let words: string = `您好，今年是 ${ name } 发布 ${ years + 1} 周年`;
布尔类型boolean

表示逻辑值：true 和 false。

let flag: boolean = true;
数组类型无

声明变量为数组。

// 在元素类型后面加上[]
let arr: number[] = [1, 2];

// 或者使用数组泛型
let arr: Array<number> = [1, 2];
元组无

元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。

let x: [string, number];
x = ['Runoob', 1];    // 运行正常
x = [1, 'Runoob'];    // 报错
console.log(x[0]);    // 输出 Runoob
枚举enum

枚举类型用于定义数值集合。

enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c);    // 输出 2
voidvoid

用于标识方法返回值的类型，表示该方法没有返回值。

function hello(): void {
    alert("Hello Runoob");
}
nullnull

表示对象值缺失。

undefinedundefined

用于初始化变量为一个未定义的值

nevernever

never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

4.1 变量声明

4.1.1 变量声明的形式

var [变量名] : [类型] = 值;
var uname:string = "Runoob";

var [变量名] : [类型];
var uname:string;

var [变量名] = 值;
var uname = "Runoob";

var [变量名];
var uname;

4.1.2 变量的作用域

var global_num = 12          // 全局变量
class Numbers { 
   num_val = 13;             // 实例变量
   static sval = 10;         // 静态变量
   
   storeNum():void { 
      var local_num = 14;    // 局部变量
   } 
} 
console.log("全局变量为: "+global_num)  
console.log(Numbers.sval)   // 静态变量
var obj = new Numbers(); 
console.log("实例变量: "+obj.num_val)

5.1 运算符

5.1.1 算数运算符

var num1:number = 10 
var num2:number = 2
var res:number = 0

res = num1 + num2 
console.log("加:        "+res); 

res = num1 - num2; 
console.log("减: "+res) 

res = num1*num2 
console.log("乘:    "+res) 

res = num1/num2 
console.log("除:   "+res)
    
res = num1%num2 
console.log("余数:   "+res) 

num1++ 
console.log("num1 自增运算: "+num1) 

num2-- 
console.log("num2 自减运算: "+num2)

5.1.2 关系运算符

var num1:number = 5;
var num2:number = 9;
 
console.log("num1 的值为: "+num1); 
console.log("num2 的值为:"+num2);
 
var res = num1>num2 
console.log("num1 大于n num2: "+res)
 
res = num1<num2 
console.log("num1 小于 num2: "+res)  
 
res = num1>=num2 
console.log("num1 大于或等于  num2: "+res)
 
res = num1<=num2
console.log("num1 小于或等于 num2: "+res)  
 
res = num1==num2 
console.log("num1 等于 num2: "+res)  
 
res = num1!=num2  
console.log("num1 不等于 num2: "+res)

5.1.3 逻辑运算符

var avg:number = 20; 
var percentage:number = 90; 
 
console.log("avg 值为: "+avg+" ,percentage 值为: "+percentage);
    
var res:boolean = ((avg>50)&&(percentage>80)); 
console.log("(avg>50)&&(percentage>80): ",res);
 
var res:boolean = ((avg>50)||(percentage>80)); 
console.log("(avg>50)||(percentage>80): ",res);
 
var res:boolean=!((avg>50)&&(percentage>80)); 
console.log("!((avg>50)&&(percentage>80)): ",res);

5.1.4 复制运算符

var a: number = 12 
var b:number = 10  
 
a = b 
console.log("a = b: "+a)
 
a += b
console.log("a+=b: "+a)
 
a -= b 
console.log("a-=b: "+a)
 
a *= b 
console.log("a*=b: "+a)
 
a /= b 
console.log("a/=b: "+a)    
 
a %= b 
console.log("a%=b: "+a)

5.1.5 类型运算符

var num = 12 
console.log(typeof num);   //输出结果: number

6.1 条件语句

6.1.1 if..else if..if..

var num:number = 2 
if(num > 0) { 
    console.log(num+" 是正数") 
} else if(num < 0) { 
    console.log(num+" 是负数") 
} else { 
    console.log(num+" 不是正数也不是负数") 
}

6.1.2 switch..case..

var grade:string = "A"; 
switch(grade) { 
    case "A": { 
        console.log("优"); 
        break; 
    } 
    case "B": { 
        console.log("良"); 
        break; 
    } 
    default: { 
        console.log("非法输入"); 
        break;              
    } 
}

7.1 循环

7.1.1 for

var num:number = 5; 
var i:number; 
var factorial = 1; 
 
for(i = num;i>=1;i--) {
   factorial *= i;
}
console.log(factorial)

7.1.2 for.. in..

var j:any; 
var n:any = "a b c" 
 
for(j in n) {
    console.log(n[j])  
}

7.1.3 while

var num:number = 5; 
var factorial:number = 1; 
 
while(num >=1) { 
    factorial = factorial * num; 
    num--; 
} 
console.log("5 的阶乘为："+factorial);

8.1 函数

8.1.1 带参数和返回值

function add(x: number, y: number): number {
    return x + y;
}
console.log(add(1,2))

8.1.2 带可选参数

function buildName(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");  // 正确

8.1.3 带默认参数

function calculate_discount(price:number,rate:number = 0.50) { 
    var discount = price * rate; 
    console.log("计算结果: ",discount); 
} 
calculate_discount(1000) 
calculate_discount(1000,0.30)

8.1.4 剩余参数

function addNumbers(...nums:number[]) {  
    var i;   
    var sum:number = 0; 
    
    for(i = 0;i<nums.length;i++) { 
       sum = sum + nums[i]; 
    } 
    console.log("和为：",sum) 
 } 
 addNumbers(1,2,3) 
 addNumbers(10,10,10,10,10)

8.1.5 匿名函数

var res = function(a:number,b:number) { 
    return a*b;  
}; 
console.log(res(12,2))

8.1.6 lambda函数

var foo = (x:number)=>10 + x 
console.log(foo(100))      //输出结果为 110

9.1 Number&String(略)

略

10.1 数组Array

10.1.1 number类型数组

var numlist:number[] = [2,4,6,8]

10.1.2 数组对象

var arr_names:number[] = new Array(4)  
 
for(var i = 0; i<arr_names.length; i++) { 
        arr_names[i] = i * 2 
        console.log(arr_names[i]) 
}

10.1.3 多维数组

var multi:number[][] = [[1,2,3],[23,24,25]]  
console.log(multi[0][0]) 
console.log(multi[0][1]) 
console.log(multi[0][2]) 
console.log(multi[1][0]) 
console.log(multi[1][1]) 
console.log(multi[1][2])

10.1.4 数组与函数

function disp() {
        return new Array("Google", "Runoob", "Taobao", "Facebook");
}
var sites = disp();
for (var i in sites) {
        console.log(sites[i]);
}

11.1 Map

11.1.1 创建Map

let nameSiteMapping = new Map();
// 设置 Map 对象
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 2);
nameSiteMapping.set("Taobao", 3);
// 获取键对应的值
console.log(nameSiteMapping.get("Runoob")); //40
// 判断 Map 中是否包含键对应的值
console.log(nameSiteMapping.has("Taobao")); //true
console.log(nameSiteMapping.has("Zhihu")); //false
// 返回 Map 对象键/值对的数量
console.log(nameSiteMapping.size); //3
// 删除 Runoob
console.log(nameSiteMapping.delete("Runoob")); // true
console.log(nameSiteMapping);
// 移除 Map 对象的所有键/值对
nameSiteMapping.clear(); //清除 Map
console.log(nameSiteMapping);

11.1.2 迭代Map

let nameSiteMapping = new Map();
 
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 2);
nameSiteMapping.set("Taobao", 3);
 
// 迭代 Map 中的 key
for (let key of nameSiteMapping.keys()) {
    console.log(key);                  
}
 
// 迭代 Map 中的 value
for (let value of nameSiteMapping.values()) {
    console.log(value);                 
}
 
// 迭代 Map 中的 key => value
for (let entry of nameSiteMapping.entries()) {
    console.log(entry[0], entry[1]);   
}
 
// 使用对象解析
for (let [key, value] of nameSiteMapping) {
    console.log(key, value);            
}

12.1 元祖

数组中元素类型相同，如果元素类型不同，需要用元祖

12.1.1 声明和访问元祖

var mytuple = []; 
mytuple[0] = 120 
mytuple[1] = 234
var mytuple = [10,"Runoob"]; // 创建元组
console.log(mytuple[0]) 
console.log(mytuple[1])

12.1.2 添加和删除数据

var mytuple = [10,"Hello","World","typeScript"]; 
console.log("添加前元素个数："+mytuple.length)    // 返回元组的大小
 
mytuple.push(12)                                    // 添加到元组中
console.log("添加后元素个数："+mytuple.length) 
console.log("删除前元素个数："+mytuple.length) 
console.log(mytuple.pop()+" 元素从元组中删除") // 删除并返回删除的元素
        
console.log("删除后元素个数："+mytuple.length)

12.1.3 更新元祖

var mytuple = [10, "Runoob", "Taobao", "Google"]; // 创建一个元组
console.log("元组的第一个元素为：" + mytuple[0]) 
 
// 更新元组元素
mytuple[0] = 121     
console.log("元组中的第一个元素更新为："+ mytuple[0])

13.1 联合声明

13.1.1 声明

var val:string|number 
val = 12 
console.log("数字为 "+ val) 
val = "Runoob" 
console.log("字符串为 " + val)

13.1.2 作为参数

function disp(name:string|string[]) { 
        if(typeof name == "string") { 
                console.log(name) 
        } else { 
                var i; 
                for(i = 0;i<name.length;i++) { 
                console.log(name[i])
                } 
        } 
} 
disp("Runoob") 
console.log("输出数组....") 
disp(["Runoob","Google","Taobao","Facebook"])

14.1 接口

14.1.1 声明

interface IPerson { 
    firstName:string, 
    lastName:string, 
    sayHi: ()=>string 
} 
 
var customer:IPerson = { 
    firstName:"Tom",
    lastName:"Hanks", 
    sayHi: ():string =>{return "Hi there"} 
} 
 
console.log("Customer 对象 ") 
console.log(customer.firstName) 
console.log(customer.lastName) 
console.log(customer.sayHi())  
 
var employee:IPerson = { 
    firstName:"Jim",
    lastName:"Blakes", 
    sayHi: ():string =>{return "Hello!!!"} 
} 
 
console.log("Employee  对象 ") 
console.log(employee.firstName) 
console.log(employee.lastName)

14.1.2 接口继承

interface Person { 
   age:number 
} 
 
interface Musician extends Person { 
   instrument:string 
} 
 
var drummer = <Musician>{}; 
drummer.age = 27 
drummer.instrument = "Drums" 
console.log("年龄:  "+drummer.age)
console.log("喜欢的乐器:  "+drummer.instrument)

15.1 类

15.1.1 创建类

class Car { 
   // 字段
   engine:string; 
   
   // 构造函数
   constructor(engine:string) { 
      this.engine = engine 
   }  
   
   // 方法
   disp():void { 
      console.log("函数中显示发动机型号  :   "+this.engine) 
   } 
} 
 
// 创建一个对象
var obj = new Car("XXSY1")
 
// 访问字段
console.log("读取发动机型号 :  "+obj.engine)  
 
// 访问方法
obj.disp()

15.1.2 类的继承

class Shape { 
   Area:number 
   
   constructor(a:number) { 
      this.Area = a 
   } 
} 
 
class Circle extends Shape { 
   disp():void { 
      console.log("圆的面积:  "+this.Area) 
   } 
}
  
var obj = new Circle(223); 
obj.disp()

15.1.3 支持多重继承，不支持多继承

class Root { 
   str:string; 
} 
 
class Child extends Root {} 
class Leaf extends Child {} // 多重继承，继承了 Child 和 Root 类
 
var obj = new Leaf(); 
obj.str ="hello" 
console.log(obj.str)

15.1.4 方法重写

class PrinterClass { 
   doPrint():void {
      console.log("父类的 doPrint() 方法。") 
   } 
} 
 
class StringPrinter extends PrinterClass { 
   doPrint():void { 
      super.doPrint() // 调用父类的函数
      console.log("子类的 doPrint()方法。")
   } 
}

15.1.5 static

关键字用于定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用。

class StaticMem {  
   static num:number; 
   
   static disp():void { 
      console.log("num 值为 "+ StaticMem.num) 
   } 
} 
 
StaticMem.num = 12     // 初始化静态变量
StaticMem.disp()       // 调用静态方法

15.1.6 instanceof

运算符用于判断对象是否是指定的类型，如果是返回 true，否则返回 false。

class Person{ } 
var obj = new Person() 
var isPerson = obj instanceof Person; 
console.log("obj 对象是 Person 类实例化来的吗？ " + isPerson);

15.1.7 访问控制修饰符

public: 公有，可以在任何地方被访问。

protected：受保护，可以被其自身以及其子类访问。

private：私有，只能被其定义所在的类访问。

class Encapsulate { 
   str1:string = "hello" 
   private str2:string = "world" 
}
 
var obj = new Encapsulate() 
console.log(obj.str1)     // 可访问 
console.log(obj.str2)   // 编译错误， str2 是私有的

15.1.8 类和接口

interface ILoan { 
   interest:number 
} 
 
class AgriLoan implements ILoan { 
   interest:number 
   rebate:number 
   
   constructor(interest:number,rebate:number) { 
      this.interest = interest 
      this.rebate = rebate 
   } 
} 
 
var obj = new AgriLoan(10,1) 
console.log("利润为 : "+obj.interest+"，抽成为 : "+obj.rebate )

16.1 对象

对象是包含一组键值对的实例。 值可以是标量、函数、数组、对象等

16.1.1 声明

var object_name = { 
    key1: "value1", // 标量
    key2: "value",  
    key3: function() {
        // 函数
    }, 
    key4:["content1", "content2"] //集合
}

17.1 泛型

17.1.1 约定

T: 代表 "Type"，是最常见的泛型类型参数名。

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

K, V: 用于表示键（Key）和值（Value）的泛型类型参数。

interface KeyValuePair<K, V> {
    key: K;
    value: V;
}

E: 用于表示数组元素的泛型类型参数。

function printArray<E>(arr: E[]): void {
    arr.forEach(item => console.log(item));
}

R: 用于表示函数返回值的泛型类型参数。

function getResult<R>(value: R): R {
    return value;
}

U, V: 通常用于表示第二、第三个泛型类型参数。

function combine<U, V>(first: U, second: V): string {
    return `${first} ${second}`;

}

17.1.2 泛型方法

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

// 使用泛型函数
let result = identity<string>("Hello");
console.log(result); // 输出: Hello

let numberResult = identity<number>(42);
console.log(numberResult); // 输出: 42

17.1.3 泛型接口

// 基本语法
interface Pair<T, U> {
    first: T;
    second: U;
}

// 使用泛型接口
let pair: Pair<string, number> = { first: "hello", second: 42 };
console.log(pair); // 输出: { first: 'hello', second: 42 }

17.1.4 泛型类

// 基本语法
class Box<T> {
    private value: T;

    constructor(value: T) {
        this.value = value;
    }

    getValue(): T {
        return this.value;
    }
}

// 使用泛型类
let stringBox = new Box<string>("TypeScript");
console.log(stringBox.getValue()); // 输出: TypeScript

17.1.5 泛型与默认值

// 基本语法
function defaultValue<T = string>(arg: T): T {
    return arg;
}

// 使用带默认值的泛型函数
let result1 = defaultValue("hello"); // 推断为 string 类型
let result2 = defaultValue(42);      // 推断为 number 类型

18.1 命名空间（略）

19.1 模块

IShape.ts

/// <reference path = "IShape.ts" /> 
export interface IShape { 
   draw(); 
}

circle.ts

import shape = require("./IShape"); 
export class Circle implements shape.IShape { 
   public draw() { 
      console.log("Cirlce is drawn (external module)"); 
   } 
}

testshape.ts

import shape = require("./IShape"); 
import circle = require("./Circle"); 
import triangle = require("./Triangle");  
 
function drawAllShapes(shapeToDraw: shape.IShape) {
   shapeToDraw.draw(); 
} 
 
drawAllShapes(new circle.Circle()); 
drawAllShapes(new triangle.Triangle());

20.1 声明文件（略）

机器人迈克猫
关注
  • 26
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
TypeScript 学习笔记（一）：基础概述与类型系统
Programming Talk
05-19 358
TypeScript 是由微软开发的一种开源编程语言，旨在扩展 JavaScript 的功能。它增加了静态类型定义，从而提升代码的可读性、可维护性和开发效率。本系列学习笔记将带你从基础到高级逐步掌握 TypeScript 的核心概念和应用。在本篇学习笔记中，我们了解了 TypeScript 的基本概念和一些核心功能。我们从安装 TypeScript 开始，逐步介绍了类型注解、接口、类和函数的使用。下一篇学习笔记将深入探讨更复杂的类型系统以及一些高级特性。
TypeScript的学习笔记
最新发布
03-14
TypeScript的学习笔记
TypeScript学习笔记 (超详细)
l529936997的博客
08-03 1172
1、TypeScript 简介 1.1、什么是 TypeScript TypeScript 不是一门全新的语言，TypeScript 是 JavaScript 的超集，它对 JavaScript 进行了一些规范和补充。所以，学习 TypeScript 需要有 JavaScript 的基础。 TypeScript 的特性： TypeScript 是 JavaScript 的超集，它可以编译成纯 JavaScript。 TypeScript 基于 ECMAScript 标准进行拓展，支持 ECMAScrip
我的TypeScript笔记
chenxi1025的博客
05-09 619
去年换工作去参加其他公司面试，很多公司都问你会ts吗？了解ts吗？，第一家问的我一脸蒙蔽样，很老实的我回答说我不知道没有了解过，面试官一副鄙视样很受打击，回来之后我就网上查询搜索ts，搜索出来的原来ts是TypeScript ,是javascript的超集，所有使用JavaScript实现的东西TypeScript都能实现, TypeScript现在用的已经很广泛了，无论你使用n...
TypeScript笔记(一)
ljt2724960661的博客
01-05 245
TypeScript 是 JavaScript 的一个超集，主要提供了 类型系统 和对 ES6 的支持，由 Microsoft 开发。 应用：vue3.0，angular2.0 1编译型语言：编译为 js 后运行，单独无法运行;2 强类型语言;3面向对象的语言; 优势 类型系统实际上是最好的文档，大部分的函数看看类型的定义就可以知道如何使用； 可以在编译阶段就发现大部分错...
Typescript 笔记
qq_38779317的博客
07-16 307
typescript 笔记
typescript笔记
qq_31539817的博客
05-25 823
一：typescript介绍和环境搭建 1.typescript介绍 TS是属于JavaScript的超集，可以编译成纯JavaScript，TS新增了许多特性，例如数据类型、类、继承以及接口等。 2，typescript环境搭建 i.项目环境搭建 安装node.js=>全局按照typescript：npm i -g typescript ii.编写一个ts文件并编译 编写一个.ts文件=>命令行tsc b.ts=>编译成一个JavaScript文件。 iii.vscode
TypeScript笔记
qq_54889094的博客
04-18 246
TypeScript
typeScript学习笔记
04-27
TypeScript学习笔记 TypeScript是一个自由和开源的编程语言，由微软开发。它是JavaScript的一个超集，扩展了JavaScript的语法，解决了JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化。TypeScript支持...
typescript学习笔记
03-04
Typescript 学习笔记 TypeScript 是一种静态类型的编程语言，作为 JavaScript 的超集，它的主要特性是坚持与 ECMAScript 标准同步发展。下面是 TypeScript 的一些重要知识点： 一、ECMAScript 标准同步发展 * ...
TypeScript学习笔记
02-07
**TypeScript 学习笔记** TypeScript 是一种由微软开发的强类型、静态类型的超集编程语言，它扩展了 JavaScript，增加了对类、接口、泛型等面向对象编程特性的支持，并提供了更好的工具链和类型检查，以提高代码...
TypeScript笔记(1)
qq_18417627的博客
03-05 142
类型 基本类型 TypeScript与JavaScript的区别就是TypeScript更加严谨，这里的严谨体现在对每一个变量的类型要求上，定义这个变量是，就要定义这个变量的类型，而在JavaScript中，变量主要有5个原始数据类型。 布尔值，数值，字符串，null，undefined。（正经来说，对象也是一个原始数据类型，但是在ts中，对象和前几个规则差的很多，所以等下再说，还有Symbol，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

机器人迈克猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值