初入typescript笔记

fsmStudy 发布于2019-08-23 15:41 / 1919人阅读

摘要：注意变量声明没有指定类型。因此，程序使用类型推断来确定变量的数据类型，第一次赋值为，设置为类型。

typescript 的基本类型
1.number 数字类型 example:

let val: Number = 2
2.string 字符串 example:

let val: String = "2"
3.Boolean 布尔类型 example:

let val: Boolean = false
4.array 数组 example:

let val: Array = [2,3] //只能数字
leg val: number[] = [1,2,4,5] //数组里只能是全部数字

// 类数组有自己的定义方式
let args: IArguments = arguments;
5.Boolean 元祖 example:

let x = [String, Number]
x = ["val", 2]
// 按定义顺序排序
6.enum 枚举 example:

enum val {one = 3, two, three}
let curVal: val = val.one
console.log(curVal) // curVal: 3

let val : String | null | undefined = ""
val = 2
// 创建变量可以多个变量属性
注意：假设第一行代码声明了变量 num 并=设置初始值为 2。注意变量声明没有指定类型。因此，程序使用类型推断来确定变量的数据类型，第一次赋值为 2，num 设置为 number 类型。

7.interface 接口 example:

interface Person {

   name: string;
   age: number;
   [val: string]: any
   // 可以定义左边可以设置是字符串还是数字

}

let tom: Person = {

        name: "Tom",
        age: 25
    };

interface Person {

        readonly name: string; // 只能创建的时候被赋值
        age?: number; // 这个字段可以没有
}

let tom: Person = {

             name: "Tom",
};

// class类中接口的使用
interface ClockInterface {
  currentTime: Date;
}

class Clock implements ClockInterface {
    currentTime: Date;
    constructor(h: number, m: number) { }
}

typescript 的函数使用方法
// 传入的参数也可以设置类型
function func(one: Number = 2, two?:string): Number {

conosle.log(two) // 默认输出undefined
return one + two

}
func(1) // Nan

// 添加number就必须要有返回数字，不然会报错。如果不想返回就把number换成void

//es6的解构用法
function fun (...rest: Number[]):Number {

return rest

}

// 函数里的断言<>val || <类型>值

function getLength(something: string | number): number {

 if ((something).length) { // 不确定这边的值是number还是string.  确定是string就可以获取长度
     return (something).length;
 } else {
     return something.toString().length;
 }

}

// 返回一个数组

function argArray(...something: Number[]): Array {

      return something;

}

// 传入一个为定义的参数

function argArray(...something: Number[], value: T): asy{

        // value属于为定义的属性类型
        return something;
}

example: argArray(1,2,4,"str") 
// value 会自动匹配成‘str’的类型

// ts的基本使用

function Throttling(callback:()=> void, time:number):()=> void {

 let recording: number | undefined = undefined
 return function ():void {
    if(recording)clearTimeout(recording)
     
    recording = setTimeout(() => {
        callback()
    },time)
 
}

}
用ts写了一个终结者模式

interface parameter {

name: string;
backCall?: () => {};

}
let observer = (function(){

let obj = {}
return {
    add(parameter): void {
        let val: Array | undefined = obj[parameter.name]
        if(>val){
            val.push(parameter.backCall)
        }else{
            obj[parameter.name] = []
            obj[parameter.name].push(parameter.backCall)
        }
        // >val ? obj[parameter.name].push(parameter.backCall) : obj[parameter.name] = [], obj[parameter.name].push(parameter.backCall)
    },
    run(runComman:string): void{
        let val: Array | undefined = obj[runComman]
        if(>val){
            for(let key of val){
                key()
            }
        }

    }
}

})()

云服务器 GPU云服务器小白初入 TypeScript typescript javascript typescript-ionic2

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102440.html

angular2初入眼帘之－搭个环境

angular2是什么？我猜不容我赘述，各位一定略有耳闻，无论是曾经AngularJS的拥趸，亦或是React的粉丝，都或多或少的对她有过一点了解。未见其物、先闻其声，angular2在问世之前已经做足了宣传，想必诸位也一定被下面各种词汇所震慑，什么：TypeScript、 ES5、 ES6、 Dart、 Immutable、 Unidirectional Data Flow、 Reactive ...

everfight 2019-08-19 18:05 评论0 收藏0
《深入react技术栈》学习笔记（一）初入React世界

摘要：前言以深入学习技术栈为线索，记录下学习的重要知识内容。要传入时，必须使用属性表达式。如果要使用自定义属性，要使用前缀这与标准是一致的。前言以《深入学习react技术栈》为线索，记录下学习React的重要知识内容。本系列文章没有涵盖全部的react知识内容，只是记录下了学习之路上的重要知识点，一方面是自己的总结，同时拿出来和在学习react的人们一块分享，共同进步。正文一：rea...

verano 2019-08-20 14:47 评论0 收藏0
angular2初入眼帘之－service

摘要：前集回顾上一章里我们在里通过组合三个组件，并通过单向数据流的方式把她们驱动起来。设计每章都会提一下，先设计使用场景这种方式，我们称之为，不了解的朋友参考以手写依赖注入。前集回顾上一章里我们在AppComponent里通过组合InputItem、 CheckableItem、 Counter三个组件，并通过Unidirectional Data Flow(单向数据流)的方式把她们驱动...

jokester 2019-08-19 18:10 评论0 收藏0
《深入react技术栈》学习笔记（二）初入React世界

摘要：用于规范的类型与必需的状态。表示由组件更改的数据，通常是通过与用户的交互来更改的。为了实现的修改，需要注册事件处理程序到相应的元素上。当事件发生时，将更新后的值是从中检索，并通知组件。通常情况下，该函数初始化状态使用，，或其他数据存储。前言上一篇文章中，我们讲到了JSX的一些用法和注意事项，这次我们来讲react中最基础也是特别重要的内容：组件。这篇文章包含组件的以下内容：状态、属...

MRZYD 2019-08-20 14:47 评论0 收藏0