Typescript

Typescript

TypeScript是JavaScript的超集,这意味着其完全兼容JS。

 

TypeScript类型注解

类型注解:轻量级的为函数或变量添加约束的方式
~ 语法 let title:string
~ 常用类型:string,number,boolean,string[],[string,number],any,any[],object
~ 枚举类型enum
声明 enum Color{Red,Green,Blue}
使用 Color.Blue

let tt: any;
tt = '1100';

const t1 = '123';

enum  Color {
  Red,
  Blue,
  Green
}
const c = Color.Red;

 

~ 函数类型注解
参数类型 function greeting(msg:string){}
返回值类型
function warning():void{}
function plus(a,b):number{}
~ 类型推论:如果直接给变量赋值,不必设置类型注解,编译器会进行类型推断

function f(): void {
  alert('112334');
}

function  add(a: number, b: number): number {
  return a + b;
}
console.log(add(1 , 2));

 

- 接口:约束类型的结构。
~ 声明接口 interface Person{ firstName:string;lastName:string;toString():string; }
~ 实现接口 只需和接口声明兼容即可

interface Person {
  firstName: string;
  lastName: string;
}

function f1(person: Person): string {
  return person.firstName + ' ' + person.lastName;
}
const user1 = { firstName: 'zz', lastName: '22'};
console.log(f1(user1));

 

- 类:TypeScript支持JavaScript的新特性,比如支持基于类的面向对象编程
~ 声明类
class Student{
fullName: string;

contructor(){}
}

new Student()

class Student {
  fullName: string;
  constructor(public firstName: string , public lastName: string) {
    this.fullName = firstName + ' ' + lastName;
  }
  toString(): string{
    return this.fullName;
  }
}
const stuInstance = new Student('zhan' , 'san');
console.log(stuInstance.toString());
console.log(stuInstance.fullName);
console.log(stuInstance.firstName + ' ' + stuInstance.lastName);

 

- 函数
~ TypeScript中函数如果声明了参数,则这些参数是必须的
~ 可选参数
function buildName(firstName:string,lastName?:string)

* 注意:可选参数必须放在必须参数后面

~ 参数默认值
function buildName(firstName:string,lastName:string = 'Smith')

function buildName(firstName: string , lastName: string): string {
  return `$firstName $lastName`;
}

 

- 模块:A = B + C
~ 导入 import 导出 export
~ 导出
* 具名导出
export const title=''

* 默认导出
export default class{...}
注意:一个文件中默认导出只能有一个

* 导出语句
export {a,b,c}

~ 导入
* 具名导入
import {title} from './type-annotation'

* 默认导入
import Student from './type-annotation'

posted @ 2020-08-07 13:11  youguess  阅读(111)  评论(0编辑  收藏  举报