let http = require('http'); // 创建服务器，参数是一个回调函数，表示如果有请求进来要做什么 let server = http.createServer((req,res)=>{ // 设置http头部，状态码是200，文件类型是html，字符集是utf8 res.writeHead(200,{"Content-type":"text/html;charset=UTF-8"}); res.end('这是我的第一个Node页面'); })
// 运行服务器 server.listen(3000,'192.168.124.15')
问：如何将 html 页面展示到浏览器中呢？
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
利用引入fs模块 let http = require('http'); let fs = require('fs'); let path = require('path'); let PULIC_PATH = path.resolve(__dirname,'01_helloWorld.html');
// 创建服务器，参数是一个回调函数，表示如果有请求进来要做什么 let server = http.createServer((req,res)=>{ fs.readFile(PULIC_PATH,(err,data)=>{ console.log('data',data,err); // 设置http头部，状态码是200，文件类型是html，字符集是utf8 res.writeHead(200,{"Content-type":"text/html;charset=UTF-8"}); res.end(data); }); })
let http = require('http'); let url = require('url'); let queryString = require('querystring');
let server = http.createServer((req,res)=>{ let queryObj = url.parse(req.url,true).query; // querystring的作用与上句作用一样 let queryObj2 = queryString.parse(req.url.split('?')[1]); console.log('参数',queryObj,queryObj2);
// 意思是：新建一个static文件夹，文件夹下有1.html文件，可以通过http://192.168.1.9:3000/1.html去访问 let http = require('http'); let url = require('url'); let fs = require('fs'); let path = require('path');
let server = http.createServer((req,res)=>{ // 获取路径 let pathName = url.parse(req.url).pathname; if (pathName == '/') { pathName = 'index.html'; } // 获取文件拓展名 let extname = path.extname(pathName); console.log('获取文件拓展名',extname);
function getMIME(extname){ switch(extname){ case ".html": return "text/html"; break; case ".jpg": return "image/jpg"; break; case ".css": return "text/css"; break; } }
4)路径注意问题 前提：同级目录下有a.js文件和text文件夹，text文件夹下有b.js和c.js 引用： 1.a引用b let b = require('./text/b.js); 2.b引用c let c = require('./c.js); 注意：引用都是从当前文件寻找其他文件 问：如果b.js中需要引入像fs等第三方模块读取文件时，如何引用？ 使用绝对路径__dirname： fs.readFile(__dirname+'/1.txt',()=>{})
<input id='name' /> <input id='age' /> <input id='submit' type="submit" value="提交" /> <script> document.getElementById('submit').onclick=()=>{ let name = document.getElementById('name').value; let age = document.getElementById('age').value;
let xhr = new XMLHttpRequest(); xhr.open('POST','http://192.168.1.9:3000'); xhr.addEventListener('load',function(){ console.log(this.response); }) let obj = { name, age }; xhr.send(JSON.stringify(obj)); } </script>
let http = require('http'); let server = http.createServer((req,res)=>{ if (req.method == "POST") { let allData = ''; req.on('data',(chunk)=>{ allData += chunk; }) req.on('end',()=>{ res.writeHead(200,{'Content-Type':'text/html','Access-Control-Allow-Origin':'*'}); res.end(allData); }) } }) server.listen(3000,'192.168.1.9');
value = true; // OK value = 42; // OK value = "Hello World"; // OK value = []; // OK value = {}; // OK value = Math.random; // OK value = null; // OK value = undefined; // OK value = new TypeError(); // OK value = Symbol("type"); // OK
对 value 变量的所有赋值都被认为是类型正确的。但是，当我们尝试将类型为 unknown 的值赋值给其他类型的变量时会发生什么？
1 2 3 4 5 6 7 8 9 10
let value: unknown;
let value1: unknown = value; // OK let value2: any = value; // OK let value3: boolean = value; // Error let value4: number = value; // Error let value5: string = value; // Error let value6: object = value; // Error let value7: any[] = value; // Error let value8: Function = value; // Error
unknown 类型只能被赋值给 any 类型和 unknown 类型本身。直观地说，这是有道理的：只有能够保存任意类型值的容器才能保存 unknown 类型的值。毕竟我们不知道变量 value 中存储了什么类型的值。
现在让我们看看当我们尝试对类型为 unknown 的值执行操作时会发生什么。以下是我们在之前 any 章节看过的相同操作：
controlFlowAnalysisWithNever 方法总是穷尽了 Foo 的所有可能类型。 通过这个示例，我们可以得出一个结论：使用 never 避免出现新增了联合类型没有对应的实现，目的就是写出类型绝对安全的代码。
三、Typescript 的类型系统
充分使用编辑器的 language service 功能（类型提示，类型检查，类型推倒，自动补全，类型定义跳转)
把类型当做值的集合思考
1 2 3 4 5 6 7 8 9
type A= 'A' // 单值集合 { 'A' } type B= 'B' // 单值集合 { 'B' } type AB = 'A' | 'B' // 集合的并集 { 'A', 'B' } type twoInt = 2 | 4 | 5 ... // 无限元素集合 { 1,2,3,4} type threeInt = 3 | 6 | 9 // 无限集合 type twoIntersectThreeInt = twoInt & threeInt // 无限集合的交集 type twoUnionThreeInt = 2| 3 | 4 | 6 ... // 无限集合的并集 keyof (A&B) = (keyof A) | (keyof B) keyof (A|B) = (keyof A) & (keyof B)
术语和集合术语对照表
1 2 3 4 5 6 7 8 9
Typescript术语 集合术语 never 空集 literal type 单值集合 value 可赋值给 T value ∈T T1 assignable to T2 T1是T2的子集 T1 extends T2 T1是T2的子集 T1 T2 T1 & T2 T1 和T2的交集 unknown universal set
let K1: keyof boolean; // let K1: "valueOf" let K2: keyof number; // let K2: "toString" | "toFixed" | "toExponential" | ... let K3: keyof symbol; // let K3: "valueOf"
// 首先通过typeof操作符获取color变量的类型，然后通过keyof操作符获取该类型的所有键， // 即字符串字面量联合类型 'red' | 'blue' type Colors = keyof typeof COLORS let color: Colors; color = 'red' // Ok color = 'blue' // Ok
// Type '"yellow"' is not assignable to type '"red" | "blue"'. color = 'yellow' // Error
let myGenericNumber = new GenericNumber<number>(); myGenericNumber.zeroValue = 0; myGenericNumber.add = function (x, y) { return x + y; };
泛型变量
对刚接触 TypeScript 泛型的小伙伴来说，看到 T 和 E，还有 K 和 V 这些泛型变量时，估计会一脸懵逼。其实这些大写字母并没有什么本质的区别，只不过是一个约定好的规范而已。也就是说使用大写字母 A-Z 定义的类型变量都属于泛型，把 T 换成 A，也是一样的。下面我们介绍一下一些常见泛型变量代表的意思：
type OtherProps = { name: string; color: string; }
// Notice here we're using the function declaration with the interface Props function Heading({ name, color }: Props): React.ReactNode { return <h1>My Website Heading</h1> }
// Notice here we're using the function expression with the type OtherProps const OtherHeading: React.FC<OtherProps> = ({ name, color }) => <h1>My Website Heading</h1>
关于 interface 或 type ，我们建议遵循 react-typescript-cheatsheet 社区提出的准则：
在编写库或第三方环境类型定义时，始终将 interface 用于公共 API 的定义。
考虑为你的 React 组件的 State 和 Props 使用 type ，因为它更受约束。”
让我们再看一个示例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
import React from 'react'
type Props = { /** color to use for the background */ color?: string; /** standard children prop: accepts any valid React Node */ children: React.ReactNode; /** callback function passed to the onClick handler*/ onClick: () => void; }
// the generic is the < > // the union is the User | null // together, TypeScript knows, "Ah, user can be User or null". const [user, setUser] = useState<User | null>(null);
方式2： Angular CLI是一个命令行界面工具，它可以创建项目、 添加文件以及执行一大堆开发任务，比如测试、打包和发布。 //安装基于angular的命令工具 npm install -g @angular/cli //创建一个有着ng模板的项目 ng new my-app //进入当前目录下的my-app cd my-app //启动开发服务器 ng serve --open
// index.js 项目的入口文件 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { Provider } from 'react-redux'; import store from './store';
