TypeScript 初体验

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 的思路大概是这样的：

1. 买个服务器作为代码仓库（registry），在里面放所有需要被共享的代码

2. 发邮件通知 jQuery、Bootstrap、Underscore 作者使用 npm publish 把代码提交到 registry 上，分别取名 jquery、bootstrap 和 underscore（注意大小写）

3. 社区里的其他人如果想使用这些代码，就把 jquery、bootstrap 和 underscore 写到 package.json 里，然后运行 npm install ，npm 就会帮他们下载代码

4. 下载完的代码出现在 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)。

实现按需加载，代码压缩