TypeScript学习笔记

目录

1.1TypeScript简介 

1.2配置TypeScript运行环境 

1.3 TypeScript--基本类型

string类型

数组类型

元组类型

any类型

null类型

undefined类型

1.4TypeScript表达式

变量的命名规则

变量声明

1.5运算符

三元运算符

1.6控制结构

1.7TypeScript模块化程序设计

TypeScript函数

变量的作用域

TypeScript模块

模块作用域

1.8TypeScript面向对象

TypeScript类定义

TypeScript类的实例化


1.1TypeScript简介 

  • TypeScript是由微软开发的开源编程语言 
  • 它是JavaScript的超集 
  • 通过添加静态类型检查和其他功能来增强JavaScript的功能

1.2配置TypeScript运行环境 

  • 安装nodejs

       Node.js (nodejs.org)

  • 在Windows PowerShell 里面输入

        > npm install -g typescript 

  • 安装好运行环境
  • 测试安装是否成功

       以管理员身份运行PowerShell

       >set-ExecutionPolicy RemoteSigned //选择Y

  • 在Windows PowerShell里面输入
  • >tsc --version

1.3 TypeScript--基本类型

string类型

字符串长度
let str : string = "Hello" ;
let length : number = str . length ;
字符串查找
let sentence : string = "I like TypeScript" ;
let position : number = sentence . indexOf ( "TypeScript" ); // 查找子字符串的位置, 7
let hasSubstring : boolean = sentence . includes ( "TypeScript" ); // 检查主字符串中是否存在子字符
字符串切割
let words : string [] = sentence . split ( " " ); // 将字符串切割成单词的列表, words 的值为 ["I", "like",
"TypeScript"]
模板字符串
模板字面量是用反引号( ` )分隔的字面量,允许多行字符串、 带嵌入表达式的字符串插值和一种叫带标签的模板的特殊结构。
let name : string = "John" ;
let age : number = 25 ;
let intro : string = `My name is ${name} and I'm ${age} years old.`;
const a = 5 ;
const b = 10 ;
console . log ( `Fifteen is ${a + b} and not ${2 * a + b}.` );

数组类型

TypeScript 中的数组类型可以使用以下两种方式进行定义
使用数组元素类型后面跟上[]表示数组
let numbers : number [] = [ 1 , 2 , 3 , 4 , 5 ];
使用Array<元素类型>的语法进行定义
let names : Array <string> = [ "Alice" , "Bob" , "Charlie" ];

元组类型

TypeScript 中,元组类型是指允许存储不同类型的有固定顺序的一组值的类型。可以使用元组类型来表示一个容器,其中每个位置上的元素 可以是不同的类型。

let employee : [ string , number , boolean ] = [ 'John Doe' , 30 , true ];
console . log ( employee [ 0 ]); // 输出 : 'John Doe'
console . log ( employee [ 1 ]); // 输出 : 30
console . log ( employee [ 2 ]); // 输出 : true
employee [ 1 ] = 40
employee = [ 'John Doe' , '30' , true ]; // 错误示例
元组的方法与数组的一样

any类型

1.any 类型是 TypeScript 中的一种特殊类型,可以用来表示任意类型的值。
2.需要注意的是,过度使用 any 类型会削弱 TypeScript 的类型检查能力,因此应尽量避免使用any 类型,推荐使用具体的类型来增加类型安全性。

null类型

TypeScript 中,可以使用 null 关键字表示一个变量的值为 null 。与JavaScript类似, null 表示一个空值。 可以通过联合类型将null 作为一个可选值。
let age : number | null = 18 ;
age = null ;
console . log ( age ); // 输出 : null

undefined类型

undefined 类型表示变量未被赋值或没有值的情况。 在TypeScript 中声明的 undefined 类型变量,在编译为 JavaScript 后,会对应为JavaScript 中的 undefined 值。
let x : number ; // 声明一个变量 x ,类型为 number ,默认值为 undefined
console . log ( x ); // 输出 undefined
let y : number | undefined = undefined ; // 声明一个变量 z ,类型为
number undefined ,默认值为 undefined
console . log ( y ); // 输出 undefined

1.4TypeScript表达式

变量的命名规则

TypeScript变量的命名规则遵循以下规则:

1. 变量名必须以字母、下划线(_)或者美元符号($)开头。不能以数字开头。

2. 变量名可以包含字母、数字、下划线(_)或者美元符号($)。

3. 变量名是区分大小写的,例如myVariable和myvariable是不同的变量名。

4. 变量名应该尽量使用驼峰命名法,即首字母小写,后续单词首字母大写,例如myVariableName。

5. 尽量避免使用保留字或者关键字作为变量名,例如var、let、if等。

6. 建议给变量名赋予有意义的名称,以便于他人理解代码的含义。

变量声明

在TypeScript中,变量的声明可以使用三种关键字:var,let和const。

var关键字声明的变量是函数作用域或全局作用域的变量,使用var关键字声明变量的语法格式为:

var 变量名[:类型] [=初始值];

使用let关键字声明变量的语法格式为:

let变量名[:类型] [=初始值];

使用const语法格式:

const 常量名[:类型] = 初始值;

在使用const声明常量的同时一定要进行初始化,否则会报错

-声明变量的类型,但没有初始值,变量值会设置为 undefined。

-声明变量并设置初始值,但不设置类型,该变量会根据值的类型进行推 断。

-声明变量没有设置类型和初始值,类型可以是任意类型,默认初始值为 undefined。

-变量声明语法格式还可以省略类型部分,因为TypeScript具有类型推断功能,可以根据初始值的类型自动推断变量的类型。

1.5运算符

三元运算符

在TypeScript中,有一个三元运算符(也称为条件运算符)可以用于根 据条件选择不同的值。

三元运算符的语法是:

condition ? value1 : value2

如果条件(condition)为真,则返回value1;否则返回value2。

三元/条件运算符只能用于返回一个值,不能用于控制流程或执行其他操作。

例:let variable = age >= 18 ? "成年人" : "未成年人"

1.6控制结构

分支结构:if-else, switch-case

循环结构:for, while, do-while, for.......of

例:const arr = [1, 2, 3];

       for (let num of arr) {

           console.log(num);

       }

1.7TypeScript模块化程序设计

TypeScript函数

函数声明

函数声明使用关键字function后面跟上函数名、参数列表和返回值类型。

函数调用的时候,我们直接输入参数

function add(x: number, y: number): number {

    return x + y;

}

console.log(add(1, 2)); // 输出: 3

函数表达式

函数表达式可以将函数赋值给变量,可以使用箭头函数(Arrow Function)或普通函数来定义。

const add = function(x: number, y: number): number

{

    return x + y;

}

箭头函数

箭头函数是一种更简洁的函数表达式写法,使用箭头=>来定义函数。

const add = (x: number, y: number): number => {

    x + y;

}

函数参数特性

function greet(name?: string)-在函数调用的地方,我们可以选择不传入参数或者传入一个字符串。

function multiply(a: number, b: number = 1)  -multiply函数接受两个参数a和b,其中b的默认值为1在函数调用的地方,我们可以只传入一个参数,这样b将使用默认值1进 行计算,或者传入两个参数进行乘法操作。

变量的作用域

  在TypeScript中,变量的作用域决定了变量在何处可见和可访问。根据定义的位置以及是否使用关键字来声明变量的方式,TypeScript有以下几种类型的作用域:

-全局作用域

-函数作用域

-块级作用域

-模块作用域

TypeScript模块

在TypeScript中,模块是用来组织和管理代码的一种机制。

-模块可以包含变量、函数、类和接口,并且可以通过导出和导入来共享和使用这些模块中的成员。


模块作用域

在TypeScript中,每个文件都被视为一个模块。

文件内声明的变量默认具有模块作用域,只在该模块内可见。这种变量可以被其他模块引入后访问。

1.8TypeScript面向对象

TypeScript类定义

--TypeScript中,类定义开始于class关键字,后面跟着类名。

--类中可以定义属性、构造函数方法

--属性定义由属性名和类型组成。属性可以在类的构造函数中初始化。

--构造函数指定在创建类的实例时要执行的代码,用于初始化类的属性

--方法定义由方法名、参数列表、返回类型和方法体组成。方法体是方法的具体实现。

--在类的方法中可以使用this关键字来引用类的属性

--TypeScript还支持访问修饰符(如public、private和protected),可以用于限制对类的属性和方法的访问。

TypeScript类的实例化

class MyClass {

        constructor(public name: string) {}

        printName() {

                console.log(this.name);

        }

}

// 实例化 MyClass 对象

const myObj = new MyClass("John");

myObj.printName(); // 打印 "John"

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值