Typescript基础

//可以完全按照javascript标准语法编写代码const hello = (name: string) => {    console.log(`Hello, ${name}`);    }hello('typescript')

执行yarn tsc后，会在当前目录下生成一个demo.js文件，使用node命令执行文件

node demo.js

hello typescript

基础类型

const a: string = 'foo' //字符串const b: number = 12    //数字const c:boolean = true  //布尔值const e: void = undefined  //Void，只能赋值为undefined和nullconst f: null = null      //nullconst g:undefined = undefined  //undefinedconst h: symbol = Symbol()   //symbol

对象类型

const obj: object = {}const obj0:object = function(){}const obj1:{foo:string,bar:number} = {foo:'foo', bar: 123}

数组类型

//使用数组泛型，Array<元素类型>let list: Array<number> = [1,2,3]//可以在元素类型后面加上[],表示由此类型元素组成的一个数组let list2: number[] = [3,4,5]function sum (...args: number[]) {    return args.reduce((prev, current) =>prev + current, 0)}sum(1,2,3,6)

元组

const tuple: [number,string] = [123, '123']const [age,num] = tuple

枚举

//枚举 enumconst enum postStatus {    Draft = 6,  //默认下标是0，可手动修改下标值    Unpublished,    Published}const post = {    title:'Hello Typescript',    content: 'Typescript is a typed superset of javascript',    status:postStatus.Draft}

函数

typescript支持默认参数，当函数的某个参数设置了默认值，当该函数被调用时，如果没有给这个参数传值或者传的值为undefined时，这个参数的值就是设置的默认值。

//function 函数类型function func (a:number, b:number = 10,...rest:number[]): string {    return 'func'}func(100,200)func(100,200,300,400)

any类型

 function stringify (value: any) {     return JSON.stringify(value) } stringify('aaa') stringify(100) stringify(true) let foo: any = 'string' foo = 100 foo.bar()

any类型是不安全的

类型断言

类型断言相当于其他语言里面的类型转换，但是不进行特殊的数据检查和解构。他没有运行时的影响，只是在编译阶段起作用。Typescript会假设你，程序员已经进行了必须的检查。

const nums = [100, 200, 300]const res = nums.find(i => i > 100)
类型断言有两种形式：const num1 = res as number  //as语法const num2 = <number>res //尖括号语法，JSX下不能使用

接口

//接口interface Post {    title:string    content:string}function printPost (post) {    console.log(post.title);    console.log(post.content);    }printPost({    title:'Hello typescript',    content:'A javascript superset'})

类

class Person {    public name: String    private age:number    protected readonly gender:boolean    constructor (name, age) {        this.name = name        this.age = age        this.gender = true    }    sayHi (msg: string): void {        console.log(`i am ${this.name},${msg}`);            }}const tom = new Person('tom', 12)
console.log(tom.name);只能访问name属性，不能访问age和gender属性，
name修饰符为public，是公有成员，在类的内部，外部，子类都可以访问，public可以省略age修饰符为private，说明他是一个私有属性，只有在类的内部访问，

gender修饰符为protected，protected定义的是受保护的成员，在自身属性和子类中都可以访问得到。readonly为只读，表示该属性只读，一旦赋值，不能进行修改

接口

interface eat {    eat (food:string): void   }interface run {    run(distance:number): void}//类，实现接口class Person implements eat, run {    eat (food: string): void {        console.log(`优雅进餐，${food}`);    }    run (distance:number): void {        console.log(`人类行走${distance}`);    }}class Animal implements eat, run{    eat (food: string): void {        console.log(`动物进食，${food}`);    }    run (distance:number): void {        console.log(`动物爬行${distance}`);    }}

抽象类

abstract class Animal {    run (distance:number): void {        console.log(`动物爬行${distance}`);    }    abstract eat(food:string): void}class Dog extends Animal {    eat(food:string): void {        console.log(`动物进食${food}`);            }}const dog = new Dog()dog.run(100)dog.eat('肉')

泛型

function createArray<T> (length:number, value: T):T[] {    const arr = Array<T>(length).fill(value)    return arr}const res = createArray<number>(3,100)console.log(res);const str = createArray<string>(3,'aaa')console.log(str);