2019-10-29 Typescript的基础数据类型和接口

//typescript
let a: string = 'hello2222';
console.log(a);

//枚举
enum Color{Red, Green, Blue};
let c: Color = Color.Green;
let colorName: string = Color[2];
console.log('color', c, colorName);

let notSure: any = 4;
notSure.toFixed();

let prettySure: Object = 4;
// prettySure.toFixed(); //error

// for (let i = 0; i < 10; i++) {
//     setTimeout(function() { console.log(i); }, 100 * i);
// }

let [, second, , fourth] = [1, 2, 3, 4];
console.log(second, fourth); //2 ,4

let o = {
    x: "foo",
    b: 12,
    c: "bar"
};
let { x, ...passthrough } = o;
let total = passthrough.b + passthrough.c.length;
console.log(total);

let {x: foostr, c: barstr} = o;
console.log(foostr, barstr); // <==> var foostr = o.x; var barstr = o.c;

//展开对象 
let sss = { y: 'hhh', z: 'eeee'};
let bothstr = {...sss, z: '8888'};
console.log(bothstr); //展开对象后面的属性会覆盖前面的属性

//Typescript的核心原则之一是对值所具有的结构进行类型检查
function ducktyping(duckstr: {id: string; value?: any}){
    duckstr.value = 'ducktypingssssss';
    console.log(duckstr.id);
}
var d = {id: 'ducktyping'};
ducktyping(d);

//interface的使用
interface LabelledValue {
    size?: number; 
    label?: string; //带有问号表示可选属性
    readonly value: number; //只读属性
}
function printLabel(labelledObj: LabelledValue){
    if(!labelledObj.label){
        labelledObj.label = 'hhhhha';
    }
    // labelledObj.value = 999; //error
    console.log(labelledObj.size, labelledObj.label);
}
// let myObj = {size: 10, label:'size 10 Object'};
let myObj = {size: 10, value: 998};
printLabel(myObj);

interface Point {
    readonly x: number;
    readonly y: number;
}
let p1:Point = {x: 10, y:10};
// p1.y =  20; //error y is a read-only property

//ReadonlyArray<T>
let axxx: number[] = [1,2,3,4,5,6];
let ro: ReadonlyArray<number> = axxx;
axxx.push(7);
axxx.length = 10;
console.log(axxx);
// ro.push(8); //error
// ro.length = 10;  //error
//如何判断该使用readonly或者const, 作为变量使用用const,作为属性使用则用readonly

//额外的属性检查
interface Squareconfig{
    width?: string;
    height?: string;
    [propName: string]: any;
}
function createSquare(config: Squareconfig):{area: string}{
    // let newConfig = {width: "1111", area: "9999"};
    // if(config.width){
    //     newConfig.width = config.width;
    // }
    // return newConfig;
    let newConfig = {...config, area: "100"};
    return newConfig; //return 不存在的属性不能分配
}
// createSquare({widtheee: "9999"} as Squareconfig);
let squareOptions = {widtheee: "9999xxx"};
let mySquare = createSquare(squareOptions);
console.log(mySquare);

//函数类型
interface SearchFunc{
    (source: string, substring: string): boolean
}
let mySearch: SearchFunc;
mySearch = function(src: string, sub: string): boolean{
 return true;
}

//可索引的类型
//类类型

//继承接口
interface Shape {
    color: string
}
interface PenStroke {
    penWidth: number;
}
interface Square extends Shape, PenStroke{
    sideLength: number;
}
let square = <Square>{};
square.color = "#ff0000";
square.sideLength = 10;
square.penWidth = 5.0;

//混合类型
//接口继承类
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,137评论 6 511
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,824评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,465评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,131评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,140评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,895评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,535评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,435评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,952评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,081评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,210评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,896评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,552评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,089评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,198评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,531评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,209评论 2 357