TypeScript学习
1 安装环境
a 首先安装node.js
node.js 用来将ts文件解析成js文件 供浏览器使用;
解析ts文件 tsc filename.ts
b. 使用npm (node.js的包管理器)下载typescript,安装完node.js 就已经安装好了nmp
下载命令为: npm install -g typescript
2语法:
// let {变量名} :{类型}
let a:number;
a=10;
let b='hello';
// 定义参数和返回值的类型
//function {方法名称}({形参}:{类型},...):{方法返回值数据类型}
function sum(a:number,b:number):number
{
return a+b;
}
let any: any; //关闭ts 使用js 动态类型 不建议使用
let unk: unknown; //不能赋值给其他类型
//字面量 “|”联合类型
let bs: boolean | string;
bs = false;
bs = 'hello'
console.log(` let bs: boolean | string return : ${bs}`);
//断言
/*告诉解析器变量的实际类型
* 变量 as Type
* <Type>变量
*/
user = bs as string;
user = <string>bs;
3 编译 tsconfig.json
在根目录配置tsconfig.json 直接执行tsc 可以编译配置文件中配置的文件
{
"include": ["./src/**/*"],
"compilerOptions": {
"outDir": "./dist",
"target": "es6",
...
}
}
4 webpack 配置
1、npm 初始化目录 生成一个webpack.json文件
npm init -y
webpack.json 用来配置项目基本信息,命令,项目依赖等
2、npm 安装依赖库 webpack webpack-cli typescript tsloader
npm i -D webpack
npm i -D webpack-cli
npm i -D typescript
npm i -D ts-loader
3、编辑webpack.config.js 文件
const path=require("path");
//webpck 所有的配置信息都应该写在module.exports中
module.exports= {
mode:'devlopment',
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/,
}]
}
}
4、编辑tsconfig.json
{
//编译根目录下所有文件
"include": ["./src/**/*"],
"exclude":["./node_modules/"]
//编译选项
"compilerOptions": {
"outDir": "./dist",//编译后文件的输出目录为根目录下的dist
"target": "es6",// 编译为es6版本的js
"noImplicitAny": true
}
}
5、webpack.json添加命令 “scripts”节点下
"build":"webpack"
6 运行打包程序
nmp run build
进阶:
安装html-webpack-plugin
生成引用文件的html
安装webpack-dev-server
使用npm作为开发服务器 启动项目
安装babel 可以配置处理浏览器兼容性
相关知识:
.ts
扩展名的文件为 TypeScript代码文件
https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html
npm run dev ‘npm'是什么
npm是干什么的?为什么要使用npm?(适合不太了解 npm 的新人阅读)
安装完node.js之后就已经安装好了npm
NPM 的思路大概是这样的:
-
买个服务器作为代码仓库(registry),在里面放所有需要被共享的代码
-
发邮件通知 jQuery、Bootstrap、Underscore 作者使用 npm publish 把代码提交到 registry 上,分别取名 jquery、bootstrap 和 underscore(注意大小写)
-
社区里的其他人如果想使用这些代码,就把 jquery、bootstrap 和 underscore 写到 package.json 里,然后运行 npm install ,npm 就会帮他们下载代码
-
下载完的代码出现在 node_modules 目录里,可以随意使用了。
这些可以被使用的代码被叫做「包」(package),这就是 NPM 名字的由来:Node Package(包) Manager(管理器)。
node.js
node.js 是一种javascript的运行环境,能够使得javascript脱离浏览器运行。Node.js官网
webpack 官网:
https://www.jqhtml.com/7626.html
webpack是什么?
webpack 是一个现代的 JavaScript 应用程序的模块打包器(module bundler)。
实现按需加载,代码压缩