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'