typescript 学习笔记

资料

安装

1yarn global add typescript ts-node

数据类型

string
boolean
number
void 用在没有返回值的函数,其它可以用,但不能赋值
```
1function alerme():void {
2  alert('my name is tom');
3}
```
null,undefined,是所有类型的子类型,可以赋值给其它类型,而 void 类型的变量不能赋值给 number 类型的变量：

1 let num:number = null

对象类型

 1const xiaoJieJie : {
 2    name:string,
 3    age:number
 4}   = {
 5    name:'hel',
 6    age:19
 7} //1 普通
 8
 9const xiaoJjiejieS :string [] = ['1','dajiao','liuyaing']; // 2  .数组
10
11class Person{}
12const dajiao: Person = new Person() //3 类类型
13
14const jianXiaoJjieJie: () => string  = () => {return "dajiao"}; //函数对象类型

脚手架

换了一个脚手架 GitHub - xddqnodejs-typescript-modern-starter Minimal and modern starter template to develop a Node.js project leveraging Typescript

类型注解与类型推断

type annotation
type inference

工作使用的原则

如果TS能够自动分析变量类型,我们就什么也不需要做了
如果TS无法分析变量类型的话,我们就需要使用类型注解了

05 函数参数和返回类型的注解

 1
 2function getTotal(one:number,two:number) : number {
 3    //return one + two + '';
 4    return one + two ;
 5}
 6
 7//let total  = getTotal(1, '2');
 8let total  = getTotal(1, 2);
 9
10// nerver 永远执行不完
11function error_function () : never{
12    //return 1;
13    throw new Error();
14    console.log("Hello world! nerver run")
15}
16
17function forNever(): never{
18    while(true){}
19    console.log("function never end!")
20}
21
22// 解析赋值型参数 设置类型
23function add({one ,two} : { one:number,two:number}){
24    return one +two;
25}
26const total1 = add({one:1,two:1});

06数组类型的定义

类型别名

 1const numberArr : number[]  = [1,2,3];
 2
 3const arr : (string | number)[]  = [1,'str',2];
 4
 5const xiaojiejies : {
 6    name:string,
 7    age:number
 8} []  = [
 9    {name:'liuying',age:18}
10]
11
12//类型别名
13type Lady = {    
14    name:string,
15    age:number
16};
17
18const xiaojie2:Lady[] = [
19    {name:'liuying',age:18}
20];
21
22class Madam { 
23    name:string;
24    age:number;
25};
26
27const xiaojie3 : Madam[]  = [
28    {name:'liuying',age:18}
29]

07 元组的使用

 1//const xiaojiejie : (string | number)[] = ['dajaio','teacher',28];
 2
 3//这就是元组了,每个元素的类型顺序是固定 的
 4const xiaojiejie : [string,string ,number] = ['dajaio','teacher',28];
 5
 6const xiaojiejies : [string,string ,number][] = [
 7    ['dajaio','teacher',28],
 8    ['dajaio','teacher',28],
 9    ['dajaio','teacher',28]
10];

元组现在用的少了,因为可以用对象的形式来代替

08 09 interface 接口

 1//const screenResume = (name:string ,age:number,bust:number) =>{
 2    //age < 24 && bust >= 90 && console.log(name +'进入面试');
 3    //(age >= 24 || bust < 90 )&& console.log(name +'被淘汰');
 4//}
 5
 6//const getResume = (name:string,age:number,bust:number)=>{
 7    //console.log(name)
 8    //console.log(age)
 9    //console.log(bust)
10//}
11
12
13//screenResume('dajiao',18,99);
14//getResume('dajiao',18,90)
15//
16
17interface Girl {
18    name:        string;
19    age:         number;
20    bust:        number;
21    waistline ?: number ; // 可有 可没有
22}
23
24const girl = {
25    name:'dajiao',
26    age:18,
27    bust:95
28}
29
30const screenResume = (girl:Girl) => {
31    girl.age < 24 && girl.bust >= 90 && console.log(girl.name +'进入面试');
32    (girl.age >= 24 || girl.bust < 90 )&& console.log(girl.name +'被淘汰');
33}
34
35type Girl1 = string
36// interface 和类型别名很像 
37// 但 interface 必须 是像 对象这种类型
38// type 可以 是单类型

 1//const screenResume = (name:string ,age:number,bust:number) =>{
 2    //age < 24 && bust >= 90 && console.log(name +'进入面试');
 3    //(age >= 24 || bust < 90 )&& console.log(name +'被淘汰');
 4//}
 5
 6//const getResume = (name:string,age:number,bust:number)=>{
 7    //console.log(name)
 8    //console.log(age)
 9    //console.log(bust)
10//}
11
12
13//screenResume('dajiao',18,99);
14//getResume('dajiao',18,90)
15//
16
17interface Girl {
18    name:        string;
19    age:         number;
20    bust:        number;
21    waistline ?: number ; // 可有 可没有
22    [propname:string] : any;
23    // key 是string ,value 是 any
24    say():string; //定义了一个方法,必须有
25}
26
27class XiaoJiejie implements Girl {
28    name:string;
29    age:number;
30    bust:number = 90;
31    say() : string{
32        return "helo"
33    }
34}
35
36interface Teacher extends Girl {
37    teach():string;
38
39}
40
41const girl = {
42    name:'dajiao',
43    age:18,
44    bust:95
45}
46
47const screenResume = (girl:Girl) => {
48    girl.age < 24 && girl.bust >= 90 && console.log(girl.name +'进入面试');
49    (girl.age >= 24 || girl.bust < 90 )&& console.log(girl.name +'被淘汰');
50}
51
52type Girl1 = string
53// interface 和类型别名很像 
54// 但 interface 必须 是像 对象这种类型
55// type 可以 是单类型

[propname:string] : any;
内部约束了一个函数say():string;
接口约束一个类class xiaojiejie implements Gril
接口的拓展interface Teacher extends Girl{} 相当于继承
符合子接口的对象也符合父接口

10 类的概念和使用

定义
继承
重写
super 调用父类中的方法

类的访问类型

private 内部用,外部不能用
protected 内部用,外部不能用,继承可以用
public 默认是public 都可以用

类的内部与外部

 1class Person {
 2    public p_name :string = '1';
 3    protected name2 :string= '1';
 4    private name3 :string= '1';
 5}
 6
 7let p = new Person()
 8
 9//p.name2 = "this.name"
10//p.name3 = "this.name";
11p.p_name = "this.name"
12
13class Teacher extends Person {
14    sayHello(){
15        console.log(this.p_name,"hello")
16        console.log(this.name2,"hello")
17    }
18}
19
20var teach = new Teacher()
21teach.p_name = "Tom"
22teach.sayHello()

12 类的构造函数

 1class Person {
 2    public name :string;
 3    constructor(name:string){
 4        this.name = name;
 5    }
 6}
 7
 8const person = new Person("Tom");
 9
10console.log(person.name)
11
12class Person2 {
13    constructor(public name:string){ //同样的功能
14    }
15}
16
17const person2 = new Person2("TOm")
18console.log(person2.name)
19
20class Teacher extends Person{
21    constructor(public age:number){
22        super('Tom'); //必须调用父类的constructor
23        //父类只要有constructor,就必须调用super()
24    }
25}
26
27console.log("===")
28const teach = new Teacher(19)
29console.log(teach.age)
30console.log(teach.name)

13 类的getter setter static 只读

 1class person{
 2    private _age:number = 18;
 3    public readonly _name:string;
 4    constructor( name:string){
 5        this._name = name;
 6    }
 7
 8    //getter
 9    get age(){
10        return this._age + 20;
11    }
12
13    set age(age:number){
14        this._age = age+3; //玄妙
15    }
16
17    static sayLove(){ //不用实例化
18        console.log('I L U')
19    }
20}
21
22
23const diaojao = new person("diaojao");
24console.log(diaojao.age)
25
26diaojao.age = 28;
27console.log(diaojao.age)
28
29person.sayLove()
30
31//diaojao._name = "Tom:" // wrong

14 抽象类

含有抽象方法的类叫做抽象类
继承抽象类的类必须实现抽象方法

 1abstract class Girl{
 2    abstract skill() //抽象方法
 3    notskill(){ // 非抽象
 4
 5    }
 6}
 7
 8
 9
10class waiter extends Girl{
11    skill(){
12        console.log("daoshui")
13    }
14}
15
16class senior extends Girl{
17    skill(){
18        console.log("gaoji daoshui") // 实现
19    }
20}

15 16 17 tsconfig.json 配置文件

tsc -init 生成
tsc 不加名字,会调用tsconfig.json
“include”:[“demo.ts”], 可以是目录及文件,可以正则,可以glob
“exclude”:[“demo.ts”], 可以排除include 里文件
“files”:[“demo.ts”], 和include一样,但只能是文件,不会被exclude排除

compileOptions

strict 严格ts
noImplicitAny 充许你的注解类型any不用特意标明
strictNullChecks 不充许有null值出现
ts-node 也会用tsconfig.json
rootdir 源代码根目录
outDir 编译输出的文件
sourceMap 生成.map文件 debug用
noUnsedLocal 不能出现没有使用的本地变量

18 类型保护与联合类型

不单一的类型 number | boolean
只有在联合类型的时候需要类型保护
类型断言 person as Waiter
skill in person
typeof person ==='string'
first instanceof NumberOBJ instanceof 只能用在类上

 1
 2interface Waiter {
 3    anjao:boolean;
 4    say:()=>{};
 5
 6}
 7interface Teacher {
 8    anjao:boolean;
 9    skill: ()=>{};
10}
11
12function judgeWho ( person : Waiter | Teacher){
13    if(person.anjao){
14        (person as Teacher).skill()
15    }
16    else{
17        (person as Waiter).say()
18    }
19    //person.say();
20}
21function judgeWho2 ( person : Waiter | Teacher){
22    if('skill' in person){
23        person.skill()
24    }
25    else{
26        person.say()
27    }
28    //person.say();
29}
30
31function add( first: string | number , second : string | number){
32    if( typeof first === "string" || typeof second === "string")
33        return `${first} ${second}`
34    return first + second;
35}
36
37class NumberObj{
38    count : number;
39}
40
41function addObj(first : Object | NumberObj,second: Object | NumberObj  ){
42    if( first instanceof NumberObj && second instanceof NumberObj ){
43        return first.count + second.count;
44    }
45    return 0;
46}

19 enum 类型 typescript 独有

 1enum Status {
 2    MASSAGE,
 3        SPA,
 4        DABAOJIAN
 5}
 6
 7function getServr(status : any){
 8    if( status === Status.MASSAGE )
 9        return "MASSAGE";
10    else if ( status === Status.SPA)
11        return "SPA";
12    else if( status === Status.DABAOJIAN )
13        return "DABAOJIAN"
14}
15
16console.log(getServr(Status.MASSAGE))
17
18console.log(Status.MASSAGE,Status[1])
19//反查

enum 可以反查 log(Status[1])

20 泛型

 1
 2// 函数泛型
 3function join<T>(first: T , second: T){
 4    return `${first}${second}`
 5}
 6
 7join<string>("baidu",".com")
 8
 9//泛型 数组的使用
10function myFUnc<T>(params : T[]){
11
12}
13
14function myFUnc2<T>(params : Array<T> ){
15
16}
17
18//泛型类型推断，最好不要这么用，不好理解
19join(1,2)

21 类中使用泛型

泛型在类中的使用 class C<T>

为了约束传入的参数

泛型继承
泛型约束

 1class SelectGirl{
 2    constructor(private girls:string[]){
 3    }
 4
 5    getGirl(index:number):string{
 6        return this.girls[index];
 7    }
 8}
 9
10const selectGirl = new SelectGirl(['1','2','dajiao'])
11
12// 使用下标 来得到数据
13console.log( selectGirl.getGirl(1) )
14
15//泛型重构
16class SelectGirl2<T> {
17    constructor (private girls : T[]){}
18
19    getGirl(index:number) : T{
20        return this.girls[index];
21    }
22}
23
24const selectgirl2 = new SelectGirl2<string>(['1','2','dajiao'])
25
26// 使用下标 来得到数据
27console.log( selectgirl2.getGirl(1) )
28
29//泛型中的继承
30interface Girl{
31    name: string;
32}
33
34// T是一个泛型，但是它之中必需有一个name属性
35class selectGirl3<T extends Girl>{ 
36    constructor (private girls : T[]){}
37
38    getGirl(index:number) : string {
39        return this.girls[index].name;
40    }
41}
42
43const selectgirl3 = new selectGirl3([
44    {name:'1'},
45    {name:'2'},
46    {name:'3'}
47])
48console.log( selectgirl3.getGirl(1) )
49
50const a:string  =1
51
52// 泛型约束
53// 只能是 number 或 string
54//
55class SelectGirl4< T extends number | string > {
56    constructor(i){}
57}

22 23 命名空间

在浏览器中运行与看效果

vscode -> file -> openFloder
vscode->terminal npm init
tsc -init
mkdir src && mkdir build && touch index.html
命名空间可以嵌套

1namespace fater {
2    namespace child {
3    }
4}

tsconfig.json

outFile ->生成一个单独的文件
moduble coomjs ->‘amd’

24 import

需要引用 require.js 来使用 amd 的模块

1require(["page"],function(){
2})

25 parcel

1yarn add --dev parcel

26 ts 使用jquery

1yarn add @types/jquery

1declare var $:any;

资料

安装

数据类型

脚手架

类型注解 与 类型推断

05 函数参数和返回类型的注解

06数组类型的定义

07 元组的使用

08 09 interface 接口

10 类的概念和使用

类的访问类型

12 类的构造函数

13 类的getter setter static 只读

14 抽象类

15 16 17 tsconfig.json 配置文件

18 类型保护与联合类型

19 enum 类型 typescript 独有

20 泛型

21 类中使用泛型

22 23 命名空间

24 import

25 parcel

26 ts 使用jquery

类型注解与类型推断