ts基础语法
- 官网：www.typescriptlang.org/
- 定义：ts是js的超集，js的类型是动态类型，ts的类型是静态类型
- 优势：
-
开发过程中，发现潜在问题 -
更好的编辑器自动提示 -
代码语义更清晰易懂
-
ts基础环境搭建
node 单引号 2个空格缩进 prettier插件 formate on save npm i typescript@3.6.4 -g tsc demo.ts 编译demo.ts文件 node demo.js 运行编译后的文件 tsc --init 初始化ts项目 会生成tsconfig.json文件 npm i ts-node@8.4.1 -g ts-node demo.ts 编译文件并执行 -
基础类型和对象类型
基础类型：number\string\null\undefined\symbol\boolean\void 对象类型：object、array、tuple、class、function -
类型注解和类型推断
类型注解：显式告诉ts变量是什么类型 类型推断：ts自动分析变量的类型 *tips: 如果ts能够自动分析变量的类型，我们就什么也不需要做了；如果ts无法分析变量类型的话，我们就需要使用类型注解* -
函数相关类型
` const func = function(str: string):number{ return parseInt(str,10) } const func: (str: string)=> number = function(str){ return parseInt(str,10) }` -
联合类型
let name: string | number = '123' name = 123 -
类型别名
type User = {name: string, age: number} type PersonName = string -
数组和元组
数组： const arr: number[] = [1,2,3] const arr: Array<number> = [1,2,3] const arr: (number | string)[] = [1,'2',3] const arr: User[] = [{name:'wyb',age: 24}] 元组： 元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同 const tuple: [number,string] = [24,'wyb'] -
接口
通用性类型集合,定义对象和函数 类型别名和接口区别： 接口只能定义函数或对象，类型别名可以定义任何类型；接口和类型别名，优先采用接口的形式定义类型 可选属性、只读属性 `interface Person{ readonly name: string; age?: number; [propName: string]: any;// 可以接受额外的属性 say():string; }` 如果传值是字面量，ts会强校验接口，定义的属性和方法不能多也不能少 类应用接口 `class User implements Person{ name = 'wyb' say(){ return 'hello' } }` 接口继承接口 `interface Teacher extends Person { teach(): string; }` 可以继承多个接口 `interface Shape { color: string; } interface PenStroke { penWidth: number; } interface Square extends Shape, PenStroke { sideLength: number; }` 接口定义函数 需要给接口定义一个调用签名。 它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型 interface SayHi{ (word: string) : string; } 接口定义可索引的类型 可索引类型具有一个 *索引签名*，它描述了对象索引的类型，还有相应的索引返回值类型。 interface StringArray { [index: number]: string; } -
类
定义：
class Person { name = 'wyb' getName(){ return this.name } }继承：
class Teacher extends Person { getTeacherName(){ return 'Teacher' } // 属性重写，子类可以覆盖覆盖 // super相当于父类，可以调用父类的方法 getName(){ return (super.getName() + 'yh') } }
类中的访问类型和构造器：
访问类型
private、protected、public访问类型
public 允许在类内外被调用
private 允许在类内部使用
protected 允许在类内部及继承的子类中使用
class Person {
public name: string;
private age: number;
protected gender: string;
public sayHi(){
// name属性可以在类内被调用
console.log('hi'，this.name)
// age可以在类内部被调用
console.log(this.age)
// gender可以在类内部被调用
console.log(this.gender)
}
}
class Teacher extends Person {
public sayBye(){
// gender 可以在子类中被调用
this.gender
}
}
const person = new Person()
// name属性可以在类外被调用
person.name = 'wyb'
console.log(person.name)
// age不可以在类外部被调用 下面的两行代码会报错
person.age = 24
console.log(person.age)
const person = new Person('wyb')
构造器：
class Person {
public name: string;
// 初始化类的时候
constructor(name: string){
this.name = name
}
}
// 等同于下面的代码 简化语法
class Person {
constructor(public name: string){}
}
const person = new Person('wyb')
class Person {
constructor(public name:string){}
}
// 如果子类有构造器，必须手动调用父类构造函数
class Teacher extends Person{
constructor(public age:number){
super('wyb')
}
}
const teacher = new Teacher(28)
静态属性，setter和getter
使用get和set能够保护私有变量
class Person{
constructor(private _name:string){}
get name(){
// 可以拦截访问
return this._name
}
set name(name: string){
// 可以防止随意更改私有变量
return this._name
}
}
const person = New Person('wyb')
// 会调用get
console.log(person.name)
// 会调用set
person.name = 'wtt'
单例模式： 只能有一个实例
静态属性是直接放在类上面，而不是实例上面
class Demo{
private static instance: Demo;
private constructor(public name: string){}
static getInstance(){
if(!this.instance){
this.instance = new Demo('wyb')
}
return this.instance
}
}
const demo1 = Demo.getInstance()
const demo2 = Demo.getInstance()
demo1和demo2都是同一个实例
readonly修饰器 可以定义public只能读不能写
方式一
class Person{
private _name: string;
constructor(name:string){
this._name = name
}
get name(){
return this._name
}
}
方式二
class Person{
constructor(public readonly name:string){}
}
方式三
class Person{
public readonly name:string;
constructor(name:string){
this.name = name
}
}
抽象类： 就是将类通用性的方法和属性提出来 抽象类可以是具体实现，也可以是抽象的表示
abstract class Gemo{
// 具体实现
getType(){
return 'Gemo'
}
// 抽象表示
abstract getArea(): number
}
class Circle extends Gemo{
// 子类里面必须有抽象的具体实现
getArea(){
return 123
}
}
