TypeScript踩坑记录

admin管理员组

文章数量:1567259

首先首先做自动编译

自己运行ts文件要用 tsc命令，如  tsc xxx.ts

想要自动编译：

第一步   tsc --init 生成tsconfig.json  改输出目录 "outDir" : "./js"（这里你要自己建立好一个js文件夹）

第二部  在vs里面任务，选择监视tsconfig.json

关于经常会犯的报错（这个写前面）

TypeScript 2.7引入了一个新的控制严格性的标记 --strictPropertyInitialization

现在，如果开启 strictPropertyInitialization，我们必须要确保每个实例的属性都会初始值，可以在构造函数里或者属性定义时赋值。

class StrictClass {
    foo: number;
    bar = 'hello';
    baz: boolean; 
    // error,Property 'baz' has no initializer and is not definitely assigned in the constructor
    constructor() {
        this.foo = 42;
    }
}

有两种情况下我们不可避免该error的产生：

1. 该属性本来就可以是 undefined 。这种情况下添加类型undefined
2. 属性被间接初始化了（例如构造函数中调用一个方法，更改了属性的值）。这种情况下我们可以使用 显式赋值断言 (修饰符号 !) 来帮助类型系统识别类型。后面具体介绍它，先看下代码中怎么使用：

class StrictClass {
    // ...
    baz!: boolean;
    // ^
    // 注意到这个!标志
    // 代表着显式赋值断言修饰符
}

显式赋值断言(Definite Assignment Assertions)

尽管我们尝试将类型系统做的更富表现力，但我们知道有时用户比TypeScript更加了解类型

跟上面提到的类属性例子差不多，我们无法在给一个值赋值前使用它，但如果我们已经确定它已经被赋值了，这个时候类型系统就需要我们人的介入

let x: number;
initialize();
console.log(x + x);
//          ~   ~
// Error! Variable 'x' is used before being assigned.

function initialize() {
    x = 10;
}

添加 ! 修饰:let x!: number,则可以修复这个问题

我们也可以在表达式中使用!,类似 variable as string和 <string>variable :

let x: number;
initialize();
console.log(x! + x!); //ok

function initialize() {
    x = 10;
}

下面是一些小代码记录

关于类的继承

在父级类和子级类中一定要写一个constructor函数，如：
 

// 父级
class Parent{
    name:string;
    age:number;
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
}
// 子级
class Web extends Tparent{
     constructor(name:string){
    this.name = name;
             }
 }

这个里面要放父级有的所有变量，这样子级才能拿得到。不然会报错。

标识符

 static是静态内容

访问修饰符

 public是共有内容，默认 例子：public name:string;
 private是私有内容，私有属性无法继承和访问  例子： private name:string;

接口

// 通过关键字interface来声明接口
interface laberValue{
    laber:string;
}
// 指定类型为接口类型
function printLaber(laberValue:laberValue) {
    console.log(laberValue.laber)
}
var myobjs = {laber:'hellos rouse'}
printLaber(myobjs)

// 接口的数组类型

interface StringArray{
    //[index:number]这是下标
    [index:number]:string;
}
var myArray:StringArray;
myArray=["fuck","any","www",""];
console.log(myArray[1]);

// 接口的class的类型，对类的约束

interface ClockInterface{
    currentTime:string;
    // void：不需要返回值
    setTime(d:string):void;
}
class Clock implements ClockInterface{
    currentTime:string;
    setTime(){
        console.log('tag '+this.currentTime);
    }
    constructor(currentTime:string){
        this.currentTime=currentTime;
    }
}

var dsq=new Clock('jacks');
dsq.setTime();

// 接口的继承和混合类型

interface Shape{
    color:string;
}

interface PenStroke{
    penWidth:number;
}

interface Square extends Shape,PenStroke{
    sideLength:number;
}

总结：一个接口可以继承多个不同的接口，在类class继承接口后，要对接口中所含有的属性进行一次重写。

泛型

// 泛型<T>,这个T你可以任意指定其他内容，如：<K>
// function Hellopes(num:number):number {
//     return num;
// }

function Hellopes<T>(num:T):T {
        return num;
    }
// 当你使用时需要什么类型就设置什么类型<类型>
var output = Hellopes<string>("hello,jack");
console.log(output)

// 泛型的基本运用

function Hellopll<T>(number:T[]):T[]{
    console.log(number.length)
    return number;
}
var listers:Array<string>=Hellopll<string>(["1","2","3"]);
for(var i=0;i<listers.length;i++){
    console.log(listers[i]);
}

Module

解释：主要是把类，接口都定义在一个module中，方便维护和编写，避免出错

// module,每个类和接口要加export
module Validition{
    export interface StringValidator{
    isAccept(s:string):boolean;
}
    var letterRegxp = /^[A-Za-z]+$/;
    var numberRegxp = /^[0-9]+$/;
    export class letters implements StringValidator{
        // 复写函数
        isAccept(s:string):boolean{
            return letterRegxp.test(s);
        }
    }
    export class ZipCodeVailed implements StringValidator{
    isAccept(s:string):boolean{
        return s.length === 5 && numberRegxp.test(s);
    }
}
}

// 泛型的类型

function Heoo<T>(arg:T):T{
    return arg;
}
// 箭头函数意义(arg:K)的函数返回值类型为K
var myhello:<K>(arg:K)=>K=Heoo;
// 因为它本身自带类型检查，所以上诉代码可以简写为：var myhello=Heoo;
console.log(myhello("heoooooo"));

// 调用时定义类型

interface Hellp{
    <T>(arg:T):T;
}
function myHellp<T>(arg:T):T{
    return arg;
}
var MH:Hellp = myHellp;
// MH后面可以接类型，也可以不接，直接写MH("这是函数")
console.log(MH<string>("这是在调用时定义的泛型"));

// 定义接口时定义类型

interface Hellw<T>{
    (arg:T):T;
}
function eee<T>(arg:T):T{
    return arg;
}
var qeew:Hellw<string>=eee;
console.log(qeew("这是在接口定义了泛型"));

// 泛型类（class）

class HelloNumber<T>{
    zeros!:T;
    add!:(x:T,Y:T) => T;
}

// 类的种类在实例化时用<>指定

var myHelloNumber = new HelloNumber<number>();
myHelloNumber.zeros = 10;
myHelloNumber.add =(x,y)=>x+y
console.log(myHelloNumber.zeros)
console.log(myHelloNumber.add(1,5))

 

本文标签： typescript