网站建设收费标准教程,静态网页怎么做网站,分销系统php开源,电子商务网站的建设【视频链接】尚硅谷TypeScript教程#xff08;李立超老师TS新课#xff09; TypeScript TypeScript 语法基础 第二部分 类、接口、泛型1. 类型1.1 | 联合类型1.2 字面量类型1.3 any 任意类型1.4 unkown 类型1.5 as 类型断言1.6 object 对象类型1.7 { } 对象类型1.8 #xff…【视频链接】尚硅谷TypeScript教程李立超老师TS新课 TypeScript TypeScript 语法基础 第二部分 类、接口、泛型1. 类型1.1 | 联合类型1.2 字面量类型1.3 any 任意类型1.4 unkown 类型1.5 as 类型断言1.6 object 对象类型1.7 { } 对象类型1.8 对象中的可选属性1.9 对象中的任意属性1.10 同时满足条件1.11 function 函数的类型限制1.12 void 空值1.13 nerver 没有返回值1.14 Array 数组1.15 元组类型特殊数组1.16 emun 枚举1.17 type 类型别名1.18 索引签名类型 尚硅谷官方资料第一章 快速入门0、TypeScript简介1、TypeScript 开发环境搭建2、基本类型 环境配置
安装node安装typescript初始化tstsc --init 自动创建tsconfig.json文件修改tsconfig.json中的配置生效experimentalDecorators: true,安装ts-nodenpm i ts-node -g,使用ts-node命令可以直接编译ts文件不必再转为js创建ts文件index.ts编译ts代码ts-node index.ts
TypeScript 语法基础 第二部分 类、接口、泛型
文章链接
1. 类型
typescript对类型进行强制的管理
这里只记录typescript特有的
1.1 | 联合类型
let a : number | string //变量a可以是number也可以是string// 数组元素可以是联合类型中的任意一种
let arr: (number|string|boolean)[] [1,2,3]arr[0] 1
arr[2] true1.2 字面量类型
可以限制变量的取值范围
// c的类型只能是10不是number
let c : 10c 11 // 报错Type 11 is not assignable to type 10 应用d的值被限定在两个字符串
let d : man | womand man
d woman1.3 any 任意类型
any类型的变量给以赋值给任意变量又增加了变量类型的不确定性不建议使用
let b : any
b 10
b 字符串1.4 unkown 类型
未知类型使用前需要typeof做类型判断
错误示例
let e : number 10
let f : unknown 10e f //报错Type unknown is not assignable to type number 正确用法
let e : number 10
let f : unknown 10if (typeof f number){e f
}1.5 as 类型断言
假如又一个变量a解析器不知道是什么类型但我们确定a的类型为某个类型
下面代码不会报错但用法是错的如果要断言a是数字那程序员一定要确保a一定会是number
let a : unknown abcd
let b : number b a as number
// 另一种断言的写法
b numbera编译后的js文件内容 很明显因为断言b的类型成为了string会导致未知的错误
let a abcd;
let b;
b a;1.6 object 对象类型
示例中object属性并没有对变量做很好的限制一般不使用
object的范围太广泛示例中a可以是对象也可以是函数
let a : objecta {name:jack,age:18}a function (a:number,b:number) : number{return a b
}1.7 { } 对象类型
很明显{}和object对类型的限制没有起到约束作用
let a : {} // a类型为{}
// 无论 a 的值是对象或函数都不会报错a {name:jack,age:18}
a function (a:number,b:number) : number{return a b{} 正确用法
let a : {name: string, age: number}a {name: jack, age: 18}1.8 对象中的可选属性
带有?的属性可有可无
let a : {name: string, age?: number}a {name: jack, age: 18}a {name: jack}1.9 对象中的任意属性
[b:string]:any 表示属性名是字符串值是任意类型[b:string]:string 表示属性名是字符串值也是字符串
// a对象中只要有namestring属性其他都无所谓
let a : {name: string, [b:string]:any}a {name: jack, age: 18, sex: true}a {name: jack}// 报错因为id属性的值是number类型所以b属性必须要包含number属性
let e : {id: number, [b:string]: string }
// 修改为
let e : {id: number, [b:string]: string | number}1.10 同时满足条件
let a : {id: number} {name:string }a {id: 1, name: a}不能用于 []
1.11 function 函数的类型限制
对函数的类型限制就是限制参数的类型和返回值的类型
let b : (a: number, b: string) booleanb function (a: number, b: string):boolean{return true
}function c (a: number, b: string) : boolean{return true
}1.12 void 空值
void用于函数的返回值类型没有return语句或者返回undefined
function fun(): void{return undefined
}1.13 nerver 没有返回值
有没有return返回的类型都不能是nerver一般用于抛出异常
function fun(): never{throw new Error(报错)
}1.14 Array 数组
第一种方式
let a : string[]a [a, b]
第二种方式
let b : ArrayStringb [a, b]数组元素是对象
let c : Array{[a:string]:number}c [{a:1}, {b:2}]元素是对象并且对象中属性的值不是同一种类型
let d : Array{id: number, [b:string]:string | number}d [{id:1,name:jack}]1.15 元组类型特殊数组
元组类型是一种特殊的数组类型它允许你明确地指定数组中每个元素的类型。元组类型在需要明确知道数组中元素数量和类型的情况下非常有用。
type Tuple [number, string];const tuple: Tuple [1, hello];1.16 emun 枚举
属性的值在确定的范围以内建议使用emun类型
enum Gender{MALE 1,FEMALE 2,OTHER 3
}
let a : {id:number,name:string,gender:Gender}a {id:1,name:zhangsan,gender:Gender.FEMALE
}if(a.gender Gender.FEMALE){console.log(女)
}1.17 type 类型别名
a就是string类型的别名在后续的代码中用a可以代替string使用
type a string;let b : ab hello和字面量类型配合使用可以用于限制变量的值感觉和枚举有相似的地方
type c 1 | 2 | 3let d : c // d的类型就是 1 | 2 | 3d 11.18 索引签名类型
可以通过索引获取到值索引只能是number或者string类型
// 定义索引类型通过key获取到值key的类型是sting值的类型也是string
interface InfoType {[key:string]:string
}
// 定义函数的返回值类型为索引类型
function getInfo(): InfoType {// todoreturn x
}const info getinfo()
// 索引类型可以通过 key获取到 value
console.log(x.name)
console.log(x.age)有length属性key是number
interface StringArray {[index: number]: string;length: number // 这个属性可有可无
}
// 数组是索引签名类型不同于上面的例子索引是number类型
let myArray: StringArray [Alice, Bob, Charlie];let myStr: string myArray[0]; // myStr 的值是 Alice// 带有length属性的索引签名类型可以使用for遍历
// 不能使用for...of遍历StringArray 没有迭代器
function test(x:StringArray) {for(let i 0; i x.length; i)console.log(x[i])
}
test(myArray)尚硅谷官方资料
第一章 快速入门
0、TypeScript简介
TypeScript是JavaScript的超集。它对JS进行了扩展向JS中引入了类型的概念并添加了许多新的特性。TS代码需要通过编译器编译为JS然后再交由JS解析器执行。TS完全兼容JS换言之任何的JS代码都可以直接当成JS使用。相较于JS而言TS拥有了静态类型更加严格的语法更强大的功能TS可以在代码执行前就完成代码的检查减小了运行时异常的出现的几率TS代码可以编译为任意版本的JS代码可有效解决不同JS运行环境的兼容问题同样的功能TS的代码量要大于JS但由于TS的代码结构更加清晰变量类型更加明确在后期代码的维护中TS却远远胜于JS。
1、TypeScript 开发环境搭建 下载Node.js 64位https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64.msi32位https://nodejs.org/dist/v14.15.1/node-v14.15.1-x86.msi 安装Node.js 使用npm全局安装typescript 进入命令行输入npm i -g typescript 创建一个ts文件 使用tsc对ts文件进行编译 进入命令行 进入ts文件所在目录 执行命令tsc xxx.ts
2、基本类型 类型声明 类型声明是TS非常重要的一个特点 通过类型声明可以指定TS中变量参数、形参的类型 指定类型后当为变量赋值时TS编译器会自动检查值是否符合类型声明符合则赋值否则报错 简而言之类型声明给变量设置了类型使得变量只能存储某种类型的值 语法 let 变量: 类型;let 变量: 类型 值;function fn(参数: 类型, 参数: 类型): 类型{...}自动类型判断 TS拥有自动的类型判断机制当对变量的声明和赋值是同时进行的TS编译器会自动判断变量的类型所以如果你的变量的声明和赋值时同时进行的可以省略掉类型声明 类型 类型例子描述number1, -33, 2.5任意数字string‘hi’, “hi”, hi任意字符串booleantrue、false布尔值true或false字面量其本身限制变量的值就是该字面量的值any*任意类型unknown*类型安全的anyvoid空值undefined没有值或undefinednever没有值不能是任何值object{name:‘孙悟空’}任意的JS对象array[1,2,3]任意JS数组tuple[4,5]元素TS新增类型固定长度数组enumenum{A, B}枚举TS中新增类型 number let decimal: number 6;
let hex: number 0xf00d;
let binary: number 0b1010;
let octal: number 0o744;
let big: bigint 100n;boolean let isDone: boolean false;string let color: string blue;
color red;let fullName: string Bob Bobbington;
let age: number 37;
let sentence: string Hello, my name is ${fullName}.Ill be ${age 1} years old next month.;字面量 也可以使用字面量去指定变量的类型通过字面量可以确定变量的取值范围 let color: red | blue | black;
let num: 1 | 2 | 3 | 4 | 5;any let d: any 4;
d hello;
d true;unknown let notSure: unknown 4;
notSure hello;void let unusable: void undefined;never function error(message: string): never {throw new Error(message);
}object没啥用 let obj: object {};array let list: number[] [1, 2, 3];
let list: Arraynumber [1, 2, 3];tuple let x: [string, number];x [hello, 10]; enum enum Color {Red,Green,Blue,}let c: Color Color.Green;enum Color {Red 1,Green,Blue,}let c: Color Color.Green;enum Color {Red 1,Green 2,Blue 4,}let c: Color Color.Green;类型断言 有些情况下变量的类型对于我们来说是很明确但是TS编译器却并不清楚此时可以通过类型断言来告诉编译器变量的类型断言有两种形式 第一种 let someValue: unknown this is a string;
let strLength: number (someValue as string).length;第二种 let someValue: unknown this is a string;
let strLength: number (stringsomeValue).length;
