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('大家好')
    }
}
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,651评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,468评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,931评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,218评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,234评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,198评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,084评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,926评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,341评论 1 311
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,563评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,731评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,430评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,036评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,676评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,829评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,743评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,629评论 2 354

推荐阅读更多精彩内容

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