传媒公司 网站开发,wordpress附件管理,厦门网站seo优化,亚马逊新店投广告是免费的吗点赞收藏加关注#xff0c;你也能住大别墅#xff01; 一、什么是typescript 二、应用场景
我认为JavaScript的特点就是在于它强大的延展性#xff0c;不仅蔓延到了后端#xff0c;而且也逐渐成为代码世界无法被忽视的存在。那么#xff0c;编写js代码时我们都会经常遇到… 点赞收藏加关注你也能住大别墅 一、什么是typescript 二、应用场景
我认为JavaScript的特点就是在于它强大的延展性不仅蔓延到了后端而且也逐渐成为代码世界无法被忽视的存在。那么编写js代码时我们都会经常遇到数据类型无法锁定或者即使锁定也需要编写冗长的判断逻辑例如函数参数的类型规范这里就不展开了。TypeScript的诞生就解决了这个问题我称之为js的补完计划。当然最终ts会被编译为js但是用ts进行开发你会体验到一种安心和踏实的感觉温馨的提示会恰到好处地出现在你需要它的地方。
三、如何使用 四、基本语法
(一)ts中的静态类型、类型注解、类型推断、基础类型、对象类型
// 一、ts的静态类型
const year: number 2013//Point类中的静态类型约束了变量point的定义
interface Point {x: numbery: number
}
const point: Point {x: 3,y: 4,
}//Point2类中的静态类型约束了变量point2的定义
interface Point2 {x: 1y: 2
}
const point2 {x: yi,y: er,
}// -----------------------------------------------------
// 二、类型注解、类型推断
//1.注解
let count: number
count 123
//2.推断
let count2 123// -----------------------------------------------------
// 三、ts中的基础类型对象类型
// 1.基础 number, string, boolean, null, undefined, symbol, void// 2.对象Object, [], function, 类
// (1)一般函数
// function add(形参1:number,形参2:number,...):返回值类型number等 {
// return num1num2;
// }
function add(num1: number, num2: number): number {return num1 num2
}
// (2)无返回值函数
function testVoid(): void {console.log(没有返回值)
}
// (3)never
function haha(): never {while (true) {}
}
// (4)解构
function jiegou({ num1, num2 }: { num1: number; num2: number }): number {return num1 num2
}
const res jiegou({ num1: 1, num2: 2 })
// (5)箭头函数
const func (str: string): string {return str
}
// ---------------------------------------------------------------
// (6)数组
const arr: number[] [1, 2, 3]
const mixarr: (number | string)[] [1, 2, 3]
const objarr: { name: string }[] [{ name: ts }]
// 类型别名
type User { name: string }
const objarr2: User[] [{ name: ts }]class User3 {name: stringage: number
}
const objarr3: User3[] [{ name: ts, age: 9 }]
// ---------------------------------------------------------------
// (7)元组
// 当需要按固定长度、固定数据类型来约束数组中数据类型的时候需要使用元组
const useInfo: [string, number] [ts, 9]
// csv
const csvarr: [string, number][] [[js, 9],[ts, 10],
]
// (8)json
interface Person {name: string
}
const jsonstr {name:ts}
const newname: Person JSON.parse(jsonstr)//(9)类型不确定
let msg: number | string 123
msg 123
二ts中的接口
//接口interface
interface Person {// readonly stname:string; readonly 表示不能修改这个属性只可以读取属性值stname: stringage?: number // ?表示age属性可有可无//[propName:string]:any 当实例中可能含有未约束的属性时可以增加这样一行代码say(): string
}const getPersonName (person: Person): void {console.log(person.stname)
}const setPersonName (person: Person, stname: string): void {person.stname stname
}const person {stname: js,sex: 1,say() {return hello},
}getPersonName(person)
// getPersonName({
// stname: js,
// sex:1
// })------------------------直接传字面量会触发ts的强校验所以这样写会报错,可以在类中定义[propName:string]:any来解决setPersonName(person, ts)
// ---------------------------------------------------
// 类 class
class User implements Person {stname dellsay() {return hellp}
}
// 继承
interface Teacher extends Person {teach(): string
}
const person2 {stname: js,sex: 1,say() {return hello},// 父接口中并未定义teach()但是子接口中定义了那么这个数据不仅要符合父接口也要符合子接口teach() {return teach},
}
//继承的接口 子 父 中定义的属性和方法
const getPersonName2 (person: Teacher): void {console.log(person.stname)
}
getPersonName2(person2)//--------------------------------------------
// 接口定义函数
interface Fun {(msg: string): string
}const tsfun: Fun (msg) {return this is Fun
}
三ts中的类
// 类的定义和继承
class Star {name stargetName() {return this.name}
}
class Moon extends Star {getMoonName() {return moon}
}
const star new Star()
const moon new Moon()
console.log(star.getName())
console.log(moon.getMoonName())// 重写
class Mars extends Star {//重写了父类的getName方法getName() {return Mars}
}// 字类中调用父类中的属性或者方法
class Jupiter extends Star {//重写了父类的getName方法getName() {return super.getName() //此时调用的是父类中的getname方法}
}// 访问类型 public private protected
// 1.public 类的内部和外部均可调用
class Car {public name: stringpublic getName() {this.name // ----内部可以使用}
}
const car new Car()
car.name tesla// 2.private 类的内部使用
class Car2 {private name: stringpublic getName() {this.name // ----内部可以使用}
}
const car2 new Car2()
//car2.name tesla ---- 外部使用会报错
class Tesla extends Car2 {public getName() {//super.name ---- 子类中也不可以使用}
}// 3.protected 类的内部及继承的字类中使用
class Car3 {protected name: stringpublic getName() {this.name // ----内部可以使用}
}
class Byd extends Car3 {public getName() {super.name // 子类中可以使用}
}
const car3 new Car3()
//car3.name ---- 外部使用会报错// 构造器 constructor 简化了属性的定义和赋值
class Car4 {//public name:string//constructor(name: string) {//this.name name//}//简化constructor(public name: string) {}
}
const qq new Car4(qq)
console.log(qq.name)//子类构造器中必须调用父类中的构造器super()
class Car5 {constructor(public name: string) {}
}
class Yd extends Car5 {constructor(public age: number) {super(car)}
}
四get、set和单例模式
// get set
class Food {constructor(private _name: string) {}get name() {//处理代码return this._name}set name(name: string) {//处理代码this._name name}
}
const food new Food(apple)
//food.name orange ---- 私有属性无法外不适用所以需要使用get、set
food.name orange
console.log(food.name)// 单例模式
class OnlyOne {private static instance: OnlyOneprivate constructor() {}static getInstance() {if (!this.instance) {this.instance new OnlyOne()}return this.instance}
}const obj1 OnlyOne.getInstance()
const obj2 OnlyOne.getInstance()
//无论创建多少实例都只是同一个对象
五ts中的抽象类
//抽象类 可以把它理解成一个公共类可以把多个类中都有的方法、属性存在抽象类里由各个类继承抽象类
abstract class MoonPerson {abstract name: stringabstract say(): string
}
// const p new Person() ---- 抽象类不可以实例化
// 子类中必须实现抽象类中的抽象方法、属性
class Man extends MoonPerson {name: tomsex: 1say() {return haha}
}
class Woman {name: janesex: 0say() {return xixi}
}//interface也可以用类似抽象类的方式把多个接口中都有的东西存在一个接口中多个接口可以通过继承的方式获取都有的东西从而简化代码
五、进阶语法
一联合类型和类型保护
interface Man {name: stringsex: 1huzi: true
}
interface Woman {name: stringsex: 0dress: true
}
function test(person: Man | Woman) {//console.log(person.dress) ---- 联合类型中只能使用两个类型中都有的属性或者方法 ---- 类型保护可以解决这个问题
}
//类型保护1 接口中定义了区分不同类型的标记通过判断标记来判断类型这也叫做类型断言
function test2(person: Man | Woman) {if (person.sex) {;(person as Man).huzi} else {;(person as Woman).dress}
}
//类型保护2in 语法
function test3(person: Man | Woman) {if (huzi in person) {;(person as Man).huzi} else {;(person as Woman).dress}
}
//类型保护3typeof 语法
function test4(num1: string | number, num2: string | number) {if (typeof num1 string || typeof num2 string) {return ${num1}${num2}} else {return num1 num2}
}
二枚举类型
//枚举类型 ----- 适用于有固定值的数据
enum Status {OFFLINE,ONLINE,DELETED,
}function getStatus(status) {if (status Status.OFFLINE) {return offline} else if (status Status.ONLINE) {return online} else if (status Status.DELETED) {return deleted} else {return error}
}
const res getStatus(Status.OFFLINE) // ---- 结果为offline2
const res2 getStatus(0) // ---- 结果为offline2
console.log(res)
console.log(res2)三泛型
//泛型 ---- 数据类型在定义时不确定在实现时再确定
function fun1T, P(first: T, second: P) {return ${first}${second}
}function fun2F(params: ArrayF) {return params
}fun1number, string(1, 1) // 也可以写成fun1(1,2)
fun2string([123])//泛型的继承
class DataFuckerT extends number | string {constructor(private data: T[]) {}getItem(index: number): T {return this.data[index]}
}const arr new DataFuckernumber([])
const arr2 new DataFuckerstring | number([])
const arr3 new DataFuckerstring([])//泛型作为一个具体的类型注解
function helloC(params: C) {return params
}四命名空间
//命名空间 ---- 可以理解成模块
//在命名空间中的东西如果没有通过export 向外界暴露那么外界是无法直接获取命名空间里的东西的。
namespace Zoo {class HaveDog {name: string}class HaveCat {name: string}export class People {constructor() {new HaveDog()new HaveCat()}}
}
//无法直接获取
//const dog new HaveDog()
//const cat new Zoo.HaveDog()//但是可以通过暴露出来的People来获取
const p new Zoo.People()//当然命名空间也是可以相互引用的需要在当前文件中加上reference path./被引用的命名空间文件名.ts
五配置文件等后续更新。。。
