Typescript教程(2023-1-15)

第一章：Typescript概述

1.TS介绍

1.Typescript是以JavaScript为基础构建的语言，Typescript扩展了JavaScript并添加了类型，可以在任何支持JavaScript的平台中执行，TS不能被js解析器直接执行，因此要把ts转换为js代码来执行
2.ts增加了类型，面向对象的

ts开发环境搭建：下载node.js  安装node.js 进入命令行 输入 npm i-g typescript  创建一个ts文件 使用tsc对ts进行编译



2.基本类型：类型声明

let a:number;//这个声明了一个变量a，同时指定他的类型为number
//因为a的类型设置为了number 在以后的使用过程a的值只能是数字
a=10;
// a='hello';//这个就是报错，因为类型不匹配
console.log(a);

let b:String;
b='计算机科学与技术';
console.log(b);
//如果变量的声明和赋值是同时进行的，ts可以自动对变量进行类型检测





function sum(x :number,y:number) {
    return x+y;
}

function sum1(x :number,y:number):number {//声明了函数返回值类型
    return x+y;
}

console.log(sum(1, 23));




//使用字面量来进行类型声明
let a:10;
a=10;

//也可以使用 | 或来连接多个字符、
let b: boolean|string;//这个语句读作b的类型可以是布尔值也可以是字符串
b=true;
b='计算机科学与技术';


//any 任何类型，任意赋值，一个类型设置为any后相当于对变量关闭了ts的类型检测  不建议使用
let  d:any;
//也就是d变量可以随意赋任意类型的值
d=true;
d='计算机科学与技术';
d=2;

//声明变量如果不指定类型，则ts解析器会自动判断变量的类型为any



//unknown 表示未知类型的值  这个就是一个类型安全的any
let e:unknown;
e=10;
e='计算机科学与技术';
e=true;

//类型断言 可以用来告诉解析器变量的实际类型
let s;
s=e as string;


//void
function fn() :void{//返回值为空值
    return null;
}

//never表示永远不会返回结果
// @ts-ignore
function fn2() :never{
    
}

2.环境搭建

1.下载node

2.安装node

#3.进入 终端  输入 npm i -g typescript
		--npx tsc -v查看版本号  检测安装是否成功
4.创建一个ts文件
5.使用tsc 对文件进行编译
		终端在当前文件打开输入：----node 文件名

3.TS中的类型声明

let    a;
a=10;

// a="hello"  这个代码会报错  原因就类型不匹配

console.log(a)

let b:string;//把b的类型变为字符串
b="计算机科学与技术学院"

console.log(b);


//声明变量追进行赋值
let c: boolean=false;
console.log(c);

//如果变量的声明和赋值是同时进行的  ts可以自动对变量进行类型检测

//js中的函数是不考虑参数的类型和个数的
function fn(a,b){

    return a+b;

}

console.log(fn(12, 34));


function sum(a:number,b:number){

    return a+b;
}

console.log(sum(123, 223));


//还可以指定 函数的返回值
function f(a:number,b:number):number {//指定函数的返回值为number

    return a+b;

}

console.log(f(123, 456));

3.TS的类型声明-1

let a:string

//直接使用字面量进行类型声明
let b:10;
b=10;//这个不报错
// b=11  这个就是报错  原因就是已经定义过了



//可以使用|来连接两个数类型
let c:"male" | "female";
c="male"
c="female"


let d:boolean|string//这个就是限制d的类型是布尔或者字符


//any 表表示任意类型  一个变量设置类型为any相对于对该变量关闭了ts的类型检测
let y:any
//在使用ts时  不建议使用any类
y='哈哈哈'
//声明变量如果不指定类型 则ts解析器会自动判断变量类型为any (隐式的any)



//未定义类型
let e:unknown;
e=10



//unknown时候收纳盒就是一个类型安全的any
//unknown类型的变量 不能追赋值给其他变量


//类型断言  高速编译器 e就是字符串  直接强行赋值
d=e as string
d=<string>e//两种写法完全等价




/*
* void用来表示  以函数为例  就表示没有返回值的函数
*
* */
function fn1():void{//这个就是设置了函数的返回值为空  没有返回值


}


//never  表示永远不会有结果
function fu2():never{

    throw new Error("报错了？？")//有这种情况用never就可以

}

4.TS的类型声明-2

//object 表示一个对象
let a:object;
a={};
a=function fn() {
    console.log("对象")
}


//{}用来指定对象中可以包含那些属性
let b:{name:string};//这个对象可以指定属性
b={name:'吴邪'}
console.log(b);
//在属性后面加上 一个? 代表属性是可选的
let c:{name:string,age?:number,[proName:string]:any}
//[proName:string] any 表示任意类型的属性



/*
* 设置函数结构的类型声明：
*       语法：(形参:类型,形参：类型...)=>返回值
*
* */
let d:(a:number,b:number)=>number
d=function g(n1,n2){
    return n1+n2
}
console.log(d(12,67))


//string[] 表示字符串类型
let e:string[]
e=['a','b','c']


//number[]  表示数值数值
let f:number[];
let g:Array<number>;

/*
* 数组的类型声明：
*       --类型[]
*
* 元组：就是固定长度的数组
*       语法:[类型，类型 ，类型]
* */
let h:[string,string];
h=['hello','计算机'
]
console.log(h);

/*
* 枚举
*       enum
* */

let i:{name:string,gender:string};
i={

    name:'孙悟空',
    gender:'男'
}

console.log(i.name)

//定义枚举：
enum Gender{
    Male,
    Femle,
}
let j:{name:string,gender:Gender};
j={
    name:'吴邪',
    gender:Gender.Femle

}

console.log(j.gender===Gender.Femle)


//&表示且 这样子是没有意义的
let k:{name:string}&{number:number};


//类型的别名
type myType=string
let o:1|2|3|4|5
let l:1|2|3|4|5
let m:myType//起名来代替

5.TS编译选项-1

console.log("hello")

//在终端编译ts的时候  可以这样子 tsc  文件.ts -w  就可以自动编译

let a=10
var c="计算机科学"
console.log(c);

let obj:{
    name:'吴邪',
    age:19

}
console.log(obj.age)


//终端输入  tsc  直接就可以把全部ts文件编译  但是要完成这个操作 需要建立一个ts的配置文件

{

/*
tsconfig.js是ts编译器的配置文件 ts编译器可以根据它的信息来对代码进行编译

        --  "include": []用来绝对那些ts文件需要编译 /**表示任意目录
                * 表示任意文件

*/


    "include": [
        "./src/**/*"
    ],

//    这个是可选的
    "exclude": [
        "./src/hello/**/*"//表示被排除的文件 不需要被编译的文件目录
    ],

    "extends": ""//表示继承那个文件
}

6.TS编译选项-2

{
/*
tsconfig.js是ts编译器的配置文件 ts编译器可以根据它的信息来对代码进行编译
        --  "include": []用来绝对那些ts文件需要编译 /**表示任意目录
                * 表示任意文件
*/
    "include": [
        "./src/**/*"
    ],
    /*
    "compilerOptions": {} 编译器的选项
    */
"compilerOptions": {
    "target": "ES2020",//用来指定ts被编译为es的版本
    "module": "ES2020",//module指定使用的模块化规范
    "lib": ["dom"],//指定需要使用的库  一般不需要去设置
    "outDir": "",//用来指定编译后文件所在目录  前提是要文件目录存在

//    文件输出目录

    "outFile": "",//将代码合并为一个文件 设置outFile后 所有的全局作用域中的代码会合并到同一个文件中

    "allowJs": false,//是否对js文件进行编译  默认不编译


    "checkJs": false,//是否检查的js是否符合语法规范

    "removeComments": false,//是否移除注释 true 是    FALSE 否

    "noEmit": false,//不生成编译后文件
    
    "noEmitOnError": false,//当有错误时 不生成编译后的文件
}
}

7.TS编译选项-3

{
/*
tsconfig.js是ts编译器的配置文件 ts编译器可以根据它的信息来对代码进行编译
        --  "include": []用来绝对那些ts文件需要编译 /**表示任意目录
                * 表示任意文件
*/
    "include": [
        "./src/**/*"
    ],
    /*
    "compilerOptions": {} 编译器的选项
    */
"compilerOptions": {
    "target": "ES2020",//用来指定ts被编译为es的版本
    "module": "ES2020",//module指定使用的模块化规范
    "lib": ["dom"],//指定需要使用的库  一般不需要去设置
    "outDir": "",//用来指定编译后文件所在目录  前提是要文件目录存在

//    文件输出目录

    "outFile": "",//将代码合并为一个文件 设置outFile后 所有的全局作用域中的代码会合并到同一个文件中

    "allowJs": false,//是否对js文件进行编译  默认不编译


    "checkJs": false,//是否检查的js是否符合语法规范

    "removeComments": false,//是否移除注释 true 是    FALSE 否

    "noEmit": false,//不生成编译后文件
    
    "noEmitOnError": false,//当有错误时 不生成编译后的文件

    "alwaysStrict": false,//用来设置编译后文件是否使用严格模式 默认为false


    "noImplicitAny": false,//不允许隐式的Any类型


    "noImplicitThis": false,//检查隐式的this

    "strictNullChecks": false,//非空检测

    "strict": false,//严格检查的总开关  只要一设置true所有检查都会打开
}
}

8.使用Webpack打包代码

1.终端输入：npm init -y
		在输入：npm i -D		安装开发依赖
		在输入：npm i -D webpack webpack-cli typescript ts-loader  安装好依赖之后
		
		
	
//1.先引入一个包
const path=require('path')

module.exports={

//    在webpack中的配置信息都应该写在这里


//  指定入口文件
    entry: "./src/index.ts",


//    指定打包文件位置

output:{

//        指定打包后的文件目录
    path:path.resolve(__dirname,'dist'),

//    指定打包后文件名字
    filename:"bundle.js"

},


//    指定Webpack打包时 使用的模块
    module:{

    //    指定要加载的规则
        rules:[
            {
                //这个指定是规则生效的文件
                test:/\.ts$/,
                //要使用的loader
                use:'ts-loader',

            //    要排除的文件夹
                exclude:/node-modules/


            }

        ]

    }

}

 

{
  "name": "pro-3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",

  "build":"webpack"//书写这个 构建代码
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^9.4.2",
    "typescript": "^4.9.4",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  }
}

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

终端输入npm run build运行

9.Webpack打包代码-2

安装Webpack插件：
终端输入：npm i -D html-webpack-plugin

	
//1.先引入一个包
const path=require('path')


//2.引入html-Webpack插件
const HTMLWebpackPlugin=require('html-webpack-plugin')

module.exports={

//    在webpack中的配置信息都应该写在这里


//  指定入口文件
    entry: "./src/index.ts",


//    指定打包文件位置

output:{

//        指定打包后的文件目录
    path:path.resolve(__dirname,'dist'),

//    指定打包后文件名字
    filename:"bundle.js"

},


//    指定Webpack打包时 使用的模块
    module:{

    //    指定要加载的规则
        rules:[
            {
                //这个指定是规则生效的文件
                test:/\.ts$/,
                //要使用的loader
                use:'ts-loader',

            //    要排除的文件夹
                exclude:/node-modules/


            }

        ],
    },

    plugin: [
        //配置完毕后  自动生成html文件
        new HTMLWebpackPlugin(),

    ]

}



插件： npm i -D clean-webpack-plugin  可以做到实时更新最新文件

10.Webpack打包代码-3

终端输入：
	npm i -D @babel/core @babel/preset-env babel-loader core-js