TypeScript基本知識点整理(絶対入門---マジ!!)

TypeScript ， ， ！ ：

変数タイプ

関数

クラス

インタフェース

汎用

ネーミングスペース

連合タイプ

タイプ断言

：

npm i typescript -g //    typescript

npm init -y //     ，     ，  package.json  

tsc --init //  tsconfig.json  

npm i @types/node -S //                

；
一、変数タイプ1.number

let num1 : number = 20;
let num2 : number = 175.5;
let a1 : number = Infinity; //    
let a2 : number = -Infinity; //    
let a3 : number = NaN;

注意:Infinity, -Infinity, NaN Number 2.undefined

let un : undefined = undefined;

注意:undefined undefined typescript ， ， undefined 3.null

let nu : null = null;

注意:null null null ，undefined ， ， undefined ， unll 。
特に注意: ，undefined null ， ， ， 。4.string

//   
let str : string = '  ！'
//    
let str1 : String = new String('  ！')

5. boolean

let boo : boolean = true;
let boo1 : boolean = false

6.symbol

let sy : symbol = Symbol('bar');

注意:symbol Symbol 。7.

//   
let arr1 : number[] = [1, 2]

//  ---->             
let arr2 : Array = ['a', 's']

//    
let arr3 : string[] = new Array('a', 's')

//    -->           ，           number   string，       
let arr4 : Array = [2, 'a']

8. （tuple）

let tup : [string,number] = ['asdasd', 43233];

注意: ， ， ， 9. （enum） enum---> 。

enum REN {
    // nan = 1 ----->     
    nan,
    nv,
    yao
}
console.log(REN.nan)//0
console.log(REN.nv)//1
console.log(REN.yao)//2
//       ，TS             
console.log(REN[2])// yao

注意: ----> 0 , ，

enum SIJI {
    chun = ' ',
    xia = ' ',
    qiu = ' ',
    dong = ' '
}

console.log(SIJI.chun)// 
console.log(SIJI.xia)// 
console.log(SIJI.qiu)// 
console.log(SIJI.dong)// 

注意: ， ， ， 10. void void ---> ，

function f1() : void {
    console.log('void  ')
}

注意: undefined。 JS ， ， undefind。 ， void 。 11. any
注意: any ，any

let an : any = 'any   ';
console.log(an)//any   
an = 25;
console.log(an)//25

注意: any ， ， ，（ ）， any

let an1;
an1 = '       ，      ';
console.log(an1)//       ，      
an1 = 25
console.log(an1)//25

any ，

let something: any = 42
something.mayExist()    //    ，           
something.toFixed() //    ，      ，           

12. never
注意:never ， never ， never never （ never ）。 any never。
Neverタイプは2つのケースでよく使用されます ---》 never

function f5() : never {
    while (true) {
         // do something
     }
 }

function f2(msg : string) : never {
    throw new Error(msg)
}

13.

let da : Date = new Date()
console.log(da)

14.

//       
let reg1 : RegExp = new RegExp('ljy','gi')
console.log(reg1)

//       
let reg2 : RegExp = /ljy/gi
console.log(reg2)

二、関数1.
定義関数には、関数宣言と関数式の2つの形式があります.関数のパラメータと戻り値を定義して、そのタイプを指定します.関数を呼び出す場合、入力パラメータタイプは定義関数パラメータタイプと一致する必要があります.

//                         
function f(age:number) : string {
    return `   ${age}    `;
}

let age : number = 22;
let res : string = f(age);
console.log(res)

let f1 = (age:number) : string => {
    return `   ${age}    `;
}
let age1 :number = 21;
let res1 : string = f1(age1);
console.log(res1)

注意: ， ： ： fn
TypeScriptの=>とES 6の=>を混同しないように注意
TypeScriptのタイプ定義では、=>は関数の定義を表し、左は入力タイプ、右は括弧で囲み、右は出力タイプです.

// let fn: (x: Type, y: Type) => Type = (x, y) => {}

//  
var run3: (x: number, y: number) => string = function(x: number, y: number): string{
    return 'run3';
}
console.log(run3(1, 2))


//    run3       ，                 。        ts    ，     ：

var run4: (x: number, y: number) => string = function(x, y){ 
//                    ，          
    return 'run4';
}
console.log(run4(1, 2))

2. void

function  f3() : void {
    console.log('     ')
}
f3()

3.
注意:

function f4(age:number, cm?:number) : string {
    //cm     ，     
    if (cm) {
        return `    ------   ${cm}  `;
    } else {
        return `    -----  ${age} `
    }
}
console.log(f4(12))
console.log(f4(24, 175))

4.
注意:tsはデフォルト値が追加されたパラメータをオプションパラメータとして認識し、デフォルト値があるパラメータの位置は【オプションパラメータは後ろに置く必要がある】の制限を受けない

function f5(age:number, cm:number = 188) : string {
    return `    ----   ${age} ---   ${cm}cm`
}
console.log(f5(25))

5.

//         ，         ，        
function f6(...rest:number[]) : number[] {
    return [...rest];
}
console.log(f6(1,2,3,4,5,6,7,8,9))

function f7(a:number, b:number, ...rest:number[]) : number[] {
    return [a, b, ...rest]
}

console.log(f7(100,200,1,2,3,4,5,6))

6.

interface int1 {
    say (age:number) : void  //    
}

interface int2 {
    say : (age:number) => void  //    
}

7.
注意: ， any any （ ） typescript ： TypeScript ， ， 。

function f1(x: number, y: number): number;
function f1(x: string, y: string): string;

//          ，           
function f1(x: any, y: any): any {
    return x + y;
}

f1(1, 2);
f1('a', 'b');

三、類1. public：
注意: ， ， ， , ， public

class People {
    public name : string
     constructor (name:string) { //       
        this.name = name
    }
    public say () :void {
        console.log('  ')
    }
}

private
注意: ， ，

class People {
    private name : string
     constructor (name:string) { //       
        this.name = name
    }
    private say () :void {
        console.log('  ')
    }
}

protected
注意: ，

class People {
    protected name : string
     constructor (name:string) { //       
        this.name = name
    }
    protected say () :void {
        console.log('  ')
    }
}

注意:
TypeScriptはコンパイル時のみチェックし、クラスの外部でprivateまたはprotectedによって修飾された属性またはメソッドにアクセスしようとすると、TSはエラーを報告しますが、これらの属性またはメソッドへのアクセスを阻止することはできません.readonly
注意: ，

class People {
    readonly name : string
     constructor (name:string) { //       
        this.name = name
    }
}

2.

class People {
    name : string //   public
    age : number
    constructor (name:string, age:number) { //       
        this.name = name
        this.age = age
    }
    say () :void {
        console.log('  ')
    }
}

const HH : People = new People('  ', 21)
console.log(HH.name)
console.log(HH.age)
HH.say()

3.

class Student extends People {
     cm : number
    constructor (name:string, age:number, cm:number) {
        super(name, age) //super          ，        ，super       
        this.cm = cm
    }
    work () : void {
        console.log('  ')
    }
}

const  stu1 : Student = new Student('liu', 22, 175)
console.log(stu1.name)
console.log(stu1.age)
console.log(stu1.cm)
stu1.say()
stu1.work()

4.
注意:

class People {
    static name1 : string = '    ';
    static say () :void {
        console.log('    ')
    }
}
console.log(People.name1)
People.say()

注意: ， ， ，（java ）， ， 5. ----> ， ，

class Animal {
    name : string
    constructor (name:string) {
        this.name = name
    }
    eat () : void {
        //           eat  
    }
}

class Laohu extends Animal {
    constructor (name:string) {
        super(name)
    }
    eat () : void {
        console.log(`${this.name}  ！`)
    }
}

class Laoshu extends Animal {
    constructor (name:string) {
        super(name)
    }
    eat () : void {
        console.log(`${this.name}   ！`)
    }
}
const laohu : Laohu = new Laohu('  ')
laohu.eat()
const  laoshu : Laoshu = new Laoshu('  ')
laoshu.eat()

6.
注意: （implement） 。 ， 。 ， 。 ，

interface Play {
    plays (difang:string) : void;
}

class Playy implements Play {
    plays(difang: string): void {
        console.log(`    ${difang} ！！！`)
    }
}

const pl : Playy = new Playy();
pl.plays('  ')

注意:クラスとインタフェースの違い （implement） ， （extends） 。 ， 。 ， instanceof 。 。 （public） ， ， 。 7.
注意: abstract ， ( ) ： ， ， abstract ( ) ( ： Animal eat， eat )

abstract class People {
    name : string
    constructor (name:string) {
        this.name = name
    }
    abstract eat (food:string) :void;//           ，           
}

class Stud1 extends People {
    //                   
    constructor (name:string) {
        super(name)
    }
    eat(food: string): void {
        console.log(`   ${food}`)
    }

}

const stu11 : Stud1 = new Stud1('liu')
stu11.eat('  ')

四、インタフェース
注意: ： ； ， ；typescript interface 。 ： ， ， ， ， 。typescrip java， ， 、 、 。 1. ， json

interface Sx {
    name : string
    age : number
}

function f8(peop:Sx) {
    //name age     
    console.log(peop)
}

const obj = {
    name : 'liu',
    age : 25
}
f8(obj)

2.

interface Sta {
    (difang : string, todo : string) : string
}

let play : Sta = (difang:string, todo:string) : string => {
    return `   ${difang} ${todo}`
}

console.log(play('  ', '   '))

3.

//      
interface UserArr {
    //   number，   string
    [index : number] : string
}

const arr : UserArr = ['a', 'b']
console.log(arr)

//       
interface UserObj {
    [index : number] : number
}

const obj1 : UserObj = { 2:1, 3:4 }
console.dir(obj1)

4.

interface Anmal {
    //              
    name : string
    eat (food:string) : void
}
//       implements ,                   
class Laoshu implements Anmal{
    name : string
    constructor (name : string) {
        this.name = name
    }
    eat(food:string):void {
        console.log(`${this.name} ${food}`)
    }
}
const lao : Laoshu = new Laoshu('  ')
lao.eat('  ')

5.

//  Anmal   
//  LaoHu     ，      LaoHu   Anmal      
interface LaoHu extends Anmal{
    say (sa : string) : void
}
//       
class XiaoLaoHu implements LaoHu{
    name : string
    constructor (name : string) {
        this.name = name
    }
    eat (food : string) : void {
        console.log(`${this.name} ${food}`)
    }
    say(sa: string): void {
        console.log(`${this.name} ${sa}`)
    }
}

const xiao : XiaoLaoHu = new XiaoLaoHu('  ')
xiao.eat(' ')
xiao.say('  ')

五、汎用
注意: ， ， ， ， ， ，
構文:一般的には大文字1. ， T

function f9(value:T) : T {
    //       T，        T
    console.log(`    ${value}`)
    return value
}

f9(10)

function f10  (value:T) : any {
    //        T，        
    console.log(`    ${value}`)
    return `    ${value}`
}

console.log(f10('  ljy'))

2. ， < >

class Ni  {
    name : T
    constructor (name : T) {
        this.name = name
    }
    say (value : T) : any {

        return `${this.name} ${value}`
    }
}

const ni1 = new Ni('ljy')//    ，       string
console.log(ni1.say('  '))

const ni2 = new Ni(20)//    ，       number
console.log(ni2.say(23))

3.

interface Niniubi {
     (value:T) : any
}

let fff : Niniubi = (value : T) : any => {
    return `    ${value}`
}
console.log(fff(25))
console.log(fff('ljy'))

interface ConfigFnTwo{
    (value:T):T;
}
function setDataTwo(value:T):T{
    return value
}
var setDataTwoFn:ConfigFnTwo = setDataTwo
setDataTwoFn('name');

六、ネーミングスペース

namespace Shuaige {
    export class DeHua {
        public name : string = '   '
        say () {
            console.log(`  ${this.name}`)
        }
    }
}

namespace Bajie {
    export class DeHua {
        public name : string = '   '
        say () {
            console.log(`  ${this.name}`)
        }
    }
}


const de : Shuaige.DeHua = new Shuaige.DeHua()
de.say()

const de1 : Bajie.DeHua = new Bajie.DeHua()
de1.say()

七、連合タイプ
結合タイプは、1つの値がいくつかのタイプの1つであることを示し、各タイプを区別するために(|)を使用します.
コンビネーションタイプの変数は、付与されると、タイプ推論のルールに基づいてタイプが推定されます.
値が連合タイプの場合、この連合タイプのすべてのタイプで共有されているメンバーにのみアクセスできます.

let ddd : string | number
ddd = 'nihao'
console.log(ddd.length)//ddd      string，     length       
console.log(`    ${ddd}`)
ddd = 255
console.log(`    ${ddd}`)
console.log(ddd.length)//   ddd      number，     length        
//ddd = false                   err
//console.log(`    ${ddd}`)  err

1.
TypeScriptが結合タイプの変数がどのタイプなのか分からない場合、この結合タイプのすべてのタイプに共通する属性またはメソッドにアクセスするしかありません.

function f11(name : string, age : string | number) {
     console.log(age.length)//  
 }
f11('ljy', '21')

  ：Property 'length' does not exist on type 'string | number'.Property 'length' does not exist on type 'number'.

前の例ではlengthはstringとnumberの共有属性ではないので、エラーが発生します.したがって、タイプの共通のプロパティまたはメソッドにのみアクセスできます.

function f12(name : string, age : string | number) {
    console.log(age.toString)
}
f12('ljy', 21)

八、タイプ断言
注意:タイプアサーション(Type Assertion)は、値のタイプを手動で指定するために使用できます. ：

 
  
  as   

型断言の使い方は以上のように、断言が必要な変数の前につければよい
先ほどTypeScriptで連合型の変数がどのタイプなのか分からなかったときに

 function f13(name : string, age : string | number) {
     if (age.length) { //  
         console.log(age.length) //  
     }  else {
         console.log(age.toString)
     }

 }

 f13('ljy', 21)//Property 'length' does not exist on type 'string |number'.Property 'length' does not exist on type 'number'

この場合、タイプブレークスルーを使用してageをstringにブレークスルーできます.

function f14(name : string, age : string | number) {
    if ((age).length) {//  
        console.log((age).length)//  
    }  else {
        console.log(age.toString)
    }

}
f14('ljy', 21)

タイプブレークスルーはタイプ変換ではありません.結合タイプに存在しないタイプとブレークスルーすることはできません.

 function toBoolean(something: string | number): boolean {
     return something;
 }
Type 'string | number' cannot be converted to type 'boolean'

私は読んで、ts公式ドキュメント、jspangのtsチュートリアル、Hopskenのtsチュートリアル、Staticyのtsチュートリアルを経て、やっと入門して、更にこの感謝!
転載先:https://juejin.im/post/5cd97938e51d456e39631999