【JavaScript和TypeScript学习总结】-CSDN博客

本文链接：https://blog.csdn.net/weixin_62936745/article/details/131398497

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

JavaScript是什么？

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码，可以改变html悲痛。JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

TypeScript是什么？

TypeScript在ES6基础上做了升级，而ES6是基于ES5进行的升级，它可以编译成JavaScript代码。

TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的。

TypeScript对比JavaScript

TypeScript属于静态类型的编程语言，JavaScript属于动态类型的编程语言。

静态类型：编译期做类型检查
动态类型：执行期做类型检查
代码先编译后执行（执行编译后的代码）
TS在代码编译的时候（代码执行前）就可以发现错误（早）

JS在代码执行的时候（编译后执行时）才能发现错误（晚）

一、使用JavaScript

如果要在HTML中引入JavaScript，则有两种方式：

（1）内部引入：JS代码直接在HTML中编写；

导入的结构如下：

<script language="JavaScript">  
    ....  
</script>

一般JS代码都放在head标签中；

（2）外部引入：JS代码在外部编写后导入到HTML中；

[javascript]  view plain copy
<script language="JavaScript" src="1.js">  
....  
</script>

二、JavaScript语法

1.跳出提示框 alert

在JavaScript中，使用的最多的就是alert，此语句会使得浏览器弹出一个提示框；

alert(“Hello world!!!” );就能弹出一个Hello world!!!的提示框；

<html>  
    <head>  
        <title></title>  
        <script language="JavaScript">  
            alert("欢迎光临！");  
            alert("谢谢！");  
        </script>  
    </head>  
</html>

2.页面输出内容 document.write()

此语句可以直接向页面输出内容；比如：

document.write(“

Hello world!!!

”); 就可以在页面中显示Hello world!!!

此语句和JSP中的out.println()非常类似；

<html>  
    <head>  
        <title></title>  
        <script language="JavaScript">  
            document.write("<h3>Hello world!!!</h3>");  
        </script>  
    </head>  
</html>

3.定义变量 var

(1)var num1 = 5; num1的类型就是整数；

(2)var str1 = “Hello world!!!”; str1的类型就是字符串；

<html>  
    <head>  
        <title></title>  
        <script language="JavaScript">  
            var num1 = 5;  
            var str1 = "Hello world!!!";  
            alert(num1);  
            alert(str1);  
        </script>  
    </head>  
</html>

4.函数声明

形式如下：

function(参数…){

[返回值;]

}

注意：

(1)参数也不能声明类型，只需要写明参数的名称即可；

(2)函数声明并看不出是否有返回值，在实现中，如果有返回值，则return；

<html>  
    <head>  
        <title></title>  
        <script language="JavaScript">  
            function fun(i){  
                alert("欢迎"+i);  
            }  
            fun("xiazdong");  
        </script>  
    </head>  
</html>

5.数组 Array

数组的初始化有两种方式：

（1）静态初始化：var arr = new Array(“1”,“2”,“3”); 直接赋值；

（2）动态初始化：var arr = new Array(length); 只声明长度；后来在赋值；

如果是动态初始化，一开始数组的元素内容是“undefined”；

输出数组内容：注意：arr.length返回数组长度；

for(i=0;i<arr.length;i++){

arr[i] …

}

<html>  
    <head>  
        <title></title>  
        <script language="JavaScript">  
            var arr = new Array(3);  
            var str = "";  
            for(i=0;i<arr.length;i++){  
                arr[i]=i;  
            }  
            for(i=0;i<arr.length;i++){  
                str=str+arr[i]+"、";  
            }  
            alert(str);  
        </script>  
  
    </head>  
</html>

三、JavaScript事件

1.body包含的事件

(1)onLoad：打开网页时调用；
(2)onUnLoad：关闭网页时调用；

2.表单提交事件 onSubmit

当点击表单的submit按钮时，就会除触发onSubmit事件，并调用某函数，通常此事件用于验证操作；

补充：

在JavaScript中获得表单控件的值:可以通过层层递进的方式获得；

document是文档的根节点；

比如：

<form action="" method="post" onSubmit="fun(this)" name="f">  
            <input type="text" name="name"/><br />  
            <input type="radio" name="radiobutton"/>男<br />  
            <input type="radio" name="radiobutton"/>女<br />  
            <input type="button" value="显示" onClick="show()"/>  
        </form>

（1）获得文本控件的值： document .f.name. value 即可获得；
（2）获得单选按钮中的“男”按钮的值：document.f.radiobutton[0].value;

（3）获得单选按钮中的“女”按钮的值：document.f.radiobutton[1].value;

（4）判断单选按钮中的“男”按钮是否选中：document.f.radiobutton[0].checked;

3.单击事件 onClick

当单击某个控件，则触发该事件；

(1)在中触发onClick;

(2)在button中触发onClick;

4.下拉列表事件 onChange

此事件在下拉列表的值改变时触发；

<html>  
    <head>  
        <title></title>  
        <script language="JavaScript">  
            function fun(v){  
                alert(v);  
            }  
              
        </script>  
        <form action="" method="post"  name="f">  
            EMAIL:<input type="text" name="name"/><br />  
            <select name="favor" onChange="fun(this.value)">  
                <option value="a">a</option>  
                <option value="b">b</option>  
                <option value="c">c</option>  
  
            </select>  
            <input type="submit" value="提交"/>  
        </form>  
    </head>  
    <body >  
          
    </body>  
</html>

四.TypeScript中的数据类型

1.五中常见的基础类型

// : string 为类型注解，表示变量name1为字符串类型。
// 在TS中，一旦为变量添加了类型注解，这个变量的类型就不能发生改变，否则编译就会报错。
let name1: string = 'xiaozhu'; // 字符串类型
let name2: string = `xiaozhu`; // 模版字符串
let age: number = 18; // 数值类型
let cool: boolean = true;  // 布尔值
let u: undefined = undefined; // Undefined
let n: null = null; // Null

2.数组

// TypeScript像JavaScript一样可以操作数组元素。有两种方式可以定义数组。 
// 第一种，可以在元素类型后面接上 []，表示由此类型元素组成的一个数组：
let arr1: number[] = [1, 2, 3]; // 数组
// 第二种方式是使用数组泛型，Array<元素类型>：
let list: Array<number> = [1, 2, 3];

3.联合类型


// 有小括号，表示首先是数组，然后数组中可以出现number和string类型的元素
let arr2: (number | string)[] = [1,3,'a','c']
let arr3: (number | string)[] = [1,3]
let arr4: (number | string)[] = ['a','b']
// 没有小括号，既可以是number 又可以是 string数组（数组中的元素必须是string类型）
let arr5: number | string[] = ['a','b','3']
let arr6: number | string[] = 123

4.元组（Tuple）

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同,使用元组能帮助我们进一步提升数组结构的严谨性。

let array7: number[] = [1,2,3,5]; // 有局限性

// 使用元组，当能够确切的知道包含都少个元素，以及特定索引对应的类型时，需要使用元组
let position1: [ number,number ] = [12, 13] // OK，数组中第一个和第二个都是数值
let position2: [ number,string ] = [12, '13'] // OK ,数组中第一个是数值、第二个字符串
let position3: [ number,string ] = ['12', 12] // Error，跟元组类型对应类型不一致
let position4: [ number,string ] = [12,'13',14] // Error，跟元组类型对应类型以及元素个数不一致。

5.any与void

any:表示任意类型,当我们不满楚某个值的具体类型的时候我们就可以使用
void:当一个函数没有返回值时，通常会见到其返回值类型是void

export default{}
//any类型
//any表示任类型,当我们不清楚某个值的具体类型的时候我们就可以使用any1/在TS中任何数据类型的值都可以负责给any类递
 
//场景一
//变量的值会动态改变时,比如来自用广的输入,任意值类型可以让这些变量H过编邘阶段的类型松查
let temo:any;
temp="刘亦菲" //字符串类型
temp = 18; //数字类型
temp = true //布尔类型
console.log(temp);
 
//场景二
//改写现有代码时,任意值允许在编译时可选挥地彩含或移除类型检查
let x:any = 4;
//x.ifItEsis() //正确 ifItEsis方法在运行时还可能存在，但这里并不会检查
x.toFixed()  //正确
 
//场景三
//定义存储各种类型数据的数组时
let beautyList:any[]=[1,false,'fine'];
beautyList[1]=100;
console.log(beautyList)

export default{}
//void类型
//某种程度上来说,void类型像是与any类型相反,它表示没有任何类型。
//当一个函数没有返回值时,你通常会见到其逐回值类型是void
//在TS中只有null 和 undefined可以赋值给void类型
function makeMoney():void{
    console.log("I want");
    //return "100k" //报错   
}
makeMoney()
 
let value:void;
//定义了一个不可以保存任意类型数据的变量，只能保存null和undefined
// value = 100;//报借
// value =“杨";//报错
// value = true;//报错
//注意点:null和undefined是所有类型的子类型，所以我们可以将null和undefined赋值给任意类型
//严格模式下会null报错
// value= null;//不会报错
value = undefined;//不会报错
console.log(value);

6.null和undefined

TypeScript里,undefined和null两者各自有自己的类型分别叫做undefined和null。

xport default{}
 
// TypeScript里,undefined和null两者各自有自己的类型分别叫做undefined 和null.
//和 void相似,它们的本身的类型用处不是很大
let x:undefined = undefined;
let y:null = null;
 
// x="留";
// x=18;
// y="liu";
// y=19
 
//非严格模式下，可以拍 null和undefined值给number类型的变量。
let money :number=100;
money= null;
money = undefined
// console.log(money);

7.never与object

never类型:
表示的是那些永不存在的值的类型;
never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型; 变量也可能是never类型,当它们被永不为真的类型保护所约束
object类型:
object表示非原始类型，也就是除number , string, boolean，symbol,null或undefined之外的类型定义了一个只能保存对象的变录

export default{}
//Never关型
//never类型表示的是那些永不存在的值的类型
//例如: never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型
//变量也可能是never类型,当它们被永不为真的类型保护所约束时。
//注意点: never类型是任何类型的子类型，也可以赋值给任何类型，然而，没有类型是never的子类型或可以赋值给never类型(除了never本身之外）。
//即使any也不可以赋值给never
 
//返回never的函数必须存在无法达到的终点
function error(message:string):never{
    throw new Error(message)
}
error("鞠婧祎");
 
//推断的返回值类型为never
/* function fail(){
    return error("Somethimg failed")
} */
 
//返回never的函数必须存在无法达到的终点
function infiniteLoop():never{
    while (true) {
        
    }
}
 
//object类型
//表示一个对象
//定义了一个只能保存对象的变量
let goddess;
//goddess=true;
// goddess="刘亦菲";
// goddess=18;
goddess = { name: "刘亦菲", age: 18 };
console.log(goddess);

8.枚举

enum类型是对JavaScript标准数据类型的一个补充。像C语言一样，使用枚举类型可以为一组数值赋予友好的名字。

export default{}
//1.数值类型 1=男  2=女
/* enum Gender{
    Male,  //男
    Female //女
}
/* let sex;
sex=1; //男
sex=2; //女
 */
/* let gender:Gender;
gender=Gender.Male;
gender=Gender.Female; */
 
/*
本质枚举类型是数字，所以数字是可以的 
gendder="666";
gender=true; */
// gender=10; */
 
// ts中的枚举类型的取值默认是从上至下，从0开始
// 且然默认是从0开始远递增的，但是我们也可以手动的指定枚举的取值的值
// 如果手动指定了前面枚举值的取值，那么后面枚举值的取值会根据前面的值来递增
/* enum Gender{
    Male,  //男
    Female //女
}
console.log(Gender.Male);   //0
console.log(Gender.Female); //1
 */
 
 
// 我们还可以同时修改多个枚举值的取值，如果同时修改了多个，那么修改的是什么最后就是什么
 
/* enum Gender{
    Male=2,  //男
    Female=3 //女
}
console.log(Gender.Male);   //2
console.log(Gender.Female); //3
 */
 
 
/* enum Gender{
    Male,  //男
    Female //女
}
console.log(Gender.Male);   //0
console.log(Gender[0]); //字面量Male
 */
 
/* 
 enum Gender{
    Male,  //男
    Female //女
}
const getNum=()=>200
let gender:Gender;
gender=Gender.Female;
gender=100;
gender=getNum();
 */
 
 
//2. 字符串枚举
 
enum Direction{
    Up="Up",
    Down="Down"
}
console.log(Direction.Up);
console.log(Direction.Down);
console.log(Direction[0]);
console.log(Direction["Up"]);
 
let x:Direction;
x=Direction.Down;
// x="左"; //报错
 
// const getDirectin=()=>"右";
// x=getDirectin() //报错
 
//3. 异构枚举
//枚举中既包含数字又包含字符串,我们就称之为异构校举
//注意点:如果是字符串校举,那么无法通过原始值获取到枚举值
enum Gender{
    Male=1,
    Female="女"
}
console.log(Gender.Male);
console.log(Gender.Female);
console.log(Gender[1]);
console.log(Gender["女"]);

           数字枚举
            1.数字枚举的取值可以是字面量,也可以是常量,也可以是计算的结果

            2.如果采用字面量对第一个成员进行赋值,卜面的成员会自动递增

            3.如果采用常罩或计算结果进行赋值,奥则下面的成员也必须初始化

    字符串枚举
            1.如果采用字面量对第一个成员进行赋值,下面的成员也必须赋值

            2.采用[index]的形式不能获取到内容,需要传入[key]
            3.字符串枚举不能使用常量或者计算结果给枚举值赋谊

            4它可以使用内部的其它枚举值来赋值

五.Typescript的接口

1.接口的基本使用

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具休的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。

export default{}
//什么是接口?
//接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具休的类去实现，
//然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法
interface IFullName{
    firstName:string
    lastName:string
}
let goddassName:IFullName={
    firstName:"刘",
    lastName:"一飞"
}
console.log(goddassName.firstName,goddassName.lastName);
function say({firstName,lastName}:IFullName):void{
    console.log(`我的女神是${firstName}${lastName}`);   
}
say(goddassName)

2.可选属性与只读属性

            可选属性使用:?

            只读属性使用: readonly

        readonly与const的区别:做为心量使用的话用const，若做为属性则使用readonly
        
        readyonly与const区别：

       看要把它做为变量使用还是做为一个属性

        做为变量使用的话用const

        若做为属性则使用readyonly

//可选属性 使用？来进行修饰
interface IFullName{
    firstName:string
    lastName:string
    age?:number
}
let goddassName:IFullName={
    firstName:"秋",
    lastName:"淑珍"
}
console.log(goddassName.firstName);
console.log(goddassName.lastName);
 
//只读属性  readonly
interface IInfo{
    readonly uname:string;
    readonly uage:number
}
let beauty:IInfo={
    uname:"邱淑贞",
    uage:18
}
console.log(beauty.uname);
console.log(beauty.uage);
//beauty.uname="赵丽颖";//报错

3.索引签名

export default {}
//解决参数可多可少的问题//
// 方案一:使用可选参数
interface IFullName{
    firstName:string
    lastName: string
    age ? : number
}
let goddass1:IFullName={firstName:"刘",lastName:"亦菲",age:18}
let goddass2:IFullName={firstName:"刘",lastName:"亦菲"}
console.log(goddass1);
console.log(goddass2);
 
//方案二:使用变量
let info={firstName:"杨",lastName:"幂", age:18,song:"爱的供养"};
let goddass3:IFullName=info;
console.log(goddass3);
 
//方案三:使用类型断言
let godass4:IFullName=({firstName:"杨",lastName:"幂" ,age:18,song:"爱的供养" ,tv:"仙剑奇侠传三"}) as IFullName;
console.log(godass4);
 
//索引签名
interface IBeauty{
    [ props:string]: string
}
let goddass5={name1:"刘亦菲", name2: "刘诗诗" , name3: "赵丽颖"};
 
interface IAge{
    [ props:string] : number
}
let ages={age1: 10,age2: 20,age3: 30}
 
interface IMyFullName{
firstName : string
lastName: string
[props :string]: string
}
let goddass6:IMyFullName={firstName: "刘",lastName:"亦菲" ,sex:"女"}
let goddass7: IMyFullName={firstName: "刘", lastName: "亦菲",tv:"甄嬛传"}

4.函数接口

            为了使用接口表示函数类型,我们需要给接口定义一个调用签名。
            它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。

export default {}
//定义函数接口
interface IMakeMoney {
    (salary: number, reward: number): number
}
let sum: IMakeMoney = function (x: number, y: number): number {
    return x + y;
}
let res = sum(100, 1000);
console.log(res);

5.接口的继承

            接口继承就是说接口可以通过其他接口来扩展自己。

                Typescript允许接口继承多个接口。

                继承使用关键字extends。

export default {}
/*
    接口继承就是说接口可以通过其他接口来扩展自己。
    Typescript允许接口继承多个接口。
    继承使用关键字extends。    
*/
//单继承
interface IPerson {
    age: number
}
interface IName extends IPerson {
    name: string
}
let person: IName = {
    name: "王思聪", age: 18
}
 
//多继承
interface IFatherMoney {
    m1: number
}
interface IMontherMoney {
    m2: number
}
interface ISonMoney extends IFatherMoney, IMontherMoney {
    s1: number
}
let sonMoney: ISonMoney = {
    m1: 1000,
    m2: 10000,
    s1: 1
}
console.log(`儿子共有${sonMoney.m1 + sonMoney.m2 + sonMoney.s1}`)

总结

Javascript是一门基于对象和事件驱动的编程语言，常用于前端Web开发。我最初学习Javascript时，主要是通过阅读网上的教程和参考书籍。我发现在学习Javascript时要强调理解概念，这样才能更好地应用这门语言。

首先，我学习了Javascript的基本语法，包括变量和数据类型、运算符、数组、函数、对象、DOM和事件等。通过学习这些基本概念，我可以更好地理解Javascript的工作原理以及如何使用它来编写Web应用。其中，DOM和事件是我觉得最重要的知识点，因为它们是Web开发中最常用的东西之一，了解它们可以让我更好地开发网页。

然后，我尝试使用Javscript来构建一些小型的Web应用，例如Todo应用和简单的JavaScript游戏。这样可以让我更好地理解如何应用Javascript来构建实际应用，并学习如何调试和优化Javascript代码。

另外，我也学习了Typescript，这是一种静态类型编程语言，可以让我们更加规范和安全地开发Javascript应用程序。通过Typescript，我学习了类型注释、接口、类、泛型等重要概念。它们让我能够更清晰地规划我的代码，消除许多潜在的错误。我发现，学习Typescript并不难，只要能掌握基本概念，就可以自如地应用它来开发复杂的应用程序。

除了学习Javascript和Typescript的概念知识外，我也学习了一些实践经验，例如如何使用调试工具和如何使用第三方库和框架。这些工具和框架可以帮助我们更快地构建应用程序，提高开发效率。我也发现，在学习编程语言时要鼓励自己去阅读源代码和文档，这样才可以更好地学习新技术。

总的来说，在学习Javascript和Typescript时，我认识到理解概念非常重要。如果能够理解它们的基本概念和原理，我们就能更好地掌握它们，写出更加高质量的代码。同时，随着实践经验的积累，我们也可以逐渐积累更多经验和技能，做出更好地成绩。