什么是 TypeScript
注意: TypeScript无法在浏览器中运行
Typing强类型
规范我们的代码
代码编译阶段就能及时发现错误
在原生js的基础上加上了一层类型定义
开发环境的配置
提前下载node.js
typescript工作流
如何使用TS来运行网站
npm install --save-dev lite-server
轻量级服务器
node_modules
存放的就是所有的第三方依赖系统。
package.json
文件中有2个地方可以配置依赖
devDependencies
中的依赖只参与项目的开发,开发完成后,不需要打包到生产环境中,不需要部署到服务器中。dependencies
中的依赖都会被打包放到服务器上- 区分二者的好处就是有效的降低网站的大小,加速网站被打开的时间,
TS的基础类型
变量声明
TypeScript的类型
数字、布尔、与字符串
Number 数字类型
对数字的定义只有一个很笼统的number来表示
既能表示整数、也能表示浮点数,甚至也可以表示正负数
例如:1,5.3 -10
String字符串类型
"hello", ' hello' , hello
反引号:`,可以创建一个字符串模版
与JavaScript一致
boolean布尔类型
真、假
处理判断逻辑
自动和手动指定类型
自动:类似JS
手动let n:number = 1
数组(Array)和元组(Tupple)
Array 数组类型
[ ]
数组中可以存放任意类型的数据
JS中数组的宽容度非常大,而TS也很好的继承了这一点
//3-4数组(Array)和元组(Tupple) let list1: number[] = [1, 2, 3, 4]; let list2: Array<number> = [1, 2, 3, 4]; let list3 = [1, 2, 3, 4] let list4: [1, 2, '4']; let list5: any[] = [1, 2, 3, '4'];
tuple元组类型
固定长度、固定类型的array
tuple使用注意
元祖类型还有个bug
声明一个元祖的时候一定要指明类型
let person1:[number,string] = [1,'a'] person1[0] = 'a' // 不能将类型“string”分配给类型“number”。 person1[1] = 1 // 不能将类型“number”分配给类型“string”。 person1[2] = 1 // 不能将类型“1”分配给类型“undefined”。 person1.push(3) // bug!
以下这个是一个数组
let person2 = [1, "a"]; // let person2: (string | number)[] person2[0] = "a"; // ok person2[1] = 1; // ok person2[2] = 1; // ok person2.push(3); // ok
联合(Union)与字面量(Literal)类型
联合(Union)
let union: string | number; union = 2; union = "sssssss"; union = true; // 不能将类型“boolean”分配给类型“string | number”。 let union2: number | string | boolean | string[]; function merge(n1: number | string, n2: number | string) { if (typeof n1 === "string" || typeof n2 === "string") { return n1.toString() + n2.toString(); } else { return n1 + n2; } } let mergeNumber = merge(1, 3); // 4 let mergeStirng = merge("1", "sss"); // 1sss
字面量类型(literal)
let union3 : 0 | 1 | 2; union3 = 1; union3 = 5; // 不能将类型“5”分配给类型“0 | 1 | 2”。 const union4 = 1111; union4 = 3 // 无法分配到 "union4" ,因为它是常数。
TypeScript入门视频2h(下):https://developer.aliyun.com/article/1392246