typeScript语法

ts类型

let a8:number = 1
console.log(a8)
ts联合类型使用或
ts联合类型使用或.jpg
ts定义任意类型any
定义任意类型any.jpg
定义任意类型any2.jpg
ts定义函数返回值的类型
定义函数返回值的类型.jpg
//unknown类型  表示未知类型的值
let e: unknown;
e = 10;
e = 'aaa';
e = true;

let s: string;
e = "hello"
//s = e;  此时会报错
//unknown 实际上是一个类型安全的any
//unknown类型的变量,不能直接赋值给其他变量
/*
解决s = e 的方法1:先进行类型判断在赋值
*/
if(typeof e === "string"){
    s = e
}
/*
解决s = e 的方法2:使用类型断言
类型断言的作用:告诉解析器变量的实际类型
类型断言的语法:
    1:变量 as 类型
    2:<类型>变量
*/
s = e as string;
s = <string>e;

//void类型 表示空,以函数为例,表示没有返回值的函数
function fn(): void{
 return;
}
//never 表示永远不会返回结果
function fn2(): never{
 throw new Error('报错了')
}

//object类型表示对象
let b: object;
/*
{}推荐这种方式定义对象类型,用来指定对象中可以包含哪些属性
语法{属性名:属性值,属性名:属性值}
在属性后面加上?,表示属性是可选的
*/
let c: {age:number,age2?:number};
c = {
    // name:'孙悟空',
    age:18,
    age2:20
}
//[propName:string]:any  表示任意类型的属性,propName可以随意定义
let d: {name:string,[propName:string]:any}
d = {name:'张三',age:18,gender:'男'}

/*
设置函数结构的类型声明
    语法: (形参:类型,形参:类型,...) => 返回值
*/
let f : (a:number,b:number) => number;
f = function(n1:number,n2:number){
    return n1 + n2
}
f(3,4)

/*
array 数组类型
    定义方式:
     1:类型[]
     2:Array<类型>
*/
let g: string[]//定义字符串类型的数组
g = ['1','2','3']
let h: number[]//定义数字类型的数组
h = [1,2,3]
let i:Array<number>//定义数字类型的数组方式2
i = [4,5,6]

/*
元组:元组就是固定长度的数组
*/
let j:[string,string]
j=["a","b"]
let k:[string,number]
k=["a",1]

/*
 enum 枚举
*/
enum Gender{
    Male = 0,
    Female = 1
}
let a1: {name:string,gender:Gender}
a1={
    name:'孙悟空',
    gender:Gender.Male//Male
}
console.log(a1.gender === Gender.Male)//true


/*
&表示同时(与),同时满足
*/
let a2: {name:string} & {age:number}
a2 = {name:'张三',age:18}
/*
类型的别名
*/
type myType = 1 | 2 | 3 | 4 | 5;
let a3: myType;
let a4: myType;
a3 = 5;
// a3 = 6;  此处会报错

ts中的类定义


使用class关键字来定义一个类
直接定义的属性是实例属性,需要通过对象的实例去访问
    const per = new Person()
    console.log(per.name);

使用static开头的属性是静态属性(类属性),可以直接通过类去访问 
    Person.age
readonly 开头的属性表示一个只读的属性无法修改
*/
class Person{
    //定义属性,实例属性
    name: string = '张三';
    //在属性前面使用static关键字可以定义类属性(静态属性)
    static age: number = 18;
    readonly denger:number = 1; //只能读取,不能修改
    //定义方法
    sayhello(){
        console.log("Hello")
    }
}
const per = new Person()
console.log(per.name);//张三
// console.log(per.age);  报错
//访问静态属性
console.log(Person.age);
per.name = 'tom'//可读可写
console.log(per.name);//tom
per.sayhello();//执行 sayhello 方法
class Dog{
    name:string;
    age:number;
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    bark(){
        console.log(this.name);
    }
}
const dog = new Dog('小黑',4);
const dog2 = new Dog('小白',2);
console.log(dog);//{'小黑',4}
console.log(dog2);//{'小白',2}
dog.bark();//小黑
dog2.bark()//小白
class Animal{
    name:string;
    age:number;
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    sayhello(){
        console.log("动物在叫");
    }
}
/*
Dog extend animal
此时,animal被称为父类,Dog成为子类
使用继承后,子类将会拥有父类的所有属性和方法
通过继承可以将多个类中共有的代码鞋子啊一个父类中
这样只需要写一次即可让所有的子类都同时拥有父类中的属性和方法
如果希望在子类中添加一些父类中没有的属性和方法直接在子类中添加即可
如果在子类中添加了和父类相同的方法,则子类方法会覆盖掉父类的属性和方法
这种子类覆盖掉父类方法的形式,我们称之为方法重写

*/
class Dogs extends Animal{
    sayhello(){
        console.log("汪汪汪")
    }
};
class Cat extends Animal{
    sayhello(){
        console.log("喵喵喵")
    }
}
// const dog1 = new Dogs(name:'狗',age:5);
// const cat = new Cat(name:'猫',age:3);

interface接口

/*
    interface接口用来定义一个类的结构,用来定义一个类中
    应该包含那些属性和方法,同时接口也可以当成类型声明去使用
    interface接口可以重复定义
*/
interface my{
    name:string;
    age:number;
}
interface my{
    denger:string;
}
const obj: my = {
    name: '张三',
    age: 18,
    denger: '男'
}
/*
接口可以在定义类的时候去限制类的结构
    接口中的所有的属性都不能有实际的值
    接口只定义对象的结构,而不考虑实际值
        在接口中所有的方法都是抽象方法
*/ 
interface myInter{
    name:string;
    sayHello():void;
}
/*
    定义类时,可以使用类去实现一个接口
    实现接口就是使类满足接口的要求
*/
class myClass implements myInter{
    name:string;
    constructor(name:string){
        this.name = name;
    }
    sayHello(){
        console.log('大家好')
    }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Typescript 基本语法 概念 TypeScript 是一种强类型语言 什么是强类型语言 不允许改变变量的数...
    阿畅_阅读 4,300评论 0 3
  • 一、基础部分 1.安装和编译 2.用VScode 自动编译 .ts a. 创建tsconfig.json文件。 t...
    _前端码农_阅读 4,229评论 0 1
  • 废话不多说直接撸码!左侧TS代码,右侧编译后的JS代码。 字符串 1.多行字符串 2.字符串模板 3.自动拆分字符...
    香榭的落叶wZw阅读 6,348评论 3 5
  • typeScript 数据类型 1. 布尔类型(boolean) 2. 数字类型(number) 3. 字符串类型...
    kevin5979阅读 2,372评论 0 1
  • TypeScript 是一种面向对象的编程语言。 面向对象主要有两个概念:对象和类。 看一个简单的例子: tsc ...
    IamaStupid阅读 1,865评论 0 0