@芥末的糖-----TypeScript学习

image

女友御用版TS解析

优势:

-增加了代码的可阅读和可维护性

安装：

  npm install -g typescript

一.基础类型

布尔值

let isDone: boolean = false;

数字 number

let number: number = 6; 
let notANumber: number = NaN;

字符串

 let  string: string = 'Tom';

空值 void

  • void 类型的变量只能赋值为 undefined 和 null
    let unusable: void = undefined;
  • 可以用 void 表示没有任何返回值的函数
function myname():void{
}

null 和 undefined

  • undefined 类型的变量只能被赋值为 undefined，null 类型的变量只能被赋值为 null
let u: undefined = undefined;
let n: null = null;

与 void 的区别是，undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量，可以赋值给 number 类型的变量：

let u: undefined;
let num: number = u;
let num2:number = undefined;
// 编译合法 undefined是number的子类型

let unm2: void;
let num3: number = unm2;
// => 不合法 (void不是number的子类型)

任意值 any

let anyType:any = 'seven';
anyType = 7;

变量如果在声明的时候，未指定其类型， 也没有赋值， 那么它会被推断(类型推论)为任意值类型而完全不被类型检查

let something; 
// 等价于 let something: any;
something = 'seven';
something = 7;

二.数组

1，类型 + 方括号（ type [ ] ）
这种方式定义的数组项中不允许出现其他的类型

    let list: number[] = [1, 2, 3];

2，数组泛型 Array < type >

    let list: Array<number> = [1, 2, 3];

三.元祖

简单理解为可定义一组不同类型的数据：

let arr:[string, number] = ['name', 20];
console.log(arr[0]); 
// => 'name'

越界元素：当访问超出元祖长度的元素时，它的类型会被限制为元祖中每个类型的联合类型

let arr:[string, number] = ['name', 20];
arr[0] = 'age';
arr[2] = 'string';
arr[3] = 40;
arr[4] = true; // 编译报错

四.枚举 enum

被限定在一定范围内的场景，如一周只有7天，一年只有4季等

  • 数字枚举
enum Weeks {Mon, Tue, Wed, Thu, Fri, Sat, Sun};
  • 字符串枚举
enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT",
}

常量枚举在编译阶段是会被删除的

五.类型推论

变量申明如果没有明确的指定类型，那么 TypeScript 会依照类型推论的规则推断出一个类型

let string = 'seven'; 
// 等价于 let string: string = 'seven'; 
string = 4; 
// 编译报错: error TS2322: Type 'number' is not assignable to type 'string'

变量声明但是未赋值，会推论为 any

let x;
x = 1;
x = 'aaa'

六.联合类型

let stringOrNumber:string | number;
stringOrNumber = 'seven';

七.类型断言

实则类似instanceof,来断定一个类型

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

八.自定义类型

//  类型别名用法 自定义自己类型 public private等
type myType = {
    name: string,
    age: number,
}

接口 Interfaces

必须一一对应key和value

// 定义一个接口 Person
interface Person {
  name: string;
  age: number;
}

// 定义一个个变量，它的类型是 Person
let tom: Person = {
  name: 'Tom',
  age: 25
};

可选属性

interface Person {
  name: string;
  age?: number;
}
let tom: Person = {
  name: 'tom'
}
// age是可选属性

任意属性(定义之后，person03所有的value只都必须为any)

interface Person03 {
  name: string;
  age?: number;
  [propName: string]: any;
}
let tom04: Person03 = {
  name: 'Tom',
  age: 25,
  gender: 'male'
};

只读属性readonly(一次给对象赋值可以，但是不能修改)

interface Person {
  readonly id: number;
}

let person: Person = {
  id: 100,
}
person.id = 2//报错

函数

用接口定义函数的形状

interface FuncAdd {
  (value: number, increment: number): number
}
let add: FuncAdd;
add = function(value: number, increment: number): number {
  return value + increment;
}
// 函数的参数名不需要与接口里定义的名字相匹配
let add2: FuncAdd;
add2 = function(a: number, b: number) {
  return a + b;
}

可选参数(必须放在参数的最后面)

function addNum(a: number, b: number, c? :number): number {
    if(c) {
        return a + b + c;
    } else {
        return a + b;
    }
}
console.log(add(1, 2));

默认参数

function add(a: number = 1, b: number): number {
    return a + b;
}
console.log(add(undefined, 1))

类 class

类的定义

class Animal {
        name:string; // 定义属性
    constructor(name) {
        this.name = name; // 属性赋值
    }
    sayHi() {
        return `我叫 ${this.name}`;
    }
}

let cat = new Animal('Tom');
console.log(cat.sayHi()); // 我叫 Tom

类的继承

class Cat extends Animal {
    color: string;
    constructor(name, color) {
        super(name); // 调用父类Animal的 constructor(name)
        this.color = color
    }
    sayHi() {
        // 调用父类的 sayHi()；
        return super.sayHi() + '我是一只'+ this.color + ' 色的猫，'; 
    }
}

let c = new Cat('Tom', '橘黄'); // Tom
console.log(c.sayHi()); // 我叫 Tom，我是一只橘黄色的猫；

let cat2 = new Cat('Jerry');
cat2.color = '黑';
console.log(c.sayHi()); // 我叫 Jerry，我是一只黑色的猫；

存取器

class Animal {
        name:string;
    constructor(name) {
        this.name = name;
    }
    get name() {
        return 'Jack';
    }
    set name(value) {
        console.log('setter: ' + value);
    }
}

let a = new Animal('Kitty'); // setter: Kitty
a.name = 'Tom'; // setter: Tom
console.log(a.name); // Jack

静态属性和方法

  • static--子类不继承
    -public--公共方法
    -private--私有
    -protected--继承的子类可以访问

多态

子类同种父类的方法名字

class Person {
  eat(){ console.log('eat') }
}
class A extends Person {
  eat(){ console.log('A eat') }
}
class B extends Person {
  eat(){ console.log('B eat') }
}

泛型函数

// 打印字符串
function printer1(arr:string[]):void {
for(var item of arr) {
  console.log(item)
}
}
printer1(['a','b','c','d'])
--------------------------------------------------------------------

function printer<T>(arr:T[]):void {
for(var item of arr) {
  console.log(item)
}
}
// 指定具体类型调用
printer<string>(['a','b','c','d']);
// 调用时也可以直接让ts自己做类型推论
printer([1,2,3,4]);

声明文件 declare

当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能

后续为实战,未完待续......我太难了啊

//传给函数，用来解构赋值
class a {
 aa({a,b}:{a:number,b:string}):void{
        console.log(11)
    }
}
let b = new a()
b.aa({
    a:1,
    b:"1"
})

工作中用到的

//基本数据类型--------------------------------------
private  str:string = ''
//数组（三种，我们用两种）
//1
private  arr: string[] = ['1','2']
//2
private Array<string> = ['1','2']

//对象---------------------------

//允许接口里有任意属性。但是是所有子集的父级
//1(一般任意用了 就不写别的了)
interface test{
  name: string;
  age?: number;
  [propName: string]: any;
}

//2
interface obj{
  name: string; // 表示对象要有name属性, 值是string类型
  age?: number; // ? 表示age属性可以有也可以没有, 值是number类型
  readonly id: number; // readonly 表示 id 属性只可读，不可修改
}
let obj2: obj= { name: "obj2", age: 18, id: 2 };

//数组对象


interface test{
    name1: string;
}
interface zz{
    name: test;
}
const aaa:zz[] = [{name:{name1:"2"}}]


//函数
//1
function fn(x:number,y?: number,z:number = 1):void{}
//2
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,376评论 6赞 491
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,126评论 2赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 156,966评论 0赞 347
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,432评论 1赞 283
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,519评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,792评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,933评论 3赞 406
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,701评论 0赞 266
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,143评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,488评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,626评论 1赞 340
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,292评论 4赞 329
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,896评论 3赞 313
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,742评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1赞 265
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,324评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,494评论 2赞 348