TypeScript界面 typescript t

转载

jimoshalengzhou 2023-09-04 12:27:41

文章标签 TypeScript界面 typescript javascript TS语言特性 TS与JS的特点 文章分类 TypeScript 前端开发

简介

TypeScript对我们来说可能有点儿陌生，我们可以先简单的了解下JavaScript，它是一种具有函数优先的轻量级，解释型或即时编译型的编程语言，是数据类型可以被忽略的语言，一个变量可以赋不同类型的值，俗称弱类型语言。TypeScript是一种强类型语言。

// JavaScript的demo案例
var a = "abc";
a = 123;
console.log(`a: ${a}`); // a: 123

TypeScript的语言特性

与现存的JavaScript代码有非常高的兼容性。TypeScript是JavaScript的超集，意味着任何合法的JavaScript程序都是合法的TypeScript程序（很少有例外）。
TypeScript是一种在编译期进行静态类型分析的强类型的程序语言。
TypeScript中加入了基于类（Class）的对象、接口和模块，这些特性可以帮助我们以更好的方式构建代码，可以让代码更具可维护性与扩展性。
成为跨平台的开发工具。微软使用Apache协议开源了TypeScript，并且它可以在所有主流的操作系统上安装和执行。

强类型程序语言：通过向JavaScript增加可选的静态类型声明来把JavaScript变成强类型程序语言。可选的静态类型声明可约束函数、变量、属性等程序实体，这样编译器和相应的开发工具在开发过程中可以提供更好的正确性验证和帮助功能；能让程序员对自己和团队其他开发人员在代码中清晰地表达他的意图；它的类型检测在编译期进行且没有运行时开销。

基本类型

基本类型有boolean、number、string、array、void和所有自定义的enum类型。所有这些类型在TypeScript中，都有一个唯一的顶层的Any Type类型的字类型，any关键字代表这种类型。

类型	Demo	描述
boolean	let isDone: boolean = true;	boolean类型只可能是两种值。它们分别是true和false。
number	const PI: number = 3.1415926;	与JavaScript一样，所有的数字在TypeScript中都是浮点数。
string	let username: string = ‘summer’; let password: string = “summer”;	在代码中使用字符串是将它们放在单引号或者双引号中间。
array	const list: number[] = [1, 2, 3]; const list : Array = [1, 2, 3];	array类型的声明有两种写法。第一种在数组元素的类型后面跟着[]; 第二种是使用泛型数组类型Array
enum	enum TypeEnum { Success= 0, Error = 1, Warning = 2 } let type = TypeEnum.Success	enum类型是为了给一个数字集合更友好的命名。 enum类型中的成员默认是从0开始，但你也可以手动设置成员中的值来更改这种默认行为。
any	let random: any = 123; random = “it could be a string”； random = false; let list :any[] = [‘me’, true, 123]；	any类型可以表示任意JavaScript值。对一个any类型的值操作时仅进行最小化静态检查。使用any类型是与现存的JavaScript代码一起工作的一种高效方式，可以在编译期逐步添加或者去除类型检查。
void	function noReturnValue() : void { console.log(“该函数无返回值”) }	在某种程度上，any的对立面是void，即所有的类型都不存在的时候。

JavaScript的原始类型包括了undefined和null。在JavaScript中，undefined是全局作用域的一个属性，它会赋值给那些被声明但未被初始化的变量。null是一个字面量，可以被赋值给那些表示没有值的变量。

let testStr; 
console.log(testStr); // undefined
console.log(typeof testStr); // undefined


let testStr1 = null;
console.log(testStr1); // null
console.log(typeof testStr1); // object

在TypeScript中，我们不能把null或undefined当作类型使用：

let testStr: null;// 类型错误
let testStr1: undefined;// 找不到undefined

null和undefined都不能被当作类型使用，所以上面的这些代码都是不合法的。

联合类型

联合类型用来声明可以存储多种类型值的变量。

var path : string[] | string;
path = '/user/index';
path = ['/user/index', '/user/detail'];
path = 123; // 错误

变量

在TypeScript中，声明一个变量时，可以使用var、let和const关键字：

var num: number = 123;
let isDone: boolean = false;
const PI: number = 3.1415926;

使用var声明的变量保存在最近的函数作用域中（如果不在任何函数中则在全局作用域中）

使用let声明的变量保存在最近的块作用域中（如果不在任何块中则在全局作用域中）

使用const声明的常量，可以是全局作用域也可以是块作用域

类

ECMAScript6中，添加了基于类的面向对象编程语法。由于TypeScript是基于ES6，所以可以使用基于类的面向对象的语法。

在TypeScript中声明类时，所有的属性和方法默认都是公共的。

class User {
  fullName: string;
  constructor(firstName: string, lastName: string) {
    this.fullName = `${firstName}${lastName}`;
  }
  greet(name?:string) {
    if(name) {
      return `Hello, ${name}.My name is ${this.fullName}`
    } else {
      return `Hi, My name is ${this.fullName}`
    }
  }
}

const user = new User("李", "木子")
const msg = user.greet("summer");
console.log(msg); // Hello, summer.My name is 李木子

接口

在TypeScript中，可以使用接口来确保类拥有指定的结构。

interface UserInterface {
	name: string;
  password: string;
}
var user: UserInterface = {
  name: "",
  paasword: "" // 编译报错
}

使用接口来约束对象，使我们可以避免很多潜在的小错误，尤其是在写对象字面量时。

命名空间

命名空间，又称内部模块，被用于组织一些具有某些内在联系的特性和对象。命名空间能够使代码结构更清晰，可以使用namespace和export关键字。

命名空间一个最明确的目的就是解决重名问题。

namespace Drawing { 
    export interface IShape { 
        draw(); 
    }
  
  	export class Circle implements IShape { 
        public draw() { 
            console.log("Circle is drawn"); 
        }  
    }
  
   	export class Triangle implements IShape { 
        public draw() { 
            console.log("Triangle is drawn"); 
        } 
    } 
}

function drawAllShapes(shape:Drawing.IShape) { 
    shape.draw(); 
} 
drawAllShapes(new Drawing.Circle());// Circle is drawn
drawAllShapes(new Drawing.Triangle());// Triangle is drawn