TypeScript入门

这是我参与$\color{#1bacf3}{「第五届青训营」}$伴学笔记创作活动的第4天。

一、 TypeScript与JavaScript

• TypeScript是静态类型，是弱类型语言；JavaScript是动态类型，是弱类型语言。

• TypeScript---可读性强：基于语法解析TSDoc,ide增强;

$~~~~~~~~~~~~~~~~~~~~~~~~~$可维护性增强：在编译阶段暴露大部分错误；

$~~~~~~~~~~~~~~~~~~~~~~~~~$多人合作的大型项目中，获得更好的稳定性和开发效率;

$~~~~~~~~~~~~~~~~~~~~~~$---包含于兼容所有Js特性，支持共存支持渐进式引入与升级 。

二、基本语法

• $\color{#fea84d}{基础数据类型}$

/* 字符串 */
const q: string = 'string';
/* 数字 */
const q:number = 10;
/* 布尔值 */
const q:boolean = true;
/* null */
const q:null = null;
/* unidefined */
const q:undefined = undefined;

• $\color{#fea84d}{对象类型}$

const bytedancer:IBytedancer = {
jobId:9303245,
name:'Lin',
sex:'man',
age:28,
hobby:'swimming',
}

interface IBytedancer {
/*只读属性：约束属性不可在对象初始化外赋值*/
readonly jobId:number;
name:string;
sex:'man' | 'woman' | 'other';
age:number;
/*可选属性：定义该属性可以不存在*/
hobby?:string;
/*任意属性：约束所有对象属性都必须是该属性的子类型*/
[key:string]:any;
}

• $\color{#fea84d}{函数类型}$

let myAdd: (x:number, y:number) => number =
    function(x: number, y: number): number { return x + y; };

• $\color{#fea84d}{函数重载}$

let suits = ["hearts", "spades", "clubs", "diamonds"];

function pickCard(x: {suit: string; card: number; }[]): number;
function pickCard(x: number): {suit: string; card: number; };
function pickCard(x): any {
    // Check to see if we're working with an object/array
    // if so, they gave us the deck and we'll pick the card
    if (typeof x == "object") {
        let pickedCard = Math.floor(Math.random() * x.length);
        return pickedCard;
    }
    // Otherwise just let them pick the card
    else if (typeof x == "number") {
        let pickedSuit = Math.floor(x / 13);
        return { suit: suits[pickedSuit], card: x % 13 };
    }
}

let myDeck = [{ suit: "diamonds", card: 2 }, { suit: "spades", card: 10 }, { suit: "hearts", card: 4 }];
let pickedCard1 = myDeck[pickCard(myDeck)];
alert("card: " + pickedCard1.card + " of " + pickedCard1.suit);

let pickedCard2 = pickCard(15);
alert("card: " + pickedCard2.card + " of " + pickedCard2.suit);

• $\color{#fea84d}{数组类型}$

/*「类型+方括号」表示*/
type IArr1 number[];
/*泛型表示*/
type IArr2 Array<string | number | Record<string,number>>;
/*元祖表示*
type IArr3 = [number,number,string,string];
/*接口表示*/
interface IArr4 {
    [key:number]:any;
}

const arr1:IArr1=[1,2,3,4,5,6];
const arr2:IArr2=[1,2,'3','4',{a:1}];
const arr3:IArr3=[1,2,'3','4'];
const arr4:IArr4 ['string',() => null,{}[]]

• $\color{#fea84d}{Typescript泛型}$ 泛型的本质是参数化类型，通俗的将就是所操作的数据类型被指定为一个参数，这种参数类型可以用在类、接口和方法的创建中，分别成为泛型类，泛型接口、泛型方法。

$\color{#2e87fa}{相关文章}$

Typescript中的泛型的作用及使用场景 - 全栈弄潮儿 - 博客园 (cnblogs.com)

你不知道的 TypeScript 泛型（万字长文，建议收藏） - 脑洞前端 - SegmentFault 思否